AngularJS -- AngularJS应用骨架 liujj@golden-tech liujj@golden-tech.

AngularJS -- AngularJS应用骨架

调用Angular 为了使用Angular，所有应用都必须首先做两件事情：加载angular.js库
使用ng-app指令告诉Angular应该管理DOM的哪一部分

加载脚本从Google的内容分发网络（CDN）中加载类库在国内的话最好使用本地的路径
<script src=" 在国内的话最好使用本地的路径

使用ng-app声明Angular的边界
可以用ng-app指令告诉Angular应该管理页面中的哪一块（html标签、某个div标签等）

Model View Controller Model View Controller mvc.01.text.html
使用对象的属性来创建数据模型，甚至只用基本数据类型来存储数据。 var messages = { someText : ‘You have started your journey.’ }; View HTML页面(DOM) <p>{{someText}}</p>  Controller 编写的类或者类型 function TextController($scope) { $scope.messages = messages; } 上面这种写法是在全局作用域中创建了TextController。虽然对于示例代码来说，这没有上面问题，但是其实定义控制器的正确方式是，把它定义成模块的一部分，控制器可以为应用里相关的部分提供命名空间机制。 mvc.01.text.html mvc.02.model.html

在模块中定义控制器 mvc.03.myApp.html
<html ng-app=‘myApp’>  <body ng-controller='TextController'> <p>{{messages.someText}}</p> <script type="text/javascript" src="angular.js"></script> <script type="text/javascript"> // 2.调用angular对象创建一个名为myApp的模块 var myAppModule = angular.module('myApp', []); // 3.把控制器函数传递给myApp模块的controller函数 myAppModule.controller('TextController', function ($scope) { var messages = { someText : 'Your have started your journey.' }; $scope.messages = messages; } ); </script> </body> </html> mvc.03.myApp.html

模板和数据绑定基本的运作流程：用户请求应用起始页。
用户的浏览器向服务器发起一次HTTP连接，然后加载index.html页面，这个页面里包含了模板。 Angular被加载到页面中，等待页面加载完成，然后查找ng-app指令，用来定义模板边界。 Angular遍历模板，查找指令和绑定关系，这将触发一系列动作：注册监听器、执行一些DOM操作、从服务器获取初始化数据。这项工作的最后结果是，应用将会启动起来，并且模板被转换成DOM视图。连接都服务器去加载需要给用户的其他数据。对于每一个Angular应用来说，步骤1到3都是标准化的，步骤4和5是可选的。为了提升性能，对于应用中的第一个视图，可以把数据和HTML模板一起加载进来，从而避免发起多次请求。使用Angular构建应用的时候，可以将应用中的模板和数据分离开来。这样就可以把模板缓存起来。在第一次请求之后，只需要把新的数据下载到浏览器中即可。

显示文本使用ng-bind指令，可以在UI中的任何地方显示并刷新文本。它有两种等价形式：
使用双花括号的形式 <p>{{greeting.text}}</p> 使用基于属性的指令 <p ng-bind='greeting.text'></p> 创建双花括号语法的目的是为了阅读起来更加自然，并且需要输入的内容更少。虽然两种形式的输出内容相同，但是使用双花括号语法的时候，在Angular使用数据替换这些花括号之前，第一个加载页面，也就是应用中的index.html，其未被渲染好的模板可能会被用户看到。造成这种现象的原因是，浏览器需要首先加载HTML页面，渲染它，然后Angular才有机会把它解释成你期望看到的内容好消息是，在大多数模板中你依然可以使用{{ }}。但是，对于index.html页面中的数据绑定操作，建议使用ng-bind。这样一来，在数据加载完之前你的用户就不会看到任何内容。 ng-bind.html

表单输入可以使用ng-model属性把元素绑定到模型属性上这一机制对所有标准的表单元素都可以起作用（如文本框，单选框，复选框等）
<input type="checkbox" ng-model="youCheckedIt"> <p>{{youCheckedIt}}</p>

