前言：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. Webservice发布

    此文甚好,转载自:http://blog.163.com/java_player@126/blog/static/127930738200981555021925/ 某些地方笔者已经加以改进. 使用工 ...

  2. 在Team Foundation Server (TFS)的代码库或配置库中查找文件或代码

    [update 2017.2.11] 最新版本的TFS 2017已经增加了代码搜索功能,可以参考这个链接 https://blogs.msdn.microsoft.com/visualstudioal ...

  3. JQuery中DOM操作(一)

    节点操作 1.插入节点,在JQuery中插入的节点方法很多,可以满足各种不同的节点插入的情况,根据不同的插入方式分为:增加环绕节点.节点内部插入和外部插入三种方式 今天我们要讲的是增加环绕节点,它有三 ...

  4. 离线下载解决Nuget程序包及其依赖包的方法

    由于使用的一台电脑没有联网,但是需要asp.net core项目时使用到一个package,于是在nuget.org上手动下载.但是最后发现,依赖的包实在太多,手动下载太费时.于是晚上花时间研究了一下 ...

  5. cesium随笔 — 简单实现获取三维范围（包括相机高度）

    代码 // 获取当前三维范围 function getCurrentExtent() { // 范围对象 var extent = {}; // 得到当前三维场景 var scene = viewer ...

  6. SharePoint Adventures : Using Claims with Reporting Services

    Cannot convert claims identity to a windows token.  This may be due to user not logging in using win ...

  7. iOS Facebook SDK

    iOS 使用 Facebook SDK 可以登录,分享,发布通知(Notifications)等. 首先下载 Facebook SDK.然后在 Facebook Developer 上注册自己的 ap ...

  8. 【文文殿下】[BZOJ4327] JSOI2012 玄武密码

    SAM裸题.这道题卡空间.要小心数组别开炸了. #include<cstdio> #include<cstring> typedef long long ll; const i ...

  9. Nodejs Express模块server.address().address为::

    来自 http://blog.csdn.net/medivhq/article/details/74171939 我按照菜鸟教程上的写法为:(http://www.runoob.com/nodejs/ ...

  10. [Swift实际操作]七、常见概念-(14)使用UIColor设置界面组件的颜色属性

    打开移动应用程序,不可避免的需要和颜色打交道.本文将为你演示颜色对象的使用. 首先导入需要使用到的界面工具框架 import UIKit 通过UIColor的属性,可以获得橙色.右侧的实时反馈区,显示 ...