首页 / ANGULAR / Angular.js学习笔记
Angular.js学习笔记
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Angular.js学习笔记，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8583字，纯文字阅读大概需要13分钟。
内容图文
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// 注册控制器 14var mainApp = angular.module("mainApp", []);
15 mainApp.controller("Controller", function ($scope) {
16 $scope.model = {
17 title: "Angular",
18 fullName: function () {
19var obj;
20 obj = $scope.model;
21return obj.title +" name";
22 }
23 };
24 $scope.student = {
25 firstName: "MyStudend",
26 amount: 51 27 };
28 });
29 mainApp.factory(‘m‘, function () {
30var factory = {};
31 factory.multiply =function (a, b) {
32return a * b;
33 }
34return 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 () {
117returnfunction (input) {
118if (input) {
119return‘filter:\"‘+ input +‘"‘;
120 }
121return‘‘;
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 () {
167var factory = {};
168 factory.multiply =function (a, b) {
169return a * b;
170 }
171return factory;
172 });
173174//注册服务175 mainApp.service(‘CalcService‘, function (MathService) {
176this.square =function (a) {
177return MathService.multiply(a, a);
178 }
179 });
180181 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 html216 mainApp.directive(‘student‘, function () {
217//define the directive object218var directive = {};
219//restrict = E, signifies that directive is Element directive220 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.231var 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 }
235return linkFunction;
236 }
237return directive;
238 });
239 mainApp.controller(‘StudentController‘, function ($scope) {
240 $scope.Mahesh = {};
241 $scope.Mahesh.name ="Mahesh Parashar";
242 $scope.Mahesh.rollno =1;
243244 $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>
原文：http://www.cnblogs.com/liuxiaoji/p/4661512.html
内容总结
以上是互联网集市为您收集整理的Angular.js学习笔记全部内容，希望文章能够帮你解决Angular.js学习笔记所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】