Angular.js学习笔记

  1 <!DOCTYPE html>
  2 <html lang="en">
  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>

 

posted @ 2015-07-20 15:21  刘小吉  阅读(370)  评论(0编辑  收藏  举报