angularjs学习总结详细教程

最新推荐文章于 2022-04-27 19:46:52 发布

vampire2777

最新推荐文章于 2022-04-27 19:46:52 发布

阅读量307

点赞数

分类专栏：前端框架文章标签： angularjs 技术框架

本文链接：https://blog.csdn.net/vampire2777/article/details/55104466

版权

前端框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1 前言

前端技术的发展是如此之快，各种优秀技术、优秀框架的出现简直让人目不暇接，紧跟时代潮流，学习掌握新知识自然是不敢怠慢。
AngularJS是google在维护，其在国外已经十分火热，可是国内的使用情况却有不小的差距，参考文献/网络文章也很匮乏。这里便将我学习AngularJS写成文档，一方面作为自己学习路程上的记录，另一方面也给有兴趣的同学一些参考。
首先我自己也是一名学习者，会以学习者的角度来整理我的行文思路，这里可能只是些探索，有理解或是技术上的错误还请大家指出；其次我特别喜欢编写小例子来把一件事情说明白，故在文中会尽可能多的用示例加代码讲解，我相信这会是一种比较好的方式；最后，我深知AngularJS的使用方式跟jQuery的使用方式有很大不同，在大家都有jquery、ext经验的条件下对于angular的学习会困难重重，不过我更相信在大家的坚持下，能够快速的学好AngularJS，至少咱也能深入了解到AngularJS的基本思想，对咱们以后自己的插件开发、项目开发都会有很大的启示。

2 AngularJS概述

2.1 AngularJS是什么？

AngularJs（后面就简称ng了）是一个用于设计动态web应用的结构框架。首先，它是一个框架，不是类库，是像EXT一样提供一整套方案用于设计web应用。它不仅仅是一个JavaScript框架，因为它的核心其实是对HTML标签的增强。
何为HTML标签增强？其实就是使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等，这些HTML原生没有的标签/属性在ng中有一个名字：指令（directive）。后面会详细介绍。那么，什么又是动态web应用呢？与传统web系统相区别，web应用能为用户提供丰富的操作，能够随用户操作不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用，即数据操作比较多的应用，而非是游戏或图像处理类应用。
为了实现这些，ng引入了一些非常棒的特性，包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定，能够让我们摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上。
　另外一个疑问，ng是MVC框架吗？还是MVVM框架？官网有提到ng的设计采用了MVC的基本思想，而又不完全是MVC，因为在书写代码时我们确实是在用ng-controller这个指令(起码从名字上看，是MVC吧)，但这个controller处理的业务基本上都是与view进行交互，这么看来又很接近MVVM。让我们把目光移到官网那个非醒目的title上：“AngularJS — Superheroic JavaScript MVW Framework”。

2.2 AngularJS简单介绍

AngularJS 重新定义了前端应用的开发方式。面对HTML和JavaScript之间的界线，它
非但不畏缩不前，反而正面出击，提出了有效的解决方案。
很多前端应用的开发框架，比如Backbone、EmberJS等，都要求开发者继承此框架特有的一些JavaScript对象。这种方式有其长处，但它不必要地污染了开发者自己代码的对象空间，还要求开发者去了解内存里那些抽象对象。尽管如此我们还是接受了这种方式，因为网络最初的设计无法提供我们今天所需的交互性，于是我们需要框架，来帮我们填补JavaScript和HTML之间的鸿沟。而且有了它，你不用再“直接”操控DOM，只要给你的DOM注上metadata（即AngularJS里的directive们），然后让AngularJS来帮你操纵DOM。同时，AngularJS不依赖（也不妨碍）任何其他的框架。你甚至可以基于其它的框架来开发AngularJS应用。
API地址：http://docs.angularjs.org/api/；
AngularJS在github上的中文粗译版地址：https://github.com/basestyle/angularjs-cn。

2.3 什么时候该用AngularJS

AngularJS是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展HTML的功能，提供动态数据绑定（data binding），而且它能跟其它框架（如jQuery）合作融洽。
如果你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要极高运行速度的应用，就不是AngularJS的用武之地了。

3 AugularJS特性

AngularJS是一个新出现的强大客户端技术，提供给大家的一种开发强大应用的方式。这种方式利用并且扩展HTML，CSS和javascript，并且弥补了它们的一些非常明显的不足。本应该使用HTML来实现而现在由它开发的动态一些内容。
AngularJS有五个最重要的功能和特性：
3.1 特性一：双向的数据绑定

