1 <!DOCTYPE html>
2 <html >
3 <head>
4 <title>AngularJS</title>
5 <!--学习地址-->
6 <!--http://www.yiibai.com/angularjs/angularjs_includes.html-->
7 <!--http://docs.angularjs.cn/api/ng/filter/filter-->
8 <!--http://docs.angularjs.cn/api/ng-->
9 <!--推荐使用工具 vs2015 或 WebStorm-->
10 <!--加载框架-->
11 <script src="/Scripts/tool/angularjs/Angular.js"></script>
12 <script>
13 // 注册控制器
14 var mainApp = angular.module("mainApp", []);
15 mainApp.controller("Controller", function ($scope) {
16 $scope.model = {
17 title: "Angular",
18 fullName: function () {
19 var obj;
20 obj = $scope.model;
21 return obj.title + " name";
22 }
23 };
24 $scope.student = {
25 firstName: "MyStudend",
26 amount: 51
27 };
28 });
29 mainApp.factory('m', function () {
30 var factory = {};
31 factory.multiply = function (a, b) {
32 return a * b;
33 }
34 return factory;
35 });
36
37
38
39
40 </script>
41 </head>
42 <body ng-app="mainApp">
43 <h2>模型 - model</h2>
44 <p>
45 <b>模型是负责管理应用程序的数据。它响应来自视图的请求，同时也响应指令从控制器进行自我更新。</b>
46 </p>
47 <h2>视图 - view</h2>
48 <p>
49 <b>在一个特定的格式的演示数据，由控制器决定触发显示数据。它们是基于脚本的模板系统，如JSP，ASP，PHP，非常容易使用AJAX技术的集成。</b>
50 </p>
51 <h2>控制器 - controller</h2>
52 <p>
53 <b>控制器负责响应于用户输入并执行交互数据模型对象。控制器接收到输入，它验证输入，然后执行修改数据模型的状态的业务操作。</b>
54 </p>
55 <p>注意点：angular.module("mainApp", [])这样的注册只能有一次，其他地方使用会报错</p>
56 <p>ng-app：设定作用域</p>
57 <p>ng-model：设定模型变量</p>
58 <p>ng-controller:设置某个控制器的作用域</p>
59 <p>ng-bind：绑定模型</p>
60 <p>ng-init：初始化应用程序数据</p>
61 <p>ng-repeat：重复集合中的每个项目的HTML元素。用于迭代(循环)</p>
62 <p>ng-disabled:禁用</p>
63 <p>ng-show:显示</p>
64 <p>ng-hide:隐藏</p>
65 <p>ng-click:单击事件</p>
66 <p>ng-dbl-click:双击事件</p>
67 <p>ng-mousedown:当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件</p>
68 <p>ng-mouseup:当在元素上放松鼠标按钮时，会发生 mouseup 事件</p>
69 <p>ng-mouseenter:当鼠标指针穿过元素时，会发生 mouseenter 事件</p>
70 <p>ng-mouseleave:当鼠标指针离开元素时，会发生 mouseleave 事件</p>
71 <p>ng-mousemove:当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件</p>
72 <p>ng-mouseover:当鼠标指针位于元素上方时，会发生 mouseover 事件</p>
73 <p>ng-keydown:当键盘或按钮被按下时，发生 keydown 事件</p>
74 <p>ng-keyup:当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上</p>
75 <p>ng-keypress:当键盘或按钮被按下时，发生 keypress 事件</p>
76 <p>ng-change:当元素的值发生改变时，会发生 change 事件</p>
77
78 <!--控制器-->
79 <div ng-controller="Controller">
80 <p>模型1</p>
81 <p>
82 Hello {{'World'}} {{6666}}!
83 </p>
84 <p>模型2</p>
85 <p>
86 <input type="text" ng-model="name" placeholder="World" />
87 Hello {{name || 'World'}}!
88 </p>
89 <p>模型3</p>
90 <p>
91 <ul>
92 <li ng-repeat="item in [0, 1, 2, 3, 4, 5, 6, 7]">{{item}}
93 </li>
94 </ul>
95 </p>
96 <p>模型4</p>
97 <p>
98 {{model.title}}<br />
99 {{model.fullName()}}
100 </p>
101 <p>模型5</p>
102 <p>
103 <input ng-model="model.title" type="text" /><br />
104 <span ng-bind="model.title"></span>
105 </p>
106 <p>模型6</p>
107 <p>
108 <div ng-app="myapp01" ng-init="countries=[{locale:'en-US',name:'United States'},{locale:'en-GB',name:'United Kingdom'},{locale:'en-FR',name:'France'}]">
109 {{countries}}
110 <br />
111 {{countries[0].name}}
112 </div>
113 </p>
114 <script>
115 //自定义注册过滤器
116 mainApp.filter('filter', function () {
117 return function (input) {
118 if (input) {
119 return 'filter:\"' + input + '"';
120 }
121 return '';
122 }
123 });
124 </script>
125 <p>模型7</p>
126 <p>
127 大写过滤: {{student.firstName | uppercase}}<br />
128 小写过滤: {{student.firstName | lowercase}}<br />
129 货币过滤: {{student.amount | currency}}<br />
130 自定义过滤: {{student.firstName | filter}}<br />
131 排序过滤:<br />
132 <ul ng-repeat="i in [{name:'b'}, {name:'ab'}, {name:'a'}, {name:'bs'}] | orderBy:'name'">
133 <li>{{i.name}}</li>
134 </ul>
135 </p>
136 <p>模型8</p>
137 <p ng-controller="TestController">
138 <input type="checkbox" ng-model="enableDisableButton" />Disable Button
139 <input type="radio" ng-model="enableDisableButton" />Disable Button
140 <button ng-disabled="enableDisableButton">Click Me!</button>
141 <br />
142 <input type="checkbox" ng-model="showHide1" />Show Button
143 <button ng-show="showHide1">Click Me!</button>
144 <br />
145 <input type="checkbox" ng-model="showHide2" />Hide Button
146 <button ng-hide="showHide2">Click Me!</button>
147 <br />
148 <div ng-controller="TestController">
149 <p>Total click: {{ clickCounter }}</p>
150 <button ng-click="clickCounter = clickCounter + 1">Click Me!</button>
151 <button ng-click="clickTest()">Click Me!</button>
152 </div>
153 <script>
154 mainApp.controller("TestController", function ($scope) {
155 $scope.clickTest = function () {
156 $scope.clickCounter = $scope.clickCounter || 0;
157 $scope.clickCounter = $scope.clickCounter + 1;
158 };
159 });
160 </script>
161 </p>
162 <p>模型9</p>
163 <p>
164 <script>
165 // 注册工厂
166 mainApp.factory('MathService', function () {
167 var factory = {};
168 factory.multiply = function (a, b) {
169 return a * b;
170 }
171 return factory;
172 });
173
174 //注册服务
175 mainApp.service('CalcService', function (MathService) {
176 this.square = function (a) {
177 return MathService.multiply(a, a);
178 }
179 });
180
181 mainApp.controller('CalcController', function ($scope, CalcService) {
182 $scope.square = function () {
183 $scope.result = CalcService.square($scope.number);
184 }
185 });
186 </script>
187 <div ng-controller="CalcController">
188 <p>
189 Enter a number:
190 <input type="number" ng-model="number" />
191 <button ng-click="square()">X<sup>2</sup></button>
192 <p>Result: {{result}}</p>
193 </div>
194 </p>
195 <p>
196 <script>
197 //值
198 mainApp.value("defaultInput", 5);
199 //常量
200 mainApp.constant("configParam", "constant value");
201 mainApp.controller('CalcController', function ($scope, CalcService, defaultInput) {
202 $scope.number = defaultInput;
203 $scope.result = CalcService.square($scope.number);
204 $scope.square = function () {
205 $scope.result = CalcService.square($scope.number);
206 }
207 });
208 </script>
209 </p>
210 <p>模型10</p>
211 <p>
212 <script>
213 //Create a directive, first parameter is the html element to be attached.
214 //We are attaching student html tag.
215 //This directive will be activated as soon as any student element is encountered in html
216 mainApp.directive('student', function () {
217 //define the directive object
218 var directive = {};
219 //restrict = E, signifies that directive is Element directive
220 directive.restrict = 'E';
221 //template replaces the complete element with its text.
222 directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
223 //scope is used to distinguish each student element based on criteria.
224 directive.scope = {
225 student: "=name"
226 }
227 //compile is called during application initialization. AngularJS calls it once when html page is loaded.
228 directive.compile = function (element, attributes) {
229 element.css("border", "1px solid #cccccc");
230 //linkFunction is linked with each element with scope to get the element specific data.
231 var linkFunction = function ($scope, element, attributes) {
232 element.html("Student: <b>" + $scope.student.name + "</b> , Roll No: <b>" + $scope.student.rollno + "</b><br/>");
233 element.css("background-color", "#ff00ff");
234 }
235 return linkFunction;
236 }
237 return directive;
238 });
239 mainApp.controller('StudentController', function ($scope) {
240 $scope.Mahesh = {};
241 $scope.Mahesh.name = "Mahesh Parashar";
242 $scope.Mahesh.rollno = 1;
243
244 $scope.Piyush = {};
245 $scope.Piyush.name = "Piyush Parashar";
246 $scope.Piyush.rollno = 2;
247 });
248 </script>
249 <div ng-app="mainApp" ng-controller="StudentController">
250 <student name="Mahesh"></student>
251 <br />
252 <student name="Piyush"></student>
253 </div>
254 </p>
255 </div>
256 </body>
257 </html>