ng-change ng-change属性指定一个控制器方法，一旦修改了输入值，这个方法就会被调用
<form ng-controller='StartUpController'> Starting: <input ng-change='computeNeeded()' ng-model='funding.startingEstimate'> Recommendation: {{funding.needed}} </form> <script type="text/javascript" src="angular.js"></script> <script type="text/javascript"> function StartUpController ($scope) { $scope.funding = {startingEstimate: 0}; $scope.computeNeeded = function() { $scope.funding.needed = $scope.funding.startingEstimate * 10; }; } </script> form.input.02.compute.needed.html

$watch()函数使用ng-change会有一个潜在的问题，即，只有当用户在文本框中输入的时候才去计算所需的金额。
function StartUpController ($scope) { $scope.funding = {startingEstimate: 0}; computeNeeded = function() { $scope.funding.needed = $scope.funding.startingEstimate * 10; }; $scope.$watch('funding.startingEstimate', computeNeeded); } form.input.04.compute.needed.watch.html

列表、表格以及其它迭代性元素 ng-repeat将会生成标签内部所有HTML元素的一份拷贝，包括放指令的标签。
$index返回当前引用的元素序号 $first、$middle、$last返回布尔值，表示当前元素是否是集合中的第一个元素、中间的某个元素，或者最后一个元素 <div ng-controller='AlbumController'> <table> <tr ng-repeat='track in album'> <td>{{$index + 1}}</td> <td>{{track.name}}</td> <td>{{track.duration}}</td> </tr> </table> </div> ng-repeat.03.album.index.html

隐藏和显示 ng-show、ng-hide
这两个命令是等价的,但是运行效果正好相反 ng-show为true时将显示元素，为false时将会隐藏元素；ng-hide正好相反。 <div ng-controller='DeathrayMenuController'> <button ng-click="toggleMenu()">Toggle Menu</button> <ul ng-show='menuState'> <li ng-click="stun()">Stun</li> <li ng-click="disintegrate()">Disintegrate</li> <li ng-click="erase()">Erase from history</li> </ul> </div> function DeathrayMenuController($scope) { $scope.menuState = false; $scope.toggleMenu = function() { $scope.menuState = !$scope.menuState; }; } ng-show.html

CSS类和样式 ng-class、ng-style <div ng-controller='HeaderController'>
这两个都可以接受一个表达式：表示CSS类名的字符串，以空格分隔 CSS类名数组 CSS类名到布尔值的映射 <div ng-controller='HeaderController'> <div ng-class='{error: isError, warning: isWarning}'>{{messageText}}</div> <button ng-click="showError()">Simulate Error</button> <button ng-click="showWarning()">Simulate Warning</button> </div> function HeaderController($scope) { $scope.isError = false; $scope.isWarning = false; ...... } ng-class.01.error.warning.html

src和href属性 src/ng-src href/ng-href 推荐使用ng-src和ng-href。
<img src = "./images/{{favoriteCat}}"> <img ng-src = "./images/{{favoriteCat}}"> href/ng-href <a href = "./shop/category={{numberOfBalloons}}">numberOfBalloons</a> <a ng-href = "./shop/category={{numberOfBalloons}}">numberOfBalloons</a> 推荐使用ng-src和ng-href。

表达式在模板中使用表达式是为了以充分的灵活性在模板、业务逻辑和数据之间建立联系，同时又能避免让业务逻辑渗透到模板中。表达式
数学运算（+、-、/、*、%）比较运算（==、!=、>、<、>=、<=）布尔运算（&&、||、!）位运算（\^、&、|）还可以调用控制器中$scope对象上所暴露的函数，引用数组和对象符合（[]、{}、.）

<div ng-controller=‘SomeController'>
<div>{{recompute() / 10}}</div> <ul ng-repeat=‘thing in things’> <li ng-class=‘{highlight: $index % 4 >= threshold($index)}’> {{otherFunction($index)}} </li> </ul> </div> 【 recompute() / 10 】虽然是合法的，但是它也是把业务逻辑放到模板中的一个典型例子，应该避免这种做法。