数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定是的代码更少，你可以专注于你的应用。
我们想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的，毫不影响的应用到web应用中。
传统来说，当model变化了。开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面，model变化驱动了DOM中元素变化，另一方面，DOM元素的变化也会影响到Model。这个在用户互动中更加复杂，因为开发人员需要处理和解析
这些互动，然后融合到一个model中，并且更新View。这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。
这里肯定有更好的解决方案！那就是AngularJS的双向数据绑定，能够同步DOM和Model等等。
这里有一个非常简单的例子，用来演示一个input输入框和元素的双向绑定(例01)：

说明：实际效果请大家看AngularJS/demo/index.html

3.2 特性二：模板
在AngularJS中，一个模板就是一个HTML文件。但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。
HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。所有的指令都负责针对view来设置数据绑定。
我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化，不是字符串的连接或者innerHTML变化。使用DOM作为输入，而不是字符串，是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。
最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签，然后开发者拿过来添加上功能，通过数据绑定将会使得这个过程非常简单。
这里有一个例子，我们使用ng-repeat指令来循环图片数组并且加入img模板，如下：

function AlbumCtrl($scope) {
    scope.images = [
        {"image":"img/image_01.png", "description":"Image 01 description"},
        {"image":"img/image_02.png", "description":"Image 02 description"},
        {"image":"img/image_03.png", "description":"Image 03 description"},
        {"image":"img/image_04.png", "description":"Image 04 description"},
        {"image":"img/image_05.png", "description":"Image 05 description"}
    ];
}

<div ng-controller="AlbumCtrl">
  <ul>
    <li ng-repeat="image in images">
      <img ng-src="http://m.cnblogs.com/142260/{{image.thumbnail}}" rel="nofollow"/>
    </li>
  </ul>
</div>

这里还有一件事值得提一句，AngularJS并不强制你学习一个新的语法或者从你的应用中提出你的模板。
3.3 特性三：MVC
针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。AngularJS并不执行传统意义上的MVC，更接近于MVVM（Moodel-View-ViewModel)。
Model
model是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes，使用proxy对象封装或者使用特别的setter/getter方法来访问。事实上我们处理vanilla javascript的方法就是一个非常好的特性，这种方法使得我们更少使用应用的原型。
ViewModel
viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。
viewmodel是 $scope的对象，只存在于AnguarJS的应用中。$ scope只是一个简单的js对象，这个对象使用简单的API来侦测和广播状态变化。
Controller
controller负责设置初始状态和参数化 $scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。 View view是AngularJS解析后渲染和绑定后生成的HTML 。这个部分帮助你创建web应用的架构。$ scope拥有一个针对数据的参考，controller定义行为，view处理布局和互动。

3.4 特性四：服务和依赖注入
AngularJS服务其作用就是对外提供某个特定的功能。
AngularJS拥有内建的依赖注入（DI）子系统，可以帮助开发人员更容易的开发，理解和测试应用。
DI允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI负责找创建并且提供给我们。
为了而得到核心的AngularJS服务，只需要添加一个简单服务作为参数，AngularJS会侦测并且提供给你：

function EditCtrl($scope, $location, $routeParams) {
     // Something clever here...
}

