前言：AngularJS 是一款来自 Google 的前端 JS 框架，该框架已经被应用到了 Google 的多款产品中，这款框架最核心特性有：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等待。而且，AngularJS 框架自身是通过 TDD（测试驱动）的方式开发的，从这个角度来看，AngularJS 是敏捷开发的一次成功实践。

引一段《AngularJS 深度剖析和最佳实践》中的话：

Angular的学习曲线大概是这样的：入门非常容易，中级的时候会发现需要深入理解很多概念，高级的时候需要掌握Angular的工作原理，而想成为专家则很难，需要经过很多工程实践的磨练。

既然入门比较容易，那就一起入门吧。

1、调用 Angular

　　为了使用 Angular，所有应用都必须首先做两件事情：

  • 加载 angular.js 库
  • 使用 ng-app 指令告诉 Angular 应该管理 DOM 中的哪一部分。

　　如果你正在构建一款纯 Angular 应用，则把 ng-app 指令写在 <html> 标签中，示例如下：

 <html ng-app>
     ...
 </html>

　　或者你也可以用 Angular 管理页面中的一部分，只有放在页面中的 <div> 之类的元素即可。

 <html>
     ...
     <div ng-app>
         ...
     </div>
     ...
 </html>

2、模板与数据绑定

　　1）数据绑定是 Angular 的特色，即 “所见即所得”，像这样设置其中的文本：

<p>{{someText}}</p>

　　也叫做双花括号插值语法，因为它可以把新的内容插入到现有的模板中。

　　控制器(使用指令 ng-controller)就是你所编写的类或者类型，它的作用是告诉 Angular 该模型是由哪些对象或者基本数据构成的，只要把这些对象或者基本数据设置到 $scope 对象上即可，$scope 对象会被传递给控制器：

 function TextController($scope) {
   $scope.someText = someText;
 }

　　一个简单的完整的例子：

 <html ng-app>
     <body ng-controller="TextController">
         <p>{{someText}}</p>
         <script src="../src/angular.js"></script>
         <script>
             function TextController($scope) {
                 $scope.someText = 'You have started your journey.';
             }
         </script>
     </body>
 </html>

　　加载到浏览器中，你会看到：

You have started your journey.

　　但是大多数应用，还是需要创建模型对象来容纳数据，而且并不建议在全局作用域创建 TextController，建议是定义成模块的一部分。

 <html ng-app="myApp">
     <body ng-controller="TextController">
         <p>{{someText}}</p>
         <script src="../src/angular.js"></script>
         <script>
             var myAppModule = angular.module('myApp', []);

             myAppModule.controller('TextController', function ($scope) {
                 var someText = {};
                 someText.message = 'You have started your journey.';
                 $scope.someText = someText;
             });
         </script>
     </body>
 </html>

　　记住：把东西从全局命名空间中隔离开是一件非常好的事情，模块机制起这个作用。

　　2）使用 ng-bind 指令，可以在 UI 中的任何地方显示并刷新文本，有两种等价形式：

　　一种是花括号形式：

<p>{{greeting}}</p>

　　一种是使用基于属性的指令：

<p ng-bind="greeting"></p>

　　花括号插值语法的目的是为了阅读自然，而且需要输入的内容更少，但是在页面加载过程中，Angular 会使用数据替换这些花括号，未被渲染好的模板可能会被用户看到。

　　造成这种现象的原因是，浏览器需要首先加载 HTML 页面，渲染它，然后 Angular 才有机会把它解释成你期望看到的内容。

　　其实，加载 HTML 页面一般只发生在首页，所以对于 index.html 页面中的数据绑定操作，建议使用 ng-bind，其他页面可以使用花括号，而且花括号更快一点。

　　利用 Chrome 浏览器的一个针对于 Angular 的扩展（AngularJS Batarang(Stable)）可以直观的看到两者消耗时间的差别：

　　

　　3）表单输入

　　在 Angular 中使用表单元素非常方便，使用指令 ng-model 属性把元素绑定到你的模型属性上。

 <form ng-controller="SomeController">
     <input type="checkbox" ng-model="youCheckedIt">
 </form>

