<!DOCTYPE html>
<html lang="zh-cn" ng-app>
<head>
<meta charset="UTF-8">
<title>Hello Kitty!</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
<div ng-init="name='Kitty'">Hello {{name}}!</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-cn" ng-app>
<head>
<meta charset="UTF-8">
<title>Hello Kitty!</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
<input ng-model="name" class="ng-cloak"/>
<p>Hello {{name}}!</p>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app>
<head>
<meta charset="UTF-8">
<title>scope</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
<div class="ng-cloak" ng-controller="ControllerA">
Hello {{name}}!;
</div>
<div class="ng-cloak" ng-controller="ControllerB">
Hello {{name}}!;
<div class="ng-cloak" ng-controller="ControllerC">
Hello {{name}}!;
<div class="ng-cloak" ng-controller="ControllerD">
Hello {{name}}!;
</div>
</div>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
function ControllerA($scope) {
$scope.name = 'Kitty';
}
function ControllerB($scope) {
$scope.name = 'Lcllao';
}
function ControllerC($scope) {
$scope.name = 'Jeffrey';
}
function ControllerD($scope) {
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app>
<head>
<meta charset="UTF-8">
<title>Controller</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
<div class="ng-cloak" ng-controller="ControllerA">
Hello {{name}}!
<button ng-click="doIt()">DoIt!!</button>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
function ControllerA($scope) {
$scope.name = 'Kitty';
$scope.doIt = function() {
$scope.name = "Handsome";
};
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="myDirective">
<head>
<meta charset="UTF-8">
<title>directive</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body ng-controller="MyCtrl">
<div ng-model="content" contenteditable="true">My Little Dada</div>
<pre class="ng-cloak">modelValue = {{content}}</pre>
<button ng-click="reset()">reset(change model)</button>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
angular.module("myDirective",[])
.directive("contenteditable",function() {
return {
require:'ngModel',
link:function (scope, element, attr, ngModel) {
function setVal() {
ngModel.$setViewValue(element.text());
}
// veiw -> model
element.bind("keyup",function() {
scope.$apply(setVal);
});
// model -> view
ngModel.$render = function(val) {
console.log("render running");
element.html(val);
};
//init
setVal();
}
}
}
).controller("MyCtrl",function($scope) {
$scope.reset = function() {
$scope.content = "My Little Dada";
};
});
</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app>
<head>
<meta charset="UTF-8">
<title>filter</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
<div ng-init="list = ['百度B','搜狗S','360','3SB']">
数字格式化: 1233211234567 -> {{1233211234567|number}}<br/>
数组过滤，然后通过json格式输出: <input ng-model="myFilterText" type="text"/><br/>
{{list|filter:myFilterText|json}}<br/>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
</body>
</html>
// Create a module
var myModule = angular.module('myModule', [])
// Configure the injector
myModule.factory('serviceA', function() {
return {
// instead of {}, put your object creation here
};
});
// create an injector and configure it from 'myModule'
var $injector = angular.injector('myModule');
// retrieve an object from the injector by name
var serviceA = $injector.get('serviceA');
// always true because of instance cache
$injector.get('serviceA') === $injector.get('serviceA');//true
// You write functions such as this one.
function doSomething(serviceA, serviceB) {
// do something here.
}
// Angular provides the injector for your application
var $injector = ...;
///////////////////////////////////////////////
// the old-school way of getting dependencies.
var serviceA = $injector.get('serviceA');
var serviceB = $injector.get('serviceB');
// now call the function
doSomething(serviceA, serviceB);
//上面是传统的老方法~下面是angular说自己的牛X方法
///////////////////////////////////////////////
// the cool way of getting dependencies.
// the $injector will supply the arguments to the function automatically
$injector.invoke(doSomething); // This is how the framework calls your functions
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="timeExample">
<head>
<meta charset="UTF-8">
<title>injector</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
<div ng-controller="ClockCtrl" class="ng-cloak">
Current time is : {{time.now}}
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
angular.module("timeExample", []).factory("myClock", function ($timeout) {
var time = {};
(function tick() {
time.now = new Date().toString();
$timeout(tick, 1000);
})();
return time;
});
/**
*
* @param $scope
* @param myClock 这里自动插入了依赖的myClock！！
* @constructor
*/
function ClockCtrl($scope,myClock) {
$scope.time = myClock;
}
</script>
</body>
</html>
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号：苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有