你也可以定义自己的服务并且让它们注入：
**angular.module(‘MyServiceModule’, []).
factory(‘notify’, [‘ $window’, function (win) { return function (msg) { win.alert(msg); }; }]); function myController(scope, notifyService) { scope.callNotify = function (msg) { notifyService(msg); }; } myController.$ inject = ['$scope’, ‘notify’];**

3.5 特性五：指令（Directives）
指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情？那么AngularJS可以做到。
指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。
这里是一个例子，它监听一个事件并且针对的更新它的$scope ，如下：

myModule.directive('myComponent', function(mySharedService) {
    return {
        restrict: 'E',
        controller: function($scope, $attrs, mySharedService) {
            $scope.$on('handleBroadcast', function() {
                $scope.message = 'Directive: ' + mySharedService.message;
            });
        },
        replace: true,
        template: '<input>'
    };
});

然后，你可以使用这个自定义的directive来使用：

<my-component ng-model="message"></my-component>

使用一系列的组件来创建你自己的应用将会让你更方便的添加，删除和更新功能。

4 功能介绍

4.1数据绑定
AngularJS的双向数据绑定，意味着你可以在Mode(JS)中改变数据，而这些变动立刻就会自动出现在View上，反之亦然。即：一方面可以做到model变化驱动了DOM中元素变化，另一方面也可以做到DOM元素的变化也会影响到Model。
在我们使用jQuery的时候，代码中会大量充斥类似这样的语句：var val = $(‘#id’).val();$ (‘#id’).html(str);等等，即频繁的DOM操作（读取和写入），其实我们的最终目的并不是要操作DOM，而是要实现业务逻辑。ng的绑定将让你摆脱DOM操作，只要模板与数据通过声明进行了绑定，两者将随时保持同步，最新的数据会实时显示在页面中，页面中用户修改的数据也会实时被记录在数据模型中。
从View到Controller再到View的数据交互（例01）：

<html ng-app="demoApp">

<input type="text" ng-model="user.name" placeholder="请输入名称"/>
Hello, {{ user.name }}！

关键： ng-app 、 ng-model 和 { {user.name } }
首先：元素的ng-app属性。标识这个DOM里面的内容将启用AngularJS应用。
其次：告诉AngularJS，对页面上的“user.name” 这个Model进行双向数据绑定。
第三：告诉AngularJS，在“{{ user.name}}”这个指令模版上显示“user.name”这个Model的数据。
从Server到Controller再到View的数据交互（例02）：

……

获取名字 ……

demoApp.controller("demoController", function($http, $scope){
$scope. getAjaxUser = function(){
// $http.get({url:"../xxx.action"}).success(function(data){
// $scope.user= data;
// });
$scope.user = {"name":"从JOSN中获取的名称","age":22};
};
});

改变

scope中的user，View也会自动更新。4.2scopes、module、controller4.2.1scopes $scope中的user，View也会自动更新。 4.2 scopes、module、controller 4.2.1 scopes$ scope是一个把view（一个DOM元素）连结到controller上的对象。在我们的MVC结构里，这个

scope将成为model，它提供一个绑定到DOM元素（以及其子元素）上的excecutioncontext。尽管听起来有点复杂，但 $scope 将成为model，它提供一个绑定到DOM元素（以及其子元素）上的excecution context。尽管听起来有点复杂，但$ scope 实际上就是一个JavaScript对象，controller和view都可以访问它，所以我们可以利用它在两者间传递信息。在这个

scope对象里，我们既存储数据，又存储将要运行在view上的函数。每一个Angular应用都会有一个 $scope 对象里，我们既存储数据，又存储将要运行在view上的函数。每一个Angular应用都会有一个$ rootScope。这个

rootScope是最顶级的scope，它对应着含有ng−app指令属性的那个DOM元素。app.run(function( $rootScope 是最顶级的scope，它对应着含有 ng-app 指令属性的那个DOM元素。 app.run(function($ rootScope) {

rootScope.name = “张三”; });
如果页面上没有明确设定 $rootScope.name = “张三”; }); 如果页面上没有明确设定$ scope ，Angular 就会把数据和函数都绑定到这里，第一部分中的例子就是靠这一点成功运行的。这样，我们就可以在view的任何地方访问这个name属性，使用模版表达式{{}}，像这样： {{ name }} 4.2.2 module 首先需要明确一下模板的概念。在我还不知道有模板这个东西的时候，曾经用js拼接出很长的HTML字符串，然后append到页面中，这种方式想想真是又土又笨。后来又看到可以把HTML代码包裹在一个标签中当作模板，然后按需要取来使用。在ng中，模板十分简单，它就是我们页面上的HTML代码，不需要附加任何额外的东西。在模板中可以使用各种指令来增强它的功能，这些指令可以让你把模板和数据巧妙的绑定起来。在标签上多了一个属性ng-app=”MyApp”，它的作用就是用来指定ng的作用域是在标签以内部分。在js中，我们调用angular对象的module方法来声明一个模块，模块的名字和ng-app的值对应。这样声明一下就可以让ng运行起来了。示例： var demoApp = angular.module('demoApp', []); 4.2.3 ng-controller 要明确创建一个$scope 对象，我们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性：

ng-controller指令给所在的DOM元素创建了一个新的

scope对象，并将这个 $scope 对象，并将这个$ scope 对象包含进外层DOM元素的

scope对象里。在上面的例子里，这个外层DOM元素的 $scope 对象里。在上面的例子里，这个外层DOM元素的$ scope 对象，就是

rootScope对象。这个scope链是这样的：所有scope都遵循原型继承（prototypalinheritance），这意味着它们都能访问父scope们。对任何属性和方法，如果AngularJS在当前scope上找不到，就会到父scope上去找，如果在父scope上也没找到，就会继续向上回溯，一直到 $rootScope 对象。这个scope链是这样的：所有scope都遵循原型继承（prototypal inheritance），这意味着它们都能访问父scope们。对任何属性和方法，如果AngularJS在当前scope上找不到，就会到父 scope上去找，如果在父scope上也没找到，就会继续向上回溯，一直到$ rootScope 上。即如果controller是多层嵌套的，就会从最里面一直往外找，这个scope链是这样的：唯一的例外：有些指令属性可以选择性地创建一个独立的scope，让这个scope不继承它的父scope们，这个会在指令详解中说明。 4.3 ajax

http服务是AngularJS的核心服务之一，它帮助我们通过XMLHttpRequest对象或JSONP与远程HTTP服务进行交流。 $http 服务是AngularJS的核心服务之一，它帮助我们通过XMLHttpRequest对象或JSONP与远程HTTP服务进行交流。$ http 服务是这样一个函数：它接受一个设置对象，其中指定了如何创建HTTP请求；它将返回一个承诺（*参考JavaScript异步编程的promise模式），其中提供两个方法： success方法和error方法。 demoApp.controller("demoController", function(

http, $http,$ scope){

scope. getAjaxUser = function(){
$http.get({url:"../xxx.action"}).success(function(data){
alert(data);
}).error(function(){
Alert(“出错了！”);
});

};
});
AngularJS的AJAX与jquery等框架的AJAX基本一致，这里就不多说了。
4.4表达式
ng中的表达式与javascript表达式类似但是不可以划等号，它是ng自己定义的一套模式。表达式可以作为指令的值，如ng-modle=”people.name”、ng-click=”showMe()”，看起来是如此像字符串，故而也叫字符串表达式。也可以在标记中使用表达式，如{{1+2}}，或者与过滤器一起使用{{1+2 | currency}}。在框架内部，字符串不会简单的使用eval()来执行，而是有一个专门的 $scope. getAjaxUser = function(){ $http.get({url:"../xxx.action"}).success(function(data){ alert(data); }).error(function(){ Alert(“出错了！”); }); }; }); AngularJS的AJAX与jquery等框架的AJAX基本一致，这里就不多说了。 4.4表达式 ng中的表达式与javascript表达式类似但是不可以划等号，它是ng自己定义的一套模式。表达式可以作为指令的值，如ng-modle=”people.name”、ng-click=”showMe()”，看起来是如此像字符串，故而也叫字符串表达式。也可以在标记中使用表达式，如{{1+2}}，或者与过滤器一起使用{{1+2 | currency}}。在框架内部，字符串不会简单的使用eval()来执行，而是有一个专门的$ parse服务来处理。在ng表达式中不可以使用循环语句、判断语句，事实上在模板中使用复杂的表达式也是一个不推荐的做法，这样视图与逻辑就混杂在一起了我们在使用其他模板库时，一般都会有模板的循环输出、分支输出、逻辑判断等类似的控制。要想理解指令属性的运作，我们必须先理解表达式。在之前的例子里我们已经见过表达式，例如 {{ user.name }}。请查看例03、例04、例05。 {{ 8 + 1 }} 9 {{ person }} {"name":"Ari Lerner"} {{ 10 * 3.3 | currency }}

