angular学习笔记1

Angular发展史:

12年,angularJS1.0.0标准版推出:亮点功能为主全,如双向绑定、依赖注入、指令等;

AngularJS1.3.x放弃支持IE8,推出了单次绑定语法;

AngularJS1.5.x长类似组件式书写体验,主要也过渡angular2做铺垫;

 

Angular1.x困境:

特性问题、落后于当下web发展意见,如组件式开发方式、对手机端支持非敷自己

 

Angular2新特性:

移除controller+$scope设计,改用组件式开发,更爱达到亲手;

性再好(渲染再快,变化检测效率还胜似);

优先为走使用设计,如angular Mobile Toolkit插件;

尤为贴合未来底宏图,如ES6、webComponent

 

Angular2无缝升级方案-UpgradeAdapter

经过UpgradeAdapter,将angular2的组件化代码加载到angular1代码中

 

 

Angular2核心:

零件(最重点)、元数据、模板、数据绑定、服务、指令、依赖注入、模块

 

每个组件都能够好各自的独门力量,如一个报道录页面可以当做最充分之零部件,下面由3单子组件做,包括头部、联系人有的、尾部,而沟通人有还要连多联络人,每一个联系人有些还足以视作一个又有些之零部件。组件可以由此JavaScript、HTML、css实现。

 

父组件=》子组件(通过输入接口)

子组起=》父组件(通过输出接口)

 

总体的生命周期钩子

净生命周期支持:

Constructor   构造器初始化

OnChanges    第一破沾数据变动钩子

OnInit        组件初始化

OnChanges    运行期间接触数据变化钩子

OnDestroy     组件销毁前

 图片 1

 

 

老大数据以及装饰类:

普通类=>装饰器=>组件

装饰器赋予一个好像更增长的消息,而之信息就是初数据

 图片 2

 图片 3

 

 图片 4

 图片 5

 图片 6

 

 图片 7

 

 图片 8

 

 图片 9

 

组件是延续给令,但组件自身是带有模板的,而令没有。

 图片 10

 

图片 11

 

图片 12

ElementRef用来收获模板对象的援;Renderer起及救助渲染的企图,跟DOM有关,,做一样重合包装是为和dom解耦,可以适用于未浏览器的状况,如服务器端渲染。

 

 

服务:

 图片 13

服务好掌握吧常见的服务类,服务类里定义了有的函数

 

仗注入,是组件引入外部构建的一致种植机制,最常用的凡服务,实际上引用的是是服务类的实例。管理实例化正是靠注入所实现的。

 图片 14

 

 

 图片 15

 

 图片 16

模块:

 图片 17

 

 图片 18

 图片 19

      图片 20 
  图片 21

 

 

采用模块,对零散的机件、指令、服务进行打包。在默认情况下,一个零部件不可知直接用另外零件,也非克一直以任何指令的法力,,要运用得优先导入,而者导入过程尽管是采用模块所实现的。同意模块内之零部件可以以和模块内之其它零件、指令等,而超模块的零部件间不能够互相利用,若使超越模块使用,则只要组成模块的导入导出功能。

打算及模块里之服务,可以以用全局里使用,而注入到零部件的,则不得不在该器件和她的子组件里应用。

导入外模块时,则好采取另外模块暴露出的机件和价值当。

 图片 22

 

 

模块间事关:

 图片 23

 

Ps:服务并无在导入导出的层面内。模块里注入的劳务是大局的。因此,只要在某某模块内注入服务,则该服务就是足以应用于用模块的保有组件内。

Ps:文件模块关注的是代码层面,应用模块关注的凡成效范围。

 

Angular2要想成之运行,至少要定义一个模块。因为要一个模块,作为利用启动之入口.

 图片 24

 

图片 25

 

 

 

Ps:与用户一直互动的是模板,模板接收来自用户之操作,通过数量绑定与相应之零件类进行互,组件类就数据处理后更新模板视图,来申报给用户.组件处于angular2比较基本的有,而服务与下令都当做扶持

 

 

行是检查真理的唯一标准:

TypeScript:微软出之编程语言,JavaScript的超集,兼容JavaScript;运行前需要编译生成JavaScript代码,因为TypeScript不能够一直当浏览器中运行.;加入类型判断,编译时开展项目检查;TypeScript有温馨的文本扩展名.ts

eg.

var book: string = “Angular 2”;

var num: number = 123;

 

function log(msg: string): void{

   console.log(msg);

}

 

TypeScript在编译时会分析并判断运行时之变量类型,如果判断运行时的类及概念时之路不一样,则会废弃来编译错误;

 图片 26

 

 图片 27

TypeScript提供了别一样种独有的特性,即是装饰器。                   

 图片 28

 

 

 图片 29

 

 

 

 

Webpack将品种遭到之所以到的静态资源都实属模块,模块之间会相互依赖,当我们指定一个进口模块后,webpack会挖掘出以这个进口模块为彻底节点的普依赖模块链,从而把此依赖链打包到一个文件里,然后不同的模块会调用不同之解释器(在webpack里叫loader),这些loader需要自己手动配置,这些安排当文书webpack.configure.js(webpack的要紧配备文件)文件里,

 

 

git下安装:

$ npm install angular

$ npm install style-loader css-loader url-loader sass-loader raw-loader

$ npm install ts-loader

$ npm install @angular/common @angular/compiler @angular/compiler-cli
@angular/core @angular/forms @angular/http @angular/platform-browser
@angular/platform-browser-dynamic @angular/platform-server
@angular/router @angular/animations typescript –save

 

cmd管理员模式下全局安装:

 

npm install webpack -g

cnpm install typescript -g

 

新建webpack.config.js

新建tsconfig.json

新建index.html

新建app文件夹

新建app.component.ts

……

当运行npm start,命令执行出现bundle is now valid,则意味着代码编译成功。

 

 2.x晋级也4.x,只需要创新依赖,运行npm serve或npm start

npm
install @angular/common@latest @angular/compiler@latest
@angular/compiler-cli@latest @angular/core@latest @angular/forms@latest
@angular/http@latest @angular/platform-browser@latest
@angular/platform-browser-dynamic@latest @angular/platform-server@latest
@angular/router@latest @angular/animations@latest typescript@latest
–save

 

参考:

http://www.imooc.com/learn/789

http://geek.csdn.net/news/detail/193631?utm\_source=tuicool&utm\_medium=referral

 

。。。。。。

大山啊大山。。

 

相关文章