1 var app = angular.module("app", []);
2
3 function HelloController($scope) {
4 $scope.data = {message : "World"};
5
6 }
7
8 function CartController($scope) {
9 $scope.items = [
10 {title : "饼干", quantity : 8, price : 3.95},
11 {title : "大饼", quantity : 18, price : 13.95},
12 {title : "面包", quantity : 3, price : 5.95}
13 ];
14
15 $scope.remove = function (index) {
16 $scope.items.splice(index, 1);
17 }
18 }
19
20 //监视字段变化(只会在用户手动输入时触发)
21 app.controller("FormController", function($scope) {
22 $scope.funding = {startingEstimate : 0};
23
24 $scope.computeNeeded = function() {
25 $scope.needed = $scope.funding.startingEstimate * 10;
26 }
27 });
28
29 //监视字段变化(被其他controller绑定后修改或者从后台获取数据更新都会触发)
30 function WatchController($scope) {
31 $scope.funding = {startingEstimate : 0};
32
33 var computeNeeded = function(){
34 $scope.funding.needed = $scope.funding.startingEstimate * 10;
35 }
36
37 $scope.$watch("funding.startingEstimate", computeNeeded);
38
39 //提交表单
40 $scope.requestFunding = function() {
41 window.alert("submit");
42 }
43 //重置表单
44 $scope.reset = function() {
45 $scope.funding.startingEstimate = 0;
46 }
47 }
48
49 //ng-show指令控制元素显隐(display:block|none)
50 function MenuController($scope) {
51 $scope.menuState = {show : false};
52
53 $scope.toggleMenu = function() {
54 $scope.menuState.show = !$scope.menuState.show;
55 }
56 }
57
58 //ng-class控制元素样式
59 function StyleController($scope) {
60 $scope.isError = false;
61 $scope.isWarning = false;
62
63 $scope.showError = function() {
64 $scope.isError = true;
65 $scope.isWarning = false;
66 }
67
68 $scope.showWarning = function() {
69 $scope.isWarning = true;
70 $scope.isError = false;
71 }
72 }
73
74 function ParentController($scope) {
75 }
76 // 该controller在页面端被ParentController包裹
77 // 所以该controller的$scope会继承ParentController的$scope
78 function ChildController($scope) {
79 }
80
81 //$watch
82 function Watch2Controller($scope) {
83 $scope.count = 0;
84
85 $scope.total = function() {
86 return $scope.count;
87 }
88
89 function output(newValue, oldValue, scope) {
90 console.info(newValue);
91 $scope.text = "新值:"+newValue + "; 旧值:" + oldValue;
92 }
93
94 $scope.$watch($scope.total, output);
95 }
96
97 app.factory("Data", function() {
98 var data = {};
99
100 data.query = function() {
101 return [1,2,3];
102 }
103
104 return data;
105 });
106
107 //定义服务, 通过参数传递
108 function FactoryController($scope, Data) {
109 $scope.items = Data.query();
110
111 }
112
113 //过滤器, 截取字符
114 app.filter("cutStr", function() {
115 //第一个参数为表达式的值,后边一次是增加的参数 {{item | cutStr:'=':'-'}}
116 //a:item b:'=' c:'-'
117 // item包括后面的参数都可以是angular表达式
118 var cut = function(a,b,c) {
119 console.info(a + ":" +b + ":" + c);
120 return a.length > 6 ? a.slice(0, 6) + "..." : a;
121 }
122
123 return cut;
124 })
125
126 //利用过滤器对数据进行处理,便于展示
127 function FilterController($scope) {
128 $scope.items = ["123456789", "abcdefghijkl", "你好"];
129 }
1 <!DOCTYPE html>
2 <html ng-app="app">
3 <meta charset="utf-8"/>
4 <style>
5 .error {
6 background-color: red;
7 }
8 .warning {
9 background-color: orange;
10 }
11 </style>
12 <script src="js/angular.js"></script>
13 <script src="js/jquery-1.8.0.js"></script>
14 <body>
15 <div ng-controller="HelloController">
16 <input type="text" ng-model="data.message"/>
17 <h2>Hello ,{{data.message}} !</h2>
18 </div>
19 <hr/>
20
21 <div ng-controller="CartController">
22 <h1>Your Cart</h1>
23 <div ng-repeat="item in items">
24 <span>{{item.title}}</span>
25 <input type="text" ng-model="item.quantity"/>
26 <span>{{item.price | currency}}</span>
27 <span>{{item.price * item.quantity | currency}}</span>
28 <span>last:{{$last}}</span>
29 <span>first:{{$first}}</span>
30 <span>middle:{{$middle}}</span>
31 <button ng-click="remove($index)">Remove</button>
32 </div>
33 </div>
34 <hr/>
35
36 <form ng-controller="FormController">
37 <p>ng-change监控输入</p>
38 Starting : <input ng-change="computeNeeded()" ng-model="funding.startingEstimate"/>
39 Recommendation : {{needed}}
40 </form>
41 <hr/>
42
43 <form ng-controller="WatchController" ng-submit="requestFunding()">
44 <p>$scope.$watch监控输入</p>
45 Staring : <input ng-model="funding.startingEstimate"/>
46 Recommendation : {{funding.needed}}
47 <button>submit</button>
48 <button ng-click="reset()">Reset</button>
49 </form>
50 <hr/>
51
52 <div ng-controller="MenuController">
53 <p><button ng-click="toggleMenu()">Toggle Menu</button><span>ng-show指令</span></p>
54 <ul ng-show="menuState.show">
55 <li ng-click="stun()">Stun</li>
56 <li ng-click="disintegrate()">Disintegrate</li>
57 <li ng-click="erase()">Erase</li>
58 </ul>
59 </div>
60 <hr/>
61
62 <div ng-controller="StyleController">
63 <p>ng-style ng-class 接受一个表达式,用以设置样式,类名</p>
64 <p>表达式可以是: 1. 空格分隔的字符串, 2. 类名数组, 3.类名到布尔值的映射({error:isError, warning:isWarning})</p>
65 <p ng-class="{error:isError, warning:isWarning}">ng-class</p>
66 <button ng-click="showError()">Error</button>
67 <button ng-click="showWarning()">Warning</button>
68 </div>
69 <hr/>
70
71 <div ng-controller="ParentController">
72 父controller中message属性:<input ng-model="message"/>
73 <div ng-controller="ChildController">
74 <p>子controller中message属性: {{message}}</p>
75 </div>
76
77 <p>通过(ng-click="count=3")设置$scope中count属性:{{count}}<button ng-click="count=3">设置count为3</button></p>
78 </div>
79 <hr/>
80
81 <div ng-controller="Watch2Controller">
82 <p>$watch方法签名 $watch(watchFn, watchAction, deepWatch);</p>
83 <p><b>watchFn: </b>一个Angular字符串表达式或者是一个返回你所希望监控的模型当前值的函数. 这个表达式会被多次执行,要注意性能</p>
84 <p><b>watchAction: </b>这是watchFn发生变化时会被调用的函数或者表达式. 在函数形式中, 它接受watchFn的新值, 旧值以及作用域的引用.
85 其签名就是function(newValue, oldValue, scope).</p>
86 <p><b>deepWatch: </b>可选的, 布尔型, 用于告诉Angular检查所监控的对象中每一个属性的变化</p>
87
88 <input ng-model="count"/>
89 <p>{{text}}</p>
90 </div>
91 <hr/>
92
93 <div ng-controller="FactoryController">
94 <h3>这里有三个函数用于创建通用服务</h3>
95 <table>
96 <thead>
97 <tr>
98 <th>Function</th>
99 <th>定义(Defines)</td>
100 </tr>
101 </thead>
102 <tbody>
103 <tr>
104 <td>provider(name, Object/constructor())</td>
105 <td>一个可配置的服务, 带有复杂的创建逻辑. 如果你传递一个对象, 它应该有一个名为`$get`的函数, 用于返回服务的实例. 否则, Angular会假设你传递了一个构造函数, 当调用它时创建实例.</td>
106 </tr>
107 <tr>
108 <td>factory(name, $get Function())</td>
109 <td>一个不可配置的服务也带有复杂的创建逻辑. 你指定一个函数, 当调用时, 返回服务实例. 你可以认为这和<code>provider(name, { $get: $getFunction()})</code>一样</td>
110 </tr>
111 <tr>
112 <td>service(name, constructor())</td>
113 <td>一个不可配置的服务, 其创建逻辑简单. 就像<code>provider</code>的构造函数选项, Angular调用它来创建服务实例.</td>
114 </tr>
115 </tbody>
116 </table>
117 <p><span ng-repeat="item in items">{{item}} </span></p>
118 </div>
119 <hr/>
120
121 <div ng-controller="FilterController">
122 <p>过滤器: 格式 { { expression | filterName : parameter1 : … parameterN } } </p>
123 <p>filter函数处理时第一个参数为前面expression的值,后边的参数一次为parameter1..., 其中parameter也可以为表达式</p>
124 <p>截取字符filter: <span ng-repeat="item in items">{{item | cutStr:'|':$index}} </span></p>
125 </div>
126 <script src="js/index.js"></script>
127 </body>
128 </html>