33.00表达式粗略来看有点像eval(javascript)的结果。它们会经过Angular.js的处理，从而拥有以下重要而独特的性质：l所有表达式都在scope这个context里被执行，因此可以使用所有本地 $33.00 表达式粗略来看有点像 eval(javascript) 的结果。它们会经过Angular.js的处理，从而拥有以下重要而独特的性质： l 所有表达式都在scope这个context里被执行，因此可以使用所有本地$ scope 中的变量。 l 如果一个表达式的执行导致类型错误或引用错误，这些错误将不会被抛出。 l 表达式里不允许任何控制函数流程的功能（如if/else等条件语句） l 表达式可接受一个或多个串联起来的过滤器。 4.5过滤器过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。过滤器通常是伴随标记来使用的，将你model中的数据格式化为需要的格式。表单的控制功能主要涉及到数据验证以及表单控件的增强。ng内置了一些过滤器，它们是： currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。 4.5.1过滤器使用方式总共九种。除此之外还可以自定义过滤器，这个就强大了，可以满足任何要求的数据处理。Filter还是很简单的，需要明白的是内置的filter如何使用，以及自己如何定义一个filter。 filter的两种使用方法：　　1. 在模板中使用filter 　　我们可以直接在{{}}中使用filter，跟在表达式后面用 | 分割，语法如下： {{ expression | filter }} 也可以多个filter连用，上一个filter的输出将作为下一个filter的输入： {{ expression | filter1 | filter2 | ... }}　　 filter可以接收参数，参数用 : 进行分割，如下： {{ expression | filter:argument1:argument2:... }}　　除了对{{}}中的数据进行格式化，我们还可以在指令中使用filter，例如先对数组array进行过滤处理，然后再循环输出：　　 2. 在controller和service中使用filter 　　我们的js代码中也可以使用过滤器，方式就是我们熟悉的依赖注入，例如我要在controller中使用currency过滤器，只需将它注入到该controller中即可，代码如下： app.controller('testC',function(

scope,currencyFilter)$scope.num=currencyFilter(123534);　　在模板中使用num就可以直接输出 $scope,currencyFilter){ $scope.num = currencyFilter(123534); }　　在模板中使用{{num}}就可以直接输出$ 123,534.00了！在服务中使用filter也是同样的道理。　　如果你要在controller中使用多个filter，并不需要一个一个注入吗，ng提供了一个

