AngularJS是个啥？

诞生于2009年，2012年被google收买，是一个适用于CRUD、SPA等范例运用的前端MVC框架

为何要运用AngularJS

• 在触及数据绑定的操纵过程当中，典范的做法是用AJAX将数据从效劳端取回，接着将数据剖析成变量，然后在前端举行字符串的拼接、嵌套，再插进去到页面。

• 低数据量的绑定如许的操纵确实无可厚非，但是在数据量巨大的时刻（比方须要拼接成百上千行的字符串），这类体式格局就显得难以实行且不太科学了。

• 在如许的背景下，AngularJS诞生了，它是一种MVC情势的前端框架，为前后端的数据绑定供应了一套处理方案，并自定义了一套事宜范例，使得前后端的数据交互越发的合理化而且高效，利于治理。

构建第一个AngularJS运用

• 下载AngularJS
  与大部份框架一样，AngularJS有开辟版（可读）和压缩版（不可读，用于临盆环境），这里我们下载AngularJS的压缩版

https://angularjs.org/
因为如今大部份运用还没有举行Angular2革新，因而这里运用第一代Angular，以后再对Angular2渐进加强

• 引入AngularJS

<script src="./lib/angular.min.js"></script>

• 初始化Angular运用治理边境
  给元素加上一个属性ng-app（实际上是Angular定义的指令，它声明一个angu的治理边境）

<div ng-app="app"></div>
<!--此div如今遭到AngularJS束缚-->

• 挪用Angular对象，治理ng-app

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

• 在治理区域内到场内容

<div ng-app="app">
    {{ 'This is your first Angular App!' }}
</div>

• Angular将页面中一切的表达式举行剖析，并输出内里的内容

• Angular不须要在js中声明边境治理模块也能够在页面显现内容

基础指令

指令：带有特定功用的自定义属性
指令花样：ng-command
基础指令：

• 初始化运用治理边境——ng-app
  定义Angular的运用治理边境，前面已运用到

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

<div ng-app="app" ng-init="username='Hello U!'">
    {{ username }}
</div>

这个数据能够是除函数外的恣意的js数据范例

<div ng-app="app" ng-init="user={ username: 'Samuel', sayHello: 'Samuel say hello to you!' }; date=[1,2,3,4,5,6,7]">
    {{ user.username }}
    <br>
    {{ user.sayHello }}
    <br>
    今天是礼拜{{ data[2] }}
</div>

• 动态数据模型——ng-model
  它吸收页面上动态数据的变化

<div ng-app="app">
    <input ng-model="text" />
    <span>监听到输入框的变化{{ text }}</span>
</div>

• 数据绑定——ng-bind
  将数据绑定到当前元素

<div ng-app="app" ng-init="username='Samuel'">
    <span ng-bind:"username">
         {{ username }}
    </span>
</div>

它与花括号表达式差别，它只能将数据绑定到html内容中（相似innerHTML完成），而花括号表达式能够将数据绑定到任何地方

<div ng-app="app" ng-init="username='Samuel'>
    <p id="{{ username }}"></p>
</div>

PS：ng-model也能完成数据的绑缚，但破坏了范例的分工机制，不首倡

• 遍历——ng-repeat

<div ng-app="app" ng-init="datalist=[1,2,3,4]">
    <p ng-repeat="$item in datalist">{{ $item }}</p>
</div>

遍历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. 声明掌握器

<div ng-app="app" ng-controller="mycontroller"></div>

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:

<div ng-app="app" ng-controller="mycontroller">
    <button ng-click="sendMessage()">sendMessage</button>
    <span>I'm wating for message.</span>
    <br>
    <span>{{ message }}</span>
</div>

js:

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

第一眼，我们看到了：
AngularJS的中心营业（上风，处理的题目）、运用体式格局、编程情势（MVC）、基础的数据交互。使得这个壮大的框架终究将虚掩的门翻开。
第二眼，就一探终究吧。