angular入门（1.x）

angular.js:

教程可以作为跳板，因为vue也参考了angular的设计。

angular.js是google开源的前端js结构化框架

第一次学习结构化框架，它和函数库有什么区别呢？

比如jQuery中，安装之后，可以在编写js中有一个$符帮助我们去寻找特定的方法，方便记忆和使用（能够提高效率），在jQuery中所有的都是属于函数调用（对内容封装，给出api）。

 angular.js的特性和优点：

双向数据绑定

声明式依赖注入

解除耦合应有逻辑，数据模型和视图。（耦合度，会让开发比较困难，在不知情的情况下，容易牵一发而动全身）

完善的页面指令

定制表单验证

Ajax封装

 

与jQuery比较：

jQuery让开发更加方便了；{js函数库，封装简化dom操作}

 

angular：js结构化框架，主体不再是dom而是页面中动态的数据；（它相当于在页面和内存中建立连接，关注数据的动态变化）

 

angular能做什么项目：构建单页面(SPA)web应用，web app应用；应用（饿了么，淘宝，知乎周报等）；

 

单页面应用：

single page application'特点：

1.活动只局限在一个页面

2.当页面中有部分数据发生了变化不会刷新整个页面而是局部刷新

3.利用ajax技术，路由。

 

angular:语法1.x是javascript写的，新版使用typescript写的；（有依赖关系）

相当于属性一样的标记（监管动态数据，而不是dom操作）

ng-app告诉angular核心它管理当前标签所包含的整个区域，并且创建$rootScope根作用域对象

ng-model将当前输入框的值与谁相关联（属性名：属性值）,并作为当前作用域对象($rootScope)的属性；

{ {}}（表达式）:显示数据，从作用域对象的指定属性名上取；

1.表达式：通常有一个返回值，可以放在任何需要值得地方，比如函数调用的参数，一个是变量名，一个运算

2.语句：通常表示一个完整的执行单位，一段完整的js代码，有的语句可以使用表达式来执行，叫做表达式语句

3.区别：语句用分号结尾，有些语句我们没有加分号，比如console.log()虽然没有加分号，但也是语句；js引擎会自动加分号

4.特例：if语句就不用加分号，可也是一个完整的语句；    

 

 

双向数据绑定：

1.数据绑定：

数据从一个地方A转移到另一个地方B，而且让这个操作由框架来完成

 

2.双向数据绑定：数据可以从视图view流向model也可以从model流向view

view:也就是当前页面；（主要是angular指令和表达式）

model:作用域对象（$rootScope）,它可以包含一些属性或方法

当改变view中的数据，model对象的对应属性，也会随之改变，ng-model指令数据从view流向model

当model域对象属性发生变化时，页面对应随之更新{ {}}表达式，数据从model中流向view

 

3.ng-init初始化当前作用域变量；单向数据流动

 

作用域对象和控制器对象：

ng-controller:指定控制器构造函数，Angular会自动new此函数创建控制器对象

同时Angular还有创建一个新的作用域对象$scope，它是$rootScope的子对象。（只限于这个ng-controller作用域，但是在这种作用域中，可以向全局的作用域中获取对象。）

在控制器函数中声明$scope形参，Angular会自动将$scope传入

 

 

依赖对象：

完成某个特定的功能，需要某个对象才能实践，这个对象就是依赖对象。

 

依赖注入：依赖的对象以形参的 形式被注入进来使用，这种方式就是依赖注入（声明式）。

 

angular的$scope就是依赖对象，并且是依赖注入的形式进行使用，

！形参必须是特定的名称，否则Angular无法注入抛出异常。

 

回调函数的event的就是依赖对象

回调函数有形参就是依赖注入；

 

 

依赖注入：

声明式依赖注入：更加注重执行的结果

对命令结构进行局部包装

 

命令式依赖注入