filter服务可以来调用所需的filter，你只需注入一个 $filter服务可以来调用所需的filter，你只需注入一个$ filter就够了，使用方法如下： app.controller('testC',function(

scope, $scope,$ filter){

scope.num= $scope.num =$ filter('currency')(123534);　　

scope.date= $scope.date =$ filter('date')(new Date()); }　　可以达到同样的效果。好处是你可以方便使用不同的filter了。 4.5.2 ng的内置过滤器 ng内置了九种过滤器，使用方法都非常简单，看文档即懂。不过为了以后不去翻它的文档，我在这里还是做一个详细的记录。 currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序) 1. currency (货币处理) 　　使用currency可以将数字格式化为货币，默认是美元符号，你可以自己传入所需的符号，例如我传入人民币： {{num | currency : '￥'}}　　 2. date (日期格式化) 　　原生的js对日期的格式化能力有限，ng提供的date过滤器基本可以满足一般的格式化要求。用法如下： {{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}　　参数用来指定所要的格式，y M d h m s E 分别表示年月日时分秒星期，你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。另外参数也可以使用特定的描述性字符串，例如“shortTime”将会把时间格式为12:05 pm这样的。ng提供了八种描述性的字符串，个人觉得这些有点多余，我完全可以根据自己的意愿组合出想要的格式，不愿意去记这么多单词~ 3. filter(匹配子串) 　　这个名叫filter的filter。用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。它接收一个参数，用来定义子串的匹配规则。下面举个例子说明一下参数的用法，我用现在特别火的几个孩子定义了一个数组：

scope.childrenArray=[name:′kimi′,age:3,name:′cindy′,age:4,name:′anglar′,age:4,name:′shitou′,age:6,name:′tiantian′,age:5]; $scope.childrenArray = [ {name:'kimi',age:3}, {name:'cindy',age:4}, {name:'anglar',age:4}, {name:'shitou',age:6}, {name:'tiantian',age:5} ];$ scope.func = function(e){return e.age>4;}{{ childrenArray | filter : 'a' }} //匹配属性值中含有a的 {{ childrenArray | filter : 4 }} //匹配属性值中含有4的 {{ childrenArray | filter : {name : 'i'} }} //参数是对象，匹配name属性中含有i的 {{childrenArray | filter : func }} //参数是函数，指定返回age>4的　　 4. json(格式化json对象) 　　json过滤器可以把一个js对象格式化为json字符串，没有参数。这东西有什么用呢，我一般也不会在页面上输出一个json串啊，官网说它可以用来进行调试，嗯，是个不错的选择。或者，也可以用在js中使用，作用就和我们熟悉的JSON.stringify()一样。用法超级简单： {{ jsonTest | json}} 5. limitTo(限制数组长度或字符串长度) 　　limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度，如果参数是负值，则从数组尾部开始截取。个人觉得这个filter有点鸡肋，首先只能从数组或字符串的开头/尾部进行截取，其次，js原生的函数就可以代替它了，看看怎么用吧： {{ childrenArray | limitTo : 2 }} //将会显示数组中的前两项　　 6. lowercase(小写) 　　把数据转化为全部小写。太简单了，不多解释。同样是很鸡肋的一个filter，没有参数，只能把整个字符串变为小写，不能指定字母。怎么用我都懒得写了。 7. uppercase(大写) 　　同上。 8. number(格式化数字) 　　number过滤器可以为一个数字加上千位分割，像这样，123,456,789。同时接收一个参数，可以指定float类型保留几位小数： {{ num | number : 2 }}　　 9. orderBy(排序) 　　orderBy过滤器可以将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较），还是拿上面的孩子数组举例：

//按age属性值进行排序，若是-age，则倒序

//按照函数的返回值进行排序

//如果age相同，按照name进行排序　　内置的过滤器介绍完了，写的我都快睡着了。。。正如你所看到的，ng内置的过滤器也并不是万能的，事实上好多都比较鸡肋。更个性化的需求就需要我们来定义自己的过滤器了，下面来看看如何自定义过滤器。 4.5.3自定义过滤器及示例　　filter的自定义方式也很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。话不多说，我们来写一个看看。比如我需要一个过滤器，它可以返回一个数组中下标为奇数的元素，代码如下： app.filter('odditems',function(){ return function(inputArray){ var array = []; for(var i=0;i str : ‘@string’ = 使用父作用域中的一个属性，绑定数据到指令的属性中 name : ‘=username’ & 使用父作用域中的一个函数,可以在指令中调用 getName : ‘&getUserName’ 　　总之就是用符号前缀来说明如何为指令传值。你肯定迫不及待要看例子了，我们结合例子看一下，小二，上栗子~ 举例说明我想要实现上面想像的跟美女多说点话的功能，即我们给sayHello指令加一个属性，通过给属性赋值来动态改变说话的内容主要代码如下： app.controller(‘testC’,function(

scope){ $scope){$ scope.content = ‘今天天气真好！’; }); app.directive(‘sayHello’,function(){ return { restrict : ‘E’, template: ‘

hello, ,{{ cont }}

’, replace : true, transclude : true, scope : { cont : ‘=speak’ } }; }); 然后在模板中，我们如下使用指令：

