AngularJS简介

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等。AngularJS是一款开放源代码的javaScript框架，完全使用javascript编写客户端的技术，同其他历史悠久的Web前端技术（例如HTML、CSS等）配合使用，使得Web开发变得更简单、更高效。

AngularJS以HTML作为模板语言并扩展HTML元素及属性，使得应用组件开发保持高度清晰、一致。AngularJS 是以一个JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

bootcdn：

MVC、MVVM框架介绍

1、MVC框架

MVC是一种软件架构模式，独立于任何一门语言，于1970年起源于Smalltalk语言，之后广泛应用于桌面应用开发中。MVC分别是Model（模型）、View（视图）、Controller（控制器）。MVC的核心思想是把数据的管理、业务逻辑控制和数据的展示分离开来，使程序的逻辑性和可维护性更强。

Model（模型）：为程序的模型数据，是控制器与视图之间传递信息的载体。
View（视图）：为用户可操作的软件界面，用户通过视图与程序进行交互，在视图中触发不同的事件，将触发控制器执行相应的业务逻辑处理。
Controller（控制器）：主要用于响应用户的请求，在控制器中可操作模型数据，进行业务逻辑处理，根据处理结果分发到不同的视图。

mvc框架.png

2、AngularJS中的MVC

Model（模型）：作用域对象$scope中的属性。
View（视图）：DOM元素，就是HTML页面
Controller（控制器）：用户自定义的构造方法，作用域中的模型数据可以通过依赖注入的方式注入容器中。

3、MVVM框架

MVVM：早期的AngularJS框架比较接近于MVC，而随着新版本的重构与API的改进，$scope对象可以认为是有一个方法（Controller）包装后的ViewModel，看上去接近于MVVM（Model-View-ViewModel），也称为MVW（Model-View-Whatever）。

Angular第一个项目

1、项目代码




    
    Title
    


     {{"hello world!"}} 
     {{"Hello AngularJS"}}

ng-app是AngularJS的一个内置指令，可以出现在任何位置，用来启动AngularJS框架，并告诉AngularJS框架管理ng-app指令所在的标签中所有DOM元素。此例中表示AngularJS管理整个HTML页面。
{{ }}是AngularJS的表达式形式，由两个大括号构成，中间是表达式的内容，AngularJS会解析表达式的内容，并将表达式的结果输出到浏览器。

2、AngularJS的构成元素

模型（Model）
视图（View）
控制器（Controller）
作用域（Scope）
指令（Directives）
表达式（Expressions）
模板（Template）

Angular表达式

AngularJS表达式写在双大括号内：{{ expression }}，用于把数据绑定到 HTML并在表达式的位置"输出"数据。AngularJS表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

1、数字


    积为： {{a * b}}    //表达式

2、字符串


    名字为： {{firstName + "." + lastName}}     //表达式

3、对象


   名字为： {{person.firstName+"."+person.lastName}} //表达式

4、数组


    下标为1的值为： {{array[1]}}    //表达式

AngularJS双向数据绑定

数据绑定是AngularJS框架在视图（DOM元素）与作用域之间建立的数据同步机制。所谓“双向”，是指界面的操作能够实时同步到作用域中，作用域中的数据修改也能够实时回显到界面中。

作用域可以被视为一个容器，里面有一些基于key-value的数据。

为了建立数据绑定，我们需要使用ng-model指令和ng-bind指令。

1、ng-model指令

该指令只能作用于表单元素上


    用户名：
      {{username}}

在input输入框中添加ng-model指令后，AngularJS框架会在对应的作用域中创建一个username属性与该输入框进行绑定

2、ng-bind指令

实现作用域到视图的单向数据绑定，和表达式的功能类似，可用于向界面输出作用域中的数据。


    用户名：
      {{username}}

不同的是，在使用AngularJS表达式{{name}}时，如果遇到网络问题，就会导致AngularJS加载缓慢，我们会看到浏览器直接将AngularJS表达式当做字符串渲染到页面中。而ng-bind指令需要等到AngularJS加载完毕才会执行。

AngularJS控制器

1、控制器的使用

AngularJS 应用程序被控制器控制。

使用ng-controller 指令定义应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。


    姓名:  

    显示姓名: {{name}}

应用解析：

ng-app启动AngularJS框架。应用程序在
内运行。
ng-controller用于定义一个控制器。
ng-model 指令绑定输入域到控制器的属性（name）
AngularJS 使用 $scope** 对象来调用控制器。控制器的**$ scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了一个属性 (name)。
在HTML（视图）中使用AngularJS表达式显示作用域中的属性（name）。

2、控制器的作用域范围

在同一个页面中可以使用多个ng-controller指令来实例化不同的控制器对象，但每个控制器对应的作用域对象只能与ng-controller指令所在标签的开始标签与结束标签之间的DOM元素建立数据绑定。

