AngularJS.ppt

1、AngularJS,- 简介,liujjgolden-tech,一些概念,客户端模板 Model View Controller（MVC） 数据绑定 依赖注入 指令,liujjgolden-tech,客户端模板,多页面Web应用,AngularJS,+,服务器端装配数据,客户端装配数据,liujjgolden-tech,与目前广泛使用的一些方法相比，有哪些有趣的地方？,liujjgolden-tech,Model View Controller,MVC背后的核心理念 你应该把管理数据的代码（model）、应用逻辑代码（controller）、以及向用户展示数据的代码（view）清晰的分离开 在

2、Angular应用中 视图就是Document Object Model（DOM，文档对象模型） 控制器就是JavaScript类 模型数据则被存储在对象的属性中 MVC非常灵活 对于什么东西应该放在哪里，MVC给了一个思想上的模型，所以不需要每次都来构建这个模型。 使用MVC模型会让应用更加易于扩展、维护和测试,liujjgolden-tech,视图就是Document Object Model（DOM，文档对象模型） 控制器就是JavaScript类 模型数据则被存储在对象的属性中,liujjgolden-tech,数据绑定,声明UI中的某个部分需要映射到某个JavaScript属性，然后

3、让它们自己去同步，这种编程风格叫做数据绑定,liujjgolden-tech,liujjgolden-tech,依赖注入,对于HelloController还有很多东西不需要我们去编写。 例如，进行数据绑定的$scope对象会被自动传递给我们；我们不需要调用任何函数去创建它 $scope并不是我们唯一可以获取的东西（$location对象，自定义对象等）。 这种效果是通过Angular的依赖注入机制实现的。 依赖注入让我们遵守这样一种开发风格：我们的类只是简单的获取它们所需要的东西，而不需要创建那些我们所依赖的东西。 这种风格遵循了一种叫做迪米特法则的设计模式，也叫做最小知识原则。,liujj

4、golden-tech,指令,Angular最强大的功能之一就是，你可以把模板编写成HTML的形式。之所以可以做到这一点，是因为我们引入了一款强大的DOM转换引擎，可以用它来扩展HTML的语法 编写成HTML格式有什么好处？ 我们已经在之前的例子中看到了一些HTML扩展指令 引入双花括号来实现数据绑定 引入ng-controller来指定每个控制器负责监视视图的哪一部分 引入ng-model用来把输入数据绑定到模型中的一部分属性上 Angular内置了很多指令，并且可以编写自己的指令来扩展HTML模板的功能,liujjgolden-tech,实例：购物车,功能： 1.输入商品数量自动计算价格

5、2.点击删除按钮删除该商品,liujjgolden-tech,Your Shopping CartYour Orderitem.titleitem.price | currencyitem.price * item.quantity | currencyRemovefunction CartController ($scope) $scope.items = title: Paint pots, quantity: 8, price: 3.95,title: Polka dots, quantity: 17, price: 12.95,title: Pebbles, quantity: 5,

6、price: 6.95;$scope.remove = function(index) $scope.items.splice(index, 1);,liujjgolden-tech,Your Shopping CartYour Orderitem.titleitem.price | currencyitem.price * item.quantity | currencyRemovefunction CartController ($scope) $scope.items = title: Paint pots, quantity: 8, price: 3.95,title: Polka d

7、ots, quantity: 17, price: 12.95,title: Pebbles, quantity: 5, price: 6.95;$scope.remove = function(index) $scope.items.splice(index, 1);,ng-app属性用来告诉Angular，页面中的哪一部分需要接受它的管理。 放在标签上，就是告诉Angular，我们希望它管理整个页面。,liujjgolden-tech,Your Shopping CartYour Orderitem.titleitem.price | currencyitem.price * item.q

8、uantity | currencyRemovefunction CartController ($scope) $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.remove = function(index) $scope.items.splice(index, 1);,在Angular中，使用一种叫做控制器的JavaScript类来管理

9、页面中的区域。 在body标签中引入一个控制器，就是这个声明CartController将会管理介于和之间的所有内容。,liujjgolden-tech,Your Shopping CartYour Orderitem.titleitem.price | currencyitem.price * item.quantity | currencyRemovefunction CartController ($scope) $scope.items = title: Paint pots, quantity: 8, price: 3.95,title: Polka dots, quantity:

10、17, price: 12.95,title: Pebbles, quantity: 5, price: 6.95;$scope.remove = function(index) $scope.items.splice(index, 1);,ng-repeat的意思是，对于items数组中的每一个元素，都把中的DOM结构复制一份（包括div本身）。 对于div的每一份拷贝，都会把一个叫做item的属性设置给它，这样就可以在模板中使用这份拷贝的元素了。,liujjgolden-tech,Your Shopping CartYour Orderitem.titleitem.price | curr

11、encyitem.price * item.quantity | currencyRemovefunction CartController ($scope) $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.remove = function(index) $scope.items.splice(index, 1);,数据绑定,liujjg

12、olden-tech,Your Shopping CartYour Orderitem.titleitem.price | currencyitem.price * item.quantity | currencyRemovefunction CartController ($scope) $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.r

13、emove = function(index) $scope.items.splice(index, 1);,双向数据绑定,liujjgolden-tech,Your Shopping CartYour Orderitem.titleitem.price | currencyitem.price * item.quantity | currencyRemovefunction CartController ($scope) $scope.items = title: Paint pots, quantity: 8, price: 3.95,title: Polka dots, quantity

14、: 17, price: 12.95,title: Pebbles, quantity: 5, price: 6.95;$scope.remove = function(index) $scope.items.splice(index, 1);,过滤器（filter）：用来转换文本的格式 currency(货币)过滤器：实现美元格式化,liujjgolden-tech,Your Shopping CartYour Orderitem.titleitem.price | currencyitem.price * item.quantity | currencyRemovefunction Car

15、tController ($scope) $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.remove = function(index) $scope.items.splice(index, 1);,单击按钮调用remove()函数，同时把$index传递过去（$index包含了ng-repeat过程中的循环计数）,liujjgolden

16、-tech,Your Shopping CartYour Orderitem.titleitem.price | currencyitem.price * item.quantity | currencyRemovefunction CartController ($scope) $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.remove

17、 = function(index) $scope.items.splice(index, 1);,CartController负责管理购物车的业务逻辑。 在参数的行参中放一个$scope可以告诉Angular：控制器需要一个叫$scope的东西。 我们可以通过$scope把数据绑定到UI元素上。,liujjgolden-tech,Your Shopping CartYour Orderitem.titleitem.price | currencyitem.price * item.quantity | currencyRemovefunction CartController ($scope

18、) $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.remove = function(index) $scope.items.splice(index, 1);,通过定义$scope.items，创建一个虚拟的hash型数据，用来表示购物车中的项目集合。 想让这些项目能够对UI的数据绑定有效，所以把它们设置到$scope上。,liujjg

19、olden-tech,Your Shopping CartYour Orderitem.titleitem.price | currencyitem.price * item.quantity | currencyRemovefunction CartController ($scope) $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.remove = function(index) $scope.items.splice(index, 1);,Remove()函数可以只从数组中删除元素。由于ng-repeat所创建的列表都是绑定在数据上的额，所以当数组中的项目消失时，这个列表将会自动收缩。,liujjgolden-tech,