一、AngularJs简介

一.AngularJS 简介
1.AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。
2. 最为核心的特性：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。AngularJS直接用网页本身作为模板。

二、AngularJs的指令
ng-app指令标记了AngularJS脚本的作用域，在中添加ng-app属性即说明整个都是AngularJS脚本作用域。可以直接使用，也可以指定一个名字。
ng-controller = "str"指定一个AngularJs的控制器，相当于ng-app模块下的组件，其最大的作用就是把一个作用域（$scope）和模版上的html标签绑定到一起，限定了$scope的作用域
ng-model=””获取和修改具有value属性的值，数据的双向绑定------常用1
ng-bind=””修改一个标签内部的innerHTML，设置的值不存在该标签元素不会显示，数据不是双向的------常用2
{{ }}插值语法是渲染数据到页面中。插值符号｛｛｝｝不能替换属性的名字，能够替换的是文本内容和属性的值。------常用3
（小结：{{}}语法比其他两种更有优势，替换局部内容哦！）
**ng-click=”fun” **AngularJs自带的单击事件
**ng-dblclick=”fun” **AngularJs自带的双击事件
**ng-focus=”fun” ** AngularJs自带的获取焦点事件
**ng-blur=”fun” ** AngularJs自带的失去焦点事件
**ng-change=”fun” **AngularJs自带的事件
**ng-submit=”fun” **AngularJs自带的表单提交事件
……
ng-class=”{类样式1:true,类样式2:false}”AngularJs设置状态样式
ng-style=”{属性1:值,属性2:值}”AngularJs设置状态样式
**ng-readonly=”boolean” **AngularJs设置只读状态，可以提交数据
ng-disable=”boolean” AngularJs设置未激活状态，不可提交数据
ng-hide=”boolean” AngularJs设置隐藏状态，不改变dom结构
**ng-show=”boolean” **AngularJs设置显示状态，不改变dom结构
ng-if=”boolean” AngularJs设置if判断流程，改变dom结构，true显示该dom，false隐藏该dom元素
ng-switch=”值”AngularJs设置分支判断流程，会改变dom结构
ng-switch-when=”判断值”显示对应值的dom
ng-switch-default默认的值
**ng-repeat ** AngularJs循环流程，可以循环数组和对象，并且会重新限定一个作用域，在该作用域下有一个对象（包含了各种信息）。
ng-view 实现路由的托管，根据路径的不同，将对应的页面渲染到网页，即ng-view所在的位置
三.各种标记的具体用法
1】数据绑定

abcdefg

名字：{{name}}

 var app = angular.module('demo', [])
 app.controller('mainController', function   ($scope) {
    $scope.name = "张三";
})

2】样式绑定
1）样式绑定第一种
.red {
background: red;
}

    .green {
        background: green;
    }
    .bd-yellow{
        border:5px solid yellow;
    }

var app = angular.module('demo', []);
app.controller('mainController', function ($scope) {
    $scope.classDefine = {
        red:true,
        green:false,
        "bd-yellow":true
    }

2）样式绑定第二种

$scope.styleDefine = {
"width":"50px",
"height":"50px",
"background-color":"blue"
}
3）样式绑定第三种

$scope.styleStr = "width:100px;height:100px;background:black";
4）样式绑定第四种

$scope.style = "style";
切记：要加引号哦！

3】属性绑定

disabled:

hide:


4】事件绑定

click me
click me _ window
click me!

script>
var app = angular.module('demo', []);
app.controller('mainController', function ($scope) {
$scope.clickHandler = function () {
alert('btn has been clicked');
}
$scope.handler = function (str) {
alert(str);
}
$scope.change = 'change demo'
})

function clickHandler() {
    alert('btn has benn clicked __ window')
}

5】流程绑定

ng-if demo

    
 a 
    
 b 
    
 c 
    
 abcd 

四、AngularJs使用
1、AngularJs的包建议引到head部分
2、使用一个AngularJsBatarang浏览器插件可以辅助开发
3、在script标签中
var app = angular.module('demo', []);
参数一：模块的名字
参数二：要依赖的其它模块名字
作用：创建了一个angularJs模块
app.controller('tian', function ($http, $scope) {
$scope.name = '绑定值';
$scope.click = function () {
$scope.name = '绑定方法，在方法内部再绑定值'
};
$http.get('lisi.json')
.success(function (data) {
console.log(data);
})
});
参数一：控制器的名字
参数二：带$scope、$http、$parse、$rootScope等固定形参（没有顺序）的函数
作用：创建一个控制器并限定函数的作用域
五、AngularJs中的依赖注入
在回调函数中，AngularJs会提供对应参数的对象服务，用什么功能就传什么参数。
$scope控制器的作用域，是一个对象可以在内部绑定任意属性
$scope.$watch（“表达式”，function(newvalue,oldvalue,scope){}） 是$scope上自带的一个方法，用来监听表达式值的变化
$http是angularJs对ajax的封装
$parse作用：将一个AngularJS表达式转换成一个函数
$rootScope可以访问控制器的根（父级）作用域
$timeout是AngularJs对原生timeout的封装
$location是AngularJs对window原生location的封装
$location. path( )是$location对象的一个属性，可以获取路由路径
六、AngularJs中的双向数据绑定
双 向绑定：把我们的数据和html文档绑定起来，我们只需要关注数据就可以了，dom操作由angularjs去管理，一来方便，二可以提高安全性（程序员写代码的bug概率降低）
七、AngularJs中的mvvm
在angular中MVVM模式主要分为四部分：
1.View：它专注于界面的显示和渲染，在angular中则是包含一堆声明式Directive的视图模板。
2.ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在angular中$scope对象充当了这个ViewModel的角色；
3.Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象；而angular中的service则是封装和处理这些与Model相关的业务逻辑的场所，这类的业务服务是可以被多个Controller或者其他service复用的领域服务。
4.Controller：这并不是MVVM模式的核心元素，但它负责ViewModel对象的初始化，它将组合一个或者多个service来获取业务领域Model放在ViewModel对象上，使得应用界面在启动加载的时候达到一种可用的状态。
View不能直接与Model交互，而是通过$scope这个ViewModel来实现与Model的交互。对于界面表单的交互，通过ngModel指令来实现View和ViewModel的同步。ngModelController包含$parsers和$formatters两个转换器管道，它们分别实现View表单输入值到Model数据类型转换和Model数据到View表单数据的格式化。对于用户界面的交互Command事件（如ngClick、ngChange等）则会转发到ViewModel对象上，通过ViewModel来实现对于Model的改变。然而对于Model的任何改变，也会反应在ViewModel之上，并且会通过$scope的“脏检查机制”（$digest）来更新到View。从而实现View和Model的分离，达到对前端逻辑MVVM的分层架构。
八、什么是单页面应用
本质：无刷新的单页面，当用户操作的时候ajax请求数据，局部的更新我们的页面，所有的操作都在这张页面上完成，都由JavaScript来控制。
理念：更好的用户体验，无停顿的用户交互
问题：写起来非常的麻烦