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>