前言：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. SQL Server关于存储过程的一点简单使用心得

    ===========================创建无参无返回值的存储过程===========================create proc pro_nameas--要执行的sql语句 ...

  2. ffmpeg学习（一）——在window7下编译ffmpeg

    FFmpeg是一个开源免费跨平台的视频和音频流项目,它提供了录制.转换以及流化音视频的完整解决方案.本文作者将尝试使用该库实现一个可适应复杂网络环境的, 支持标准rtsp协议的流媒体服务器.由于Vis ...

  3. hbase zookeeper独立搭建

    一.zk单独搭建 1.修改配置文件:conf/zoo.cfg tickTime=2000 dataDir=/home/hadoop/data/zookeeper clientPort=2181 ini ...

  4. wpf（怎么跨线程访问wpf控件）

    在编写代码时,我们经常会碰到一些子线程中处理完的信息,需要通知另一个线程(我这边处理完了,该你了). 但是当我们通知WPF的UI线程时需要用到Dispatcher. 首先我们需要想好在UI控件上需要显 ...

  5. qi zi

    #include<stdio.h> ]; ][]; int N; typedef struct node{ int x; }node; node dui[]; int se(int a) ...

  6. ADV三星

    #include <iostream> using namespace std; #define SIZE 12 int data[SIZE]; int data1[SIZE]; int ...

  7. GO学习笔记 - 数据类型转换

    官方教程:https://tour.go-zh.org/basics/13 表达式 T(v) 将值 v 转换为类型 T . 一些关于数值的转换: var i int = 42 var f float6 ...

  8. 【OCP 12c】最新CUUG OCP-071考试题库（63题）

    63.(22-4) choose the best answer: View the Exhibit and examine the data in the PRODUCTS table. Which ...

  9. 【OCP认证12c题库】CUUG 071题库考试原题及答案（26）

    26.choose two Examine the structure of the PRODUCTS table. Which two statements are true? A) EXPIRY_ ...

  10. SpringMVC 的映射

    27.1.1 @RequestMapping使用 之前,我们是把@RequestMapping注解放在方法之上,用来给方法绑定一个请求映射.除此以外,@RequestMapping注解还可以放在类的上 ...