AngularJS模块

在实际项目中，随着项目的进展代码会越来越多，我们需要以一种更加合理的方式组织这些代码。应用模块划分能够使程序结构良好、提高代码的可维护性，同时可以避免命名冲突问题。

模块定义了一个应用程序，是应用程序中不同部分的容器，控制器通常属于一个模块。

1、模块定义

可以调用angular对象的module()方法来返回一个模块实例，该方法接收3个参数，语法如下：

angular.module(name,requires, configFn)

name：模块的名称
requires：是一个数组，用于指定该模块依赖的模块名称。如果不需要依赖其他的模块，则传递一个空数组即可。
configFn：为可选参数，该参数接收一个方法，用于对模块进行配置，作用与config()方法相同。

在得到一个模块实例对象后，可以调用该对象的controller()、directive()、filter()等方法向模块中添加控制器、指令、过滤器等其他组件。

模块定义完毕后，使用ng-app指令指定模块名称即可。如：

2、AngularJS模块解决命名冲突

假定现在有两个HTML页面，分别为登录页面和注册页面，在两个页面中引入一个公共的common.js文件，该文件中定义了控制器，当两个页面定义的控制器名称相同时就会产生命名冲突。现在使用模块来解决这个问题。

AngularJS作用域

1、作用域概念

AngularJS作用域本质上就是一个普通的javascript对象，可以在作用域对象中增加属性和方法。

属性：$scope.属性名称 = ‘属性值’
方法：$scope.方法名称 = function() { }

AngularJS中不需要手动创建作用域对象，当HTML页面中出现ng-app、ng-controller指令时，AngularJS框架会自动创建作用域对象，我们只需将其注入即可。

AngularJS程序中作用域的主要功能是存放模型数据，在控制器中可以修改作用域的模型数据，在视图中使用AngularJS表达式或者ng-bind显示数据。

AngularJS中使用$scope表示作用域，通过为其属性赋值，可以传递数据给模板渲染。

2、$scope使用

创建控制器时，将** $scope**对象当做一个参数传递，当在控制器中添加$ scope对象时，视图（HTML）可获取这些属性值。视图中直接访问属性名称即可。

 
    
         {{myValue}} 
  
        {{show()}}

3、各种语言或框架中的函数及变量定义

//java语言：
void show() {   }
int a = 100;

//javascript
function show() {  }
var a = 100;

//微信小程序
show: function() {  }
a: 100

//react
show(){  }
var a = 100;

//vue
show: function() {  }
a: 100

//angular
$scope.show = function() {   }
$scope.a = 100;

AngularJS指令

AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添加功能。指令带有前缀 ng-。

完整的内置指令可参考：http://www.runoob.com/angularjs/angularjs-reference.html


    名字为：

ng-app：初始化一个 AngularJS 应用程序，启动AngularJS框架
ng-init：初始化应用程序数据
ng-model：绑定元素值（比如输入域的值）到应用程序
ng-bind：绑定 HTML 元素到应用程序数据

1、内置指令

（1）n-app

ng-app 指令定义了 AngularJS 应用程序的根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
ng-app是一个特殊的指令，一个HTML文档只出现一次，如出现多次也只有第一个起作用；
ng-app可以出现在html文档的任何一个元素上。
ng-app的值可以为空（练习），但项目中一定要赋值，后面所说的模块。

（2）ng-init

ng-init 指令为 AngularJS 应用程序定义了初始值，可以出现在任何HTML元素中。通常情况下，不使用 ng-init。将使用一个控制器或模块来代替它。


    {{name}}

（3）ng-model

ng-model 指令绑定 HTML 元素到应用程序数据。
ng-model 指令也可以：
- 为应用程序数据提供类型验证（number、email、required）。
- 为应用程序数据提供状态（invalid、dirty、touched、error）。
- 为 HTML 元素提供 CSS 类。绑定 HTML 元素到 HTML 表单。

（4）ng-repeat

ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素

2、自定义指令

（1）定义指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
可以使用 .directive() 函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令，如：myDirective, 但在使用它时需要以 短横线 - 分割, 如：runoob-directive


      //调用自定义指令

（2）调用指令

AngularJS可以通过4种方式来调用自定义指令:
- 元素名：
- 属性：
- 类名：
- 注释：，需要在定义指令时指定replace的值为true，否则不可见。注意：指令左右要有空格

可以限制指令必须通过特定的方式调用，只需要为restrict设置特定的值即可。restrict 值可以是以下几种:
- E element作为元素名使用
- A attribute作为属性使用
- C class作为类名使用
- M mark作为注释使用restrict

默认值为 EA, 即可以通过元素名和属性名来调用指令。

Angular.js基础手册