美女

看看运行效果：
美女今天天气真好！
　　执行的流程是这样的：
　　① 指令被编译的时候会扫描到template中的{ {cont} }，发现是一个表达式；
　　② 查找scope中的规则：通过speak与父作用域绑定，方式是传递父作用域中的属性；
　　③ speak与父作用域中的content属性绑定，找到它的值“今天天气真好！”；
　　④ 将content的值显示在模板中。
这样我们说话的内容content就跟父作用域绑定到了一其，如果动态修改父作用域的content的值，页面上的内容就会跟着改变，正如你点击“换句话”所看到的一样。
　　这个例子也太小儿科了吧！简单虽简单，但可以让我们理解清楚，为了检验你是不是真的明白了，可以思考一下如何修改指令定义，能让sayHello以如下两种方式使用：
美女
美女
　　答案我就不说了，简单的很。下面有更重要的事情要做，我们说好了要写一个真正能用的东西来着。接下来就结合所学到的东西来写一个折叠菜单，即点击可展开，再点击一次就收缩回去的菜单。
控制器及指令的代码如下（例07）：
app.controller(‘testC’,function( $scope){$ scope.title = ‘个人简介’;
$scope.text = ‘大家好，我是一名前端工程师，我正在研究AngularJs，欢迎大家与我交流’;
});
app.directive(‘expander’,function(){
return {
restrict : ‘E’,
templateUrl : ‘expanderTemp.html’,
replace : true,
transclude : true,
scope : {
mytitle : ‘=etitle’
},
link : function(scope,element,attris){
scope.showText = false;
scope.toggleText = function(){
scope.showText = ! scope.showText;
}
}
};
});
HTML中的代码如下：

　　还是比较容易看懂的，我只做一点必要的解释。首先我们定义模板的时候使用了ng的一种定义方式

vampire2777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs学习总结详细教程

1 前言前端技术的发展是如此之快，各种优秀技术、优秀框架的出现简直让人目不暇接，紧跟时代潮流，学习掌握新知识自然是不敢怠慢。 AngularJS是google在维护，其在国外已经十分火热，可是国内的使用情况却有不小的差距，参考文献/网络文章也很匮乏。这里便将我学习AngularJS写成文档，一方面作为自己学习路程上的记录，另一方面也给有兴趣的同学一些参考。首先我自己也是一名学习者，会以学习者的
复制链接

扫一扫