　　对于输入元素来说，你可以使用 ng-change 属性来指定一个控制器方法，一旦用户修改了输入值，这个方法就会被调用。下面做一个简单的计算，帮助消费者计算一下需要付多少钱：

 <form ng-controller="StartUpController">
     Starting : <input ng-change="computeNeeded()" ng-model="funding.startingEstimate">
     Recommendation: {{funding.needed}}
 </form>

　　把输入文本框的值设置为用户估价的 10 倍即可，同时，默认值为 0：

     function StartUpController($scope) {
         $scope.funding = { startingEstimate : 0};

         $scope.computeNeeded = function () {
             $scope.funding.needed = $scope.funding.startingEstimate * 10;
         }
     }

　　但是为了能够正确地刷新输入框，而不管它是通过何种途径进行刷新的，需要使用 $scope 中的 $watch() 函数：

 function StartUpController($scope) {
 　　$scope.funding = { startingEstimate : 0};

    var computeNeeded = function () {
    　　$scope.funding.needed = $scope.funding.startingEstimate * 10;
    };

    $scope.$watch('funding.startingEstimate', computeNeeded);
 }

　　请注意，需要监视的表达式位于引号中，这个字符串会被当作 Angular 表达式来操作。这时我们可以使用一个简单的模板：

 <form ng-controller="StartUpController">
     Starting : <input ng-model="funding.startingEstimate">
     Recommendation: {{funding.needed}}
 </form>

　　4）浅谈非入侵式 JavaScript

　　对于大多数内联的时间监听器来说，Angular 有一种等价的形式 ng-eventhandler = "expression"，这里的 eventhandler 可以被替换成 click、mousedown、change等。最重要的是，Angular将会帮你屏蔽浏览器之间的差异性。

　　而且不会在全局命名空间中进行操作，你所指定的表达式只能访问元素控制器作用域范围内的函数和数据。

　　第二点举个例子就是，不同的 Controller，可以定义相同名字的数据模型，你会创建一个导航栏和一个内容区域，当你在导航栏中选择不同的菜单项时，内容区域会发生相应的改变。

 <div class="navbar" ng-controller="NavController">
     ...
     <li class="menu-item" ng-click="doSomething()">Something</li>
     ...
 </div>

 <div class="contentArea" ng-controller="ContentAreaController">
     ...
     <div ng-click="doSomething()">...</div>
     ...
 </div>

　　当用户点击的时候，导航栏中的两个 <li> 和内容区域中的 <div> 都会调用 doSomething() 的函数，你可以在控制器代码中写好这些调用所引起的函数，实际上这两个函数可以是同一个，也可以不是同一个。

 function NavController($scope) {
     $scope.doSomething = doA;
 }
 function ContentAreaController($scope) {
     $scope.doSomething = doB;
 }

　　请注意，到目前为止，我们所编写的所有控制器中，都没有在任何地方引用 DOM 或者 DOM 操作，所有定位元素和处理事件的工作都是在 Angular 内部完成的。

　　所以，你可以开心地使用 Angular 的声明式事件处理器，同时又能保持简单性和可读性，没有必要为违反最佳实践而感到内疚。

　　特别鸣谢：《用 AngularJS 开发下一代 Web 应用》