区分UI和控制器的职责在应用中控制器有三种职责为了让控制器保持小巧和可管理状态，建议为视图中的每一块功能区域创建一个控制器。
为应用中的模型设置初始状态通过$scope对象把数据模型和函数暴露给视图（UI模板）监视模型其余部分的变化，并采取相应的动作为了让控制器保持小巧和可管理状态，建议为视图中的每一块功能区域创建一个控制器。有两种方法可以把控制器关联到DOM节点在模板中通过ng-controller属性来声明通过路由把它绑定到一个动态加载的DOM模板片段上，这个模板叫做视图如果UI中带有一个非常复杂的区域，可以创建嵌套的控制器，它们可以通过继承树结构来共享数据模型和函数，这样就可以保持代码的简单和可维护性。 <div ng-controller=“ParentController”> <div ng-controller=“ChildController”>...</div> </div> 虽然把这种方式叫做控制器嵌套，但真实的嵌套发生在$scope对象上。通过内部的原型继承机制，父控制器对象上的$scope会被传递给内部嵌套控制器的$scope。

利用$scope暴露模型数据利用向控制器传递$scope对象的机制，可以把模型数据暴露给视图。
在你的应用中可能还有其他数据，但是只有通过$scope触及这些数据，Angular才把它当成数据模型的一部分。对于显示的创建$scope属性（例如：$scope.count = 5），还可以通过模板自身创建数据模型。通过表达式。 <button ng-click=‘count=5’>Set count to three</button> 在表单输入项上使用ng-model（建立双向绑定关系）。

使用$watch 监控数据模型的变化当数据模型中某一部分发生变化时，$watch函数可以发出通知。
函数签名： $watch(watchFn, watchAction, deepWatch) watchFn：一个带有Angular表达式或者函数的字符串 watchAction：一个函数或者表达式，当watchFn发生变化时会被调用。如果是函数，其函数签名为 function(newValue, oldValue, scope) deepWatch：如果设置为true，将会命令Angular去检查被监控对象的每个属性是否发生了变化。 $watch函数会返回一个函数，当不在需要接收变更通知时，可以用这个返回的函数注销监控。 var dereg = $scope.$watch(‘someModel.someProperty’，callbackOnChange()); dereg();

