初识angular js

angular被谷歌收购。后台程序员在写应用的时候，发现前端比较松散，就用后台思路编写前端的框架。提供一种新的开发应用的方式。angular刚推出的时候，火及一时。后来，尤雨溪开发了vue，很多人说他是模仿angular，但vue比angular更简单，更方便。目前，vue是一个极为流行的框架。angular上手，比vue要稍微难一点。
将数据和页面绑定在一起，数据变化，页面变化。

• model 数据
• view 视图
• controller 逻辑层

双向数据绑定
模板
MVVM：Model-View-ViewModel
依赖注入
指令

前后端分离：后端只提供数据接口；路由、模板渲染等都在前端完成
html和js分离
减少JS代码，减少DOM元素查找

angular做网页之间的跳转，不是靠a标签，而是靠路由。

angular js是指小于1.5.x
angular是指大于2.0
从1.5.x到2.0版本，2.0几乎是完全重写的版本，除了内部指令外，那些逻辑完全改写，并且重新命名为angular。因为angular 1.x的性能有问题。
目前angular最新版本是4.x。
2.0之后推出了2.2，之后直接升级到4.x。
2.2.0rc，版本都带rc，rc代表向后兼容版本。Release Candidate(候选版本)。
版本2和4几乎完全兼容。

2.x开始是用typescript写的。
JavaScript没有重载，但是typescript有重载。
typescript是JavaScript的一个超集，写法与java几乎一模一样。
现在angular 2的前途还不是很明朗。
为什么不改angular 2呢？

1. 已结用了angular js的公司，修改成本过高。
2. 没有用angular js的公司，因为有vue在，所以不会选择前途不明朗的angular 2。

coffeescript

angular的错误调试比较难。

给一个例子：

    
        
        
        
        
        
    
    
        {{5*4}}
        {{5*4 ? "true" : "false"}}
        
{{name + "--" + age}}

        
        *
        
        =
        {{one * two}}
    

凡是以ng-开始的，都称为内置指令

ng-app

ng-app 用于表示一个angular应用
angular会从ng-app所在的标签开始，管理这个应用
一个页面或应用中，建议只存在一个ng-app，如果有多个，需要手动启动对应的应用。
目前ng-app=“” 表示使用默认的angular 应用

ng-init

ng-init初始化数据，ng-init=“a=b;c=d....”;
使用ng-init初始化数据，会挂载到很多作用域
在开发正式项目时，不建议使用ng-init做数据初始化
应该交由controller去完成

ng-model 将（表单）视图与模型进行（双向）绑定
ng-repeat遍历对象
遍历数组：ng-repeat=“x in arr”
遍历对象：ng-repeat="(key, val) in obj"

属性：

$first 是否是第一项
$last 是否是最后一项
$middle 是否是中间项
$index 下标值

angular需要一个不重复的值去跟踪数据的变化，当数组内有重复时，将导致angular无法正常跟踪对应值，需要使用track by $index 为遍历指定一个唯一不重复的值

ng-class为元素指定样式名
ng-class=“{true:'class',false:'class2'}[bol]”由bol决定添加哪个样式
ng-class=“{'class1':bol1,'class2':bol2,'class3':bol3}各个变量决定

事件

ng-show是否显示元素，true 显示，false 隐藏
ng-show为false，只是为元素添加一个优先级最高的display：none

ng-if是否显示元素
ng-if为false时，会将元素从DOM树种移除
当元素需要反复隐藏、显示时，使用ng-show
当只显示一次便不再使用的元素，使用ng-if

ng-click 单击事件
ng-mouseover

ng-bind将模型数据输出到页面
可以解决{{}}表达式造成的原样输出问题

错误提示

找不到模块：
Uncaught Error: [$injector:modulerr]

angular.module(moduleName[,depends])创建或获取模块
moduleName: 模块名称String
depends： 依赖的其他模块 Array
当只传入一个名称时，代表获取指定的模块
两个参数时，定义模块，即使不依赖其他模块，也要传入一个空的数组

自己写ng-app

  
    
        
        
        
        
        
        
    
    
        
        

            {{name}}
        
        

            {{name}}
        
    
    

其中， app.controller("myController",function($scope)，$scope就是依赖注入。
推断式注入的形式参数必须是$scope；
声明式注入的形式参数可以是任意，但建议仍然用$scope，便于其他人阅读的时候理解。
数组的 0 到 倒数第二项 是该控制需要注入的模块，最后一项是回调函数。

建议一律使用声明式注入，代码压缩混淆后依然能正常运行。因为大部分情况的压缩混淆会把形式参数统一替换称a。