AngularJS 的常用特性（一）的更多相关文章

  1. AngularJS 的常用特性（五）

    13.使用路由和 $location 切换视图 对于一些单页面应用来说,有时候需要为用户展示或者隐藏一些子页面视图,可以利用 Angular 的 $route 服务来管理这种场景. 你可以利用路由服务 ...

  2. AngularJS 的常用特性（四）

    11.使用 Module(模块) 组织依赖关系 Angular 里面的模板,提供了一种方法,可以用来组织应用中一块功能区域的依赖关系:同时还提供了一种机制,可以自动解析依赖关系(又叫依赖注入),一般来 ...

  3. AngularJS 的常用特性（三）

    6.表达式  在模板中使用表达式是为了以充分的灵活性在模板.业务逻辑和数据之间建立联系,同时又能避免让业务逻辑渗透到模板中. <div ng-controller="SomeContr ...

  4. AngularJS 的常用特性（二）

    3.列表.表格以及其他迭代型元素 ng-repeat可能是最有用的 Angular 指令了,它可以根据集合中的项目一次创建一组元素的多份拷贝. 比如一个学生名册系统需要从服务器上获取学生信息,目前先把 ...

  5. 探索ASP.NET MVC5系列之~~~4.模型篇---包含模型常用特性和过度提交防御

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  6. ES6的一些常用特性

    由于公司的前端业务全部基于ES6开发,于是给自己开个小灶补补ES6的一些常用特性.原来打算花两天学习ES6的,结果花了3天才勉强过了一遍阮老师的ES6标准入门(水好深,ES6没学好ES7又来了...) ...

  7. angularJS的核心特性

    前几天师傅让我了解一下angularJS,angularJS是一个前端框架,具体的优缺点和运用场景我现在也还没有搞清楚,暂时就先不做描述了,留到运用以后进行补充吧. angularJS四大核心特性:M ...

  8. MVC常用特性

    MVC常用特性使用   简介 在以前的文章中,我和大家讨论如何用SingalR和数据库通知来完成一个消息监控应用. 在上一篇文章中,我介绍了如何在MVC中对MongoDB进行CRUD操作. 今天,我将 ...

  9. C#网络程序设计(1)网络编程常识与C#常用特性

        网络程序设计能够帮我们了解联网应用的底层通信原理!     (1)网络编程常识: 1)什么是网络编程 只有主要实现进程(线程)相互通信和基本的网络应用原理性(协议)功能的程序,才能算是真正的网 ...

随机推荐

  1. java程序练习

    数组求和作业 开发环境:java 工具:eclipse 两种数据类型excel和csv 在同学建议下,我选择用csv文件打开,这就引来了第一个问题,在java中如何调用csv文件.以下是我百度的结果 ...

  2. 10-12Linux流编程的一些知识点

    第五章  Linux 的流编程 Linux流操作基础      流和文件的关系:流相当于一个缓冲区,可以将文件描述符和流关联,获得相应的缓冲区,以此来提高系统对磁盘的存取速度.     流的结构和操作 ...

  3. SignalR支持的平台

    服务器系统要求 SignalR服务器组件可以托管在各种服务器配置上.本节介绍受支持的操作系统版本,.NET框架,Internet Information Server和其他组件. 支持的服务器操作系统 ...

  4. web api 请求结果中页面显示的json字符串与json对象结果不一致

    我在前端调用这个api的时候也是百思不得其解,明明看到页面上的结果ID是不一样的,但是在js中使用的时候,却一直有重复ID的情况 后来才发现原来是long这个类型的原因,JavaScript中Numb ...

  5. C# autofac的一些使用

    这次项目需要用autofac动态注册插件dll,插件修改或扩展后,在不重新编译的情况下能加载新的插件. 于是我们用autofac从配置文件注册.注册的文件固定named.这样不管插件怎么变,我们Res ...

  6. C# BackgroundWorker 的使用、封装

    示例代码: PT_USER_INFO user = new PT_USER_INFO(); IList<TES_COMBAT_TASK> taskList = new List<TE ...

  7. dubbo事件通知机制（1）

    此文已由作者岳猛授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. dubbo事件通知机制:http://dubbo.io/books/dubbo-user-book/demos ...

  8. ping使用

    while read line do ip=`echo $line | awk '{print $2}' ` -i $ip ];then echo $line | tee -a b fi

  9. 面向对象之-@classmethod、@staticmethod和@classonlymethod的区别

    实例方法.静态方法与类方法的含义 实例方法(普通方法)的含义就是需要类对象实例之后才能调用的方法,该方法的基本格式为: def test(self,*args,**kwargs): # 第一个参数必须 ...

  10. MYSQL处理高并发，防止库存超卖（图解)

    抢购场景完全靠数据库来扛,压力是非常大的,我们在最近的一次抢购活动改版中,采用了redis队列+mysql事务控制的方案,画了个简单的流程图: 先来就库存超卖的问题作描述:一般电子商务网站都会遇到如团 ...