// $scope.totalCart总共被执行了几次？
<div ng-repeat='item in items'> <span>{{item.title}}</span> <input ng-model='item.quantity'> <span>{{item.price | currency}}</span> <span>{{item.price * item.quantity | currency}}</span> </div> <div>Total:{{totalCart() | currency}}</div> <div>Discount:{{bill.discount | currency}}</div> <div>Subtotal:{{subtotal() | currency}}</div> function CartController ($scope) { $scope.bill = {}; $scope.items = [ {title: 'Paint pots', quantity: 8, price: 3.95}, {title: 'Polka dots', quantity: 17, price: 12.95}, {title: 'Pebbles', quantity: 5, price: 6.95} ]; $scope.totalCart = function() { var total = 0; for (var i = 0, len = $scope.items.length; i < len; i++) { total = total + $scope.items[i].price * $scope.items[i].quantity; } return total; }; $scope.subtotal = function() { return $scope.totalCart() - $scope.bill.discount; function calculateDiscount (newValue, oldValue, scope){ $scope.bill.discount = newValue > 100 ? 10 : 0; $scope.$watch($scope.totalCart, calculateDiscount); // $scope.totalCart总共被执行了几次？ wacth.01.html

$watch中的性能注意事项上面的例子存在潜在的性能问题为什么是6次呢？该函数被调用了6次
虽然在这个例子中性能问题并不明显，但在更复杂的应用中，运行6次就会成为一个问题为什么是6次呢？

一回目二回目三回目 wacth.01.html <div ng-repeat='item in items'>
<span>{{item.title}}</span> <input ng-model='item.quantity'> <span>{{item.price | currency}}</span> <span>{{item.price * item.quantity | currency}}</span> </div> <div>Total:{{totalCart() | currency}}</div> <div>Discount:{{bill.discount | currency}}</div> <div>Subtotal:{{subtotal() | currency}}</div> function CartController ($scope) { $scope.bill = {}; $scope.items = [ {title: 'Paint pots', quantity: 8, price: 3.95}, {title: 'Polka dots', quantity: 17, price: 12.95}, {title: 'Pebbles', quantity: 5, price: 6.95} ]; $scope.totalCart = function() { var total = 0; for (var i = 0, len = $scope.items.length; i < len; i++) { total = total + $scope.items[i].price * $scope.items[i].quantity; } return total; }; $scope.subtotal = function() { return $scope.totalCart() - $scope.bill.discount; function calculateDiscount (newValue, oldValue, scope){ $scope.bill.discount = newValue > 100 ? 10 : 0; $scope.$watch($scope.totalCart, calculateDiscount); 一回目二回目三回目 wacth.01.html

$watch中的性能注意事项为什么是6次呢？ Angular这样做的目的 Angluar的做法如何解决这个问题？其中有3次很容易跟踪到
{{totalCart() | currency}} {{subtotal() | currency}} $scope.$watch($scope.totalCart, calculateDiscount); 然后Angular把以上整个过程又重复了一遍，最终就是6次了。 Angular这样做的目的检测模型中的变更已经被完整的进行了传播，并且模型已经被设置好。 Angluar的做法把所有被监控的属性都拷贝一份，然后把他们和当前的值进行比较，看看是否发生了变化。实际上，Angular可能会把以上程序运行10次，从而确保进行了完整的传播。如果经过10次重复之后被监控的属性还在发生变化，Angular将会报错并退出。如何解决这个问题？

$watch 1.监控items数组的变化监控items数组的变化，然后重新计算$scope属性中的总价、折扣和小计值。缺点
<div>Total:{{bill.totalCart | currency}}</div> <div>Discount:{{bill.discount | currency}}</div> <div>Subtotal:{{bill.subtotal | currency}}</div> var calculateTotals = function() { var total = 0; for (var i = 0, len = $scope.items.length; i < len; i++) { total = total + $scope.items[i].price * $scope.items[i].quantity; } $scope.bill.totalCart = total; $scope.bill.discount = total > 100 ? 10 : 0; $scope.bill.subtotal = total - $scope.bill.discount; }; $scope.$watch('items', calculateTotals, true); 缺点既然在监控items数组，Angular就会制作一份数组的拷贝，用来进行比较操作。对于大型的items数组来说，如果每次在Angular显示页面时只需要重新计算bill属性，那么性能会好很多。 wacth.02.html

$watch 2.只重新计算bill属性这种写法为什么只计算bill属性？ wacth.03.html
<div>Total:{{bill.totalCart | currency}}</div> <div>Discount:{{bill.discount | currency}}</div> <div>Subtotal:{{bill.subtotal | currency}}</div> function CartController ($scope) { $scope.bill = {}; $scope.items = [ {title: 'Paint pots', quantity: 8, price: 3.95}, {title: 'Polka dots', quantity: 17, price: 12.95}, {title: 'Pebbles', quantity: 5, price: 6.95} ]; $scope.$watch(function() { var total = 0; for (var i = 0, len = $scope.items.length; i < len; i++) { total = total + $scope.items[i].price * $scope.items[i].quantity; } $scope.bill.totalCart = total; $scope.bill.discount = total > 100 ? 10 : 0; $scope.bill.subtotal = total - $scope.bill.discount; }); } 这种写法为什么只计算bill属性？ wacth.03.html

$watch 监控多个东西监控把这些属性连接起来之后的值把他们放到一个数组或者对象中，然后给deepWatch参数传递给一个true值
$scope.$watch(‘things.a + things.b’, callMe(...)); a、b可以属于不同的对象，只要需要，这个列表可以无限长。如果非常长，你就需要写一个函数来返回连接之后的值，而不是依赖一个表达式来完成这一逻辑。把他们放到一个数组或者对象中，然后给deepWatch参数传递给一个true值 $scope.$watch(‘things’, callMe(...), true); Angular遍历things属性，然后当其中任何一个属性发生变化时就调用callMe().

使用Module（模块）组织依赖关系业务代码放在哪里？
前面的例子中都是放在控制器的函数中。这种做法对于小型的应用和例子来说可以工作的很好；但在真实项目中，这种做法很快就会使代码变的无法维护。控制器将会变成一个垃圾场，我们要做的所有东西都会倒在这里。模块提供了一种方法，可以用来组织应用中一块功能区域的依赖关系；同时还提供了一种机制，可以自动解析依赖关系（又叫做依赖注入）。

【例】获取商品列表 -- 没有模块代码复用性差功能边界划分困难单元测试困难
function ItemsViewController($scope) { // 向服务器发起请求 ...... // 解析响应并放入Items对象 var items = [ {Title: 'Paint pots', Description: 'Pots full of paint', Price: 3.95}, {Title: 'Polka dots', Description: 'Dots with polka', Price: 2.95}, {Title: 'Pebbles', Description: 'Just little rocks', Price: 6.95} ]; // 把Items数组设置到$scope上，这样视图才能够现实它 $scope.items = items; }); 代码复用性差功能边界划分困难单元测试困难

【例】获取商品列表 -- 利用模块控制器代码变得很简单。
var shoppingModule = angular.module('ShoppingModule', []); // 组织依赖关系 shoppingModule.factory('ItemsService', function() { var itemsService = {}; itemsService.query = function () { return [ {Title: 'Paint pots', Description: 'Pots full of paint', Price: 3.95}, {Title: 'Polka dots', Description: 'Dots with polka', Price: 2.95}, {Title: 'Pebbles', Description: 'Just little rocks', Price: 6.95} ]; }; return itemsService; }); // 自动解析依赖关系（依赖注入） function CartController ($scope, ItemsService) { $scope.items = ItemsService.query(); } 控制器代码变得很简单。

创建服务 provider(name, Objcet or constructor())
一个可配置的服务，创建的逻辑比较复杂。如果传递一个Objcet作为参数，那么这个Object必须带有一个名为$get的函数，这个函数需要返回服务的名字；否则，Angular会认为传递的是一个构造函数，调用构造函数会返回服务实例对象。 factory(name, $getFunction()) 一个不可配置的服务，创建逻辑比较复杂。需要指定一个函数，当调用这个函数的时候，会返回服务的实例。可以把它看成provider(name, {$get: $getFunction()}) service(name, constructor()) 一个不可配置的服务，创建逻辑比较简单。与上面provider函数的constructor参数类似，Angular调用它可以创建服务实例。

模块依赖使用Module接口来定义模块之间的依赖关系。
如果打算使用第三方包中所提供的服务或者指令，它们一般会带有自己的模块。由于你的应用会依赖这些模块，所以需要在应用模块中定义依赖关系才能引用它们。例：引用（假象）模块SnazzyUIWidgets和SuperDataSync var appMod = angular.module(‘app’, [‘SnazzyUIWidgets’, ‘SuperDataSync’]);

使用过滤器格式化数据可以用过滤器来声明应该如何变换数据格式，然后再显示给用户过滤器的语法
{{ expression | filterName : parameter1 : ...parameterN }} 例： {{ 12.9 | currency }} ⇒ $12.90 Angular内置的其他过滤器还有date、number、uppercase等在绑定过程中，可以用管道符号把过滤器连接起来例： {{ 12.9 | number:0 | currency }} ⇒ $13.00

自定义过滤器 // 首字母大写过滤器 <p>{{pageHeading | titleCase}}</p>
var homeModule = angular.module('HomeModule', []); homeModule.filter('titleCase', function(){ var titleCaseFilter = function(input) { var words = input.split(' '); for (var i = 0; i < words.length; i++) { words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1); }; return words.join(' '); return titleCaseFilter; }); function HomeController ($scope) { $scope.pageHeading = 'behold the majesty of your page title'; }

使用路由和$location 切换视图虽然从技术上来说AJAX应用确实是单页面应用，但是很多时候，出于各种原因，我们需要为用户展示或者隐藏一些子页面视图。我们可以利用Angular的$route服务来管理这种场景。利用路由服务来定义这样一种东西：对于浏览器所指向的URL，Angular将会加载并显示一个模板，并实例化一个控制器来为模板提供内容。可以通过调用$routeProvider服务上的函数来创建路由，把需要创建的路由当成一个配置块传给这些参数即可。

var aMailServices = angular
var aMailServices = angular.module('AMail', []); function RouteConfig ($routeProvider) { $routeProvider.when('/', { controller: ListController, templateUrl: 'list.html' }).when('/view/:id', { controller: DetailController, templateUrl: 'detail.html' }).otherwise({ redirectTo: '/' }); } aMailServices.config( RouteConfig); messages = [ ... ]; function ListController ($scope) { $scope.messages = messages; } function DetailController ($scope, $routeParams) { $scope.message = messages[$routeParams.id]; } 在URL、模板和控制器之间建立映射关系 '/'：ListController：'list.html' 在id前面加了一个冒号，从而制定了一个参数化的URL组件配置路由，以便Amail服务能够找到它通过$routeParams.id取得传递的参数

与服务器交互真正的应用需要和真实的服务器进行交互 Angular提供了一个叫做$http的服务。
提供了一个可扩展的方法列表，使得与服务器的交互更加容易支持HTTP,JSON和CORS方式包含了安全性支持，避免JSON格式的脆弱性和XSRF(跨站请求伪造) [ { "title": 'Paint pots', "quantity": 8, "price": 3.95. }, "title": 'Polka dots', "quantity": 17, "price": "title": 'Pebbles', "quantity": 5, "price": 6.95. } ] function ShoppingController ($scope, $http) { $http.get('/products').success(function(data, status, headers, config) { $scope.items = data; }); }

function ShoppingController ($scope, $http) {
$http.get('/products').success(function(data, status, headers, config) { $scope.items = data; }); } JSON返回值例： [ { "title": 'Paint pots', "quantity": 8, "price": 3.95. }, "title": 'Polka dots', "quantity": 17, "price": "title": 'Pebbles', "quantity": 5, "price": 6.95. } ]

使用指令修改DOM 指令扩展了HTML语法，同时它也是使用自定义的元素和属性把行为和DOM转换关联到一起的方式
当内置指令无法满足需求时，可以自定义指令与服务一样，可以通过模块对象的API来定义指令，只要调用模块实例的directive()函数即可，其中directiveFunction是一个工厂函数，用来定义指令的特性 var appModule = angular.module(‘appModule’, [...]); appModule.directive(‘directiveName’, directiveFunction);

【例】autofocus <button ngbk-focus>I'm very focused!</button>
var appModule = angular.module('app', []); appModule.directive('ngbkFocus', function(){ return { link: function (scope, element, attrs, controller) { element[0].focus(); } }; });

校验用户输入 Angular允许为表单中的输入元素定义一个合法的状态，并且只有当所有元素都是合法状态时才允许提交表单。
required type=' ' type='number' 可以通过$valid属性获取表单的校验状态 <form name='addUserForm'> <div>First name: <input ng-model='user.first' required></div> <div>Last name: <input ng-model='user.last' required></div> <div> <input type=' ' ng-model='user. ' required></div> <div>Age: <input type='number' ng-model='user.age' ng-maxlength='3' ng-minlength='1'></div> <div><button>Submit</button></div> </form>

AngularJS -- AngularJS应用骨架 liujj@golden-tech liujj@golden-tech.

Similar presentations

Presentation on theme: "AngularJS -- AngularJS应用骨架 liujj@golden-tech liujj@golden-tech."— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

AngularJS -- AngularJS应用骨架 liujj@golden-tech liujj@golden-tech.

Similar presentations

Presentation on theme: "AngularJS -- AngularJS应用骨架 liujj@golden-tech liujj@golden-tech."— Presentation transcript:

Similar presentations

About project

反馈