AngularJS是个啥？

诞生于2009年，2012年被google收购，是一个适用于CRUD、SPA等类型应用的前端MVC框架

为什么要使用AngularJS

• 在涉及数据绑定的操作过程中，经典的做法是用AJAX将数据从服务端取回，接着将数据解析成变量，然后在前端进行字符串的拼接、嵌套，再插入到页面。

• 低数据量的绑定这样的操作的确无可厚非，但是在数据量庞大的时候（比如需要拼接成百上千行的字符串），这种方式就显得难以执行且不太科学了。

• 在这样的背景下，AngularJS诞生了，它是一种MVC模式的前端框架，为前后端的数据绑定提供了一套解决方案，并自定义了一套事件标准，使得前后端的数据交互更加的合理化并且高效，利于管理。

---

构建第一个AngularJS应用

• 下载AngularJS

  与大部分框架一样，AngularJS有开发版（可读）和压缩版（不可读，用于生产环境），这里我们下载AngularJS的压缩版

由于目前大部分应用尚未进行Angular2改造，因此这里使用第一代Angular，之后再对Angular2渐进增强

• 引入AngularJS

• 初始化Angular应用管理边界

  给元素加上一个属性ng-app（其实是Angular定义的指令，它声明一个angu的管理边界）

• 调用Angular对象，管理ng-app

angular.module('app',[])//数组代表依赖注入的内容

• AngularJS将所有api封装到angular对象中

• 使用angular对象管理边界的时候，要先声明一个angular模块，对这个模块的操作，即是对管理边界的控制

• 在管理区域内加入内容

    
         {
   { 'This is your first Angular App!' }}
    

• Angular将页面中所有的表达式进行解析，并输出里面的内容

• Angular不需要在js中声明边界管理模块也可以在页面显示内容

---

基本指令

指令：带有特定功能的自定义属性

指令格式：ng-command基本指令：

• 初始化应用管理边界——ng-app

  定义Angular的应用管理边界，前面已经使用到

• 初始化数据指令——ng-init

  定义初始化的数据

    
         {
   { username }}
    

这个数据可以是除函数外的任意的js数据类型

    
         {
   { user.username }}    
     
    {
   { user.sayHello }}    
     
    今天是星期{
   { data[2] }}
    

• 动态数据模型——ng-model

  它接收页面上动态数据的变化

    
    
         
     监听到输入框的变化{
   { text }}
    

• 数据绑定——ng-bind

  将数据绑定到当前元素

    
    
              {
   { username }}    
    

它与花括号表达式不同，它只能将数据绑定到html内容中（类似innerHTML实现），而花括号表达式可以将数据绑定到任何地方

PS：ng-model也能实现数据的捆绑，但破坏了规范的分工机制，不提倡

• 遍历——ng-repeat

    
    
     
{
   { $item }}
    

遍历datalist，根据遍历的情况生成元素，并且可以在元素中使用遍历到的数据

控制器 controller

既然Angular是MVC模式的框架，那么一定有一个controller（C）层面

控制器的作用：

1. 监听页面中的请求和行为

2. 访问处理数据

3. 将数据同步到view

控制器关注的部分

• view

• css

• image

• html

• js

插个楼！——$scope

$scope是angular对象内置服务对象，关联当前ng-app，是ng-controller实现内部数据和事件方法绑定（可以说是托管到$scope上，并通过$scope去调用）的核心对象

控制器实现步骤：

1. 声明控制器

1. 通过应用边界管理模块去监听控制器

//在模块var app = angular('app',[]).controller('mycontroller', function() {    //这里就要使用到$scope来进行数据的控制    $scope.hostage = "I am a hostage, controlled by Samuel"    $scope.something = "I am something."})

---

AngularJS事件

AngularJS自己定义了一套事件标准，通过指令的形式进行监听

示例：

• 单击事件——ng-click

  html:

    
    
     sendMessage    
     I'm wating for message.    
     
    
     {
   { message }}
    

js:

var app = angular.module('app', []).controller('mycontroller', function() {    $scope.sendMessage = function() {        $scope.message = "I\'m message!";    }});

---

第一眼，我们看到了：

AngularJS的核心业务（优势，解决的问题）、使用方式、编程模式（MVC）、基本的数据交互。使得这个强大的框架终于将虚掩的门打开。第二眼，就一探究竟吧。