AngularJS简介
AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等。AngularJS是一款开放源代码的javaScript框架，完全使用javascript编写客户端的技术，同其他历史悠久的Web前端技术（例如HTML、CSS等）配合使用，使得Web开发变得更简单、更高效。
AngularJS以HTML作为模板语言并扩展HTML元素及属性，使得应用组件开发保持高度清晰、一致。AngularJS 是以一个JavaScript 文件形式发布的，可通过 script 标签添加到网页中： <script src="./js/angular.min.js"</script>
各个 angular.js 版本下载： https://github.com/angular/angular.js/releases
直接引用网址：http://www.angularjs.net.cn/download/
引入百度CDN：<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
bootcdn：<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
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、项目代码
<!DOCTYPE html><html lang="en" ng-app=""><head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./angular-1.5.5/angular.js"></script></head><body>
<div> {{"hello world!"}} </div>
<div> {{"Hello AngularJS"}} </div></body></html>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、数字
<div ng-app="" ng-init="a=1;b=2">
<p>积为： {{a * b}} </p> //表达式</div>2、字符串
<div ng-app="" ng-init="firstName='hidi'; lastName='tao'">
<p>名字为： {{firstName + "." + lastName}} </p> //表达式</div>3、对象
<div ng-app="" ng-init="person={firstName:'hidi', lastName:'tao'}">
<p>名字为： {{person.firstName+"."+person.lastName}} </p>//表达式</div>4、数组
<div ng-app="" ng-init="array=[1,2,3,4,5]">
<p>下标为1的值为： {{array[1]}}</p> //表达式</div>AngularJS双向数据绑定
数据绑定是AngularJS框架在视图（DOM元素）与作用域之间建立的数据同步机制。所谓“双向”，是指界面的操作能够实时同步到作用域中，作用域中的数据修改也能够实时回显到界面中。
作用域可以被视为一个容器，里面有一些基于key-value的数据。
为了建立数据绑定，我们需要使用ng-model指令和ng-bind指令。
1、ng-model指令
该指令只能作用于表单元素上
<div>
用户名：<input type='text' ng-model='username' />
<p> {{username}} </p></div>在input输入框中添加ng-model指令后，AngularJS框架会在对应的作用域中创建一个username属性与该输入框进行绑定
2、ng-bind指令
实现作用域到视图的单向数据绑定，和表达式的功能类似，可用于向界面输出作用域中的数据。
<div>
用户名：<input type='text' ng-model='username' />
<p> {{username}} </p>
<p ng-bind='username'></p>
<p class='ng-bind:username'></p></div>不同的是，在使用AngularJS表达式{{name}}时，如果遇到网络问题，就会导致AngularJS加载缓慢，我们会看到浏览器直接将AngularJS表达式当做字符串渲染到页面中。而ng-bind指令需要等到AngularJS加载完毕才会执行。
AngularJS控制器
1、控制器的使用
AngularJS 应用程序被控制器控制。
使用ng-controller 指令定义应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。
<div ng-app="myApp" ng-controller="myCtrl">
姓名: <input type="text" ng-model="name"><br>
显示姓名: {{name}}</div><script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John";
});</script>应用解析：
ng-app启动AngularJS框架。应用程序在 <div> 内运行。
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()方法相同。
<script>
//定义一个无依赖模块
angular.module('app', []);
//定义一个依赖module1、module2的模块
angular.module('app', ['module1', 'module2']);</script>在得到一个模块实例对象后，可以调用该对象的controller()、directive()、filter()等方法向模块中添加控制器、指令、过滤器等其他组件。
模块定义完毕后，使用ng-app指令指定模块名称即可。如：<html ng-app='appModule'>
2、AngularJS模块解决命名冲突
假定现在有两个HTML页面，分别为登录页面和注册页面，在两个页面中引入一个公共的common.js文件，该文件中定义了控制器，当两个页面定义的控制器名称相同时就会产生命名冲突。现在使用模块来解决这个问题。
<!-- 登录页面login.html --><html ng-app="loginModule"><head> <meta charset="UTF-8"> <title>登录页面</title> <script src="/angular-1.5.5/angular.js"></script> <script src="common.js"></script></head><body> <div ng-controller="UserController"> <div>用户名：<input type="text" ng-model="uname" placeholder="用户名"/> </div><br/> <div>密 码：<input type="password" ng-model="pword" placeholder="密码"/> </div><br/> <div><button ng-click="submit()">登录</button></div> </div></body></html>
<!-- 注册页面register.html --><html ng-app="registerModule"><head> <meta charset="UTF-8"> <title>注册页面</title> <script src="/angular-1.5.5/angular.js"></script> <script src="common.js"></script></head><body> <div ng-controller="UserController"> <div>用户名：<input type="text" ng-model="uname" placeholder="用户名"/> </div><br/> <div>密 码：<input type="password" ng-model="pword" placeholder="密码"/> </div><br/> <div><button ng-click="submit()">注册</button></div> </div></body></html>
<script> var loginModule = angular.module("loginModule",[]);//登录模块
loginModule.controller("UserController",function($scope,$log){
$scope.uname = "login";
$scope.pword = "admin";
$scope.submit = function() {
alert("登录模块：UserController");
}
}); var registerModule = angular.module("registerModule",[]);//注册模块
registerModule.controller("UserController",function($scope,$log){
$scope.uname = "register";
$scope.pword = "admin";
$scope.submit = function() {
alert("注册模块：UserController");
}
});
</script>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）可获取这些属性值。视图中直接访问属性名称即可。
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1> {{myValue}} </h1> <!--使用模型中的数据:变量-->
<p>{{show()}}</p> <!-- 使用模型中的数据：方法 -->
</div>
</body>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.myValue = "你好，世界";
$scope.show = function() { return '你好'
}
})</script>3、各种语言或框架中的函数及变量定义
//java语言：void show() { }int a = 100;//javascriptfunction show() { }var a = 100;//微信小程序show: function() { }
a: 100//reactshow(){ }var a = 100;//vueshow: function() { }
a: 100//angular$scope.show = function() { }
$scope.a = 100;
作者：鱼鱼吃猫猫
链接：https://www.jianshu.com/p/7c713e953cdc