前者小白之每一天上学记录,angular学习笔记1

1.1 Angular的提升历史 

Angular发展史:

1.1.1 angular起源

12年,angularJS1.0.0规范版推出:亮点成效核心齐备,如双向绑定、注重注入、指令等;

GetAngular ====>by Misko Hevery and Adam Abrons 开发功能高 AnguarJS

AngularJS1.3.x遗弃扶助IE8,推出了单次绑定语法;

1.1.2 迭代之路

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

12年7月 AngularJS 1 ===》双向绑定、重视注入、指令

 

AngularJS 1.3.x====》推出单次绑定语法 吐弃ie8浏览器支持

Angular1.x困境:

AngularJS 1.5.x =====》扩展了近乎组件的书写体验

属性难点、落后于最近web发展意见,如组件式开发格局、对手提式有线电话机端协助不够自身

1.1.3 AngularJS 1.x困境

 

属性难题

Angular2新特性:

ca88手机版登录网页,落后于当下web发展理念===》组件开发形式

移除controller+$scope设计,改用组件式开发,更易上手;

对手提式无线电话机端扶助不够自身

属性更好(渲染更快,变化检查和测试作用更高);

1.1.4 Angular 2 诞生

预先为运动应用设计,如angular Mobile Toolkit插件;

二〇一六年二月亮相  测试版本

进一步贴合今后的设计,如ES⑥ 、webComponent

二零一四年10月1二10日,Angular 2 行业内部版发布==》不匹配AngulularJS

 

1.1.5新特性

Angular2无缝升级方案-UpgradeAdapter

移除controller+$scope设计,改用组件式开发

由此Upgrade艾达pter,将angular2的组件化代码加载到angular1代码中

质量更好

 

事先为运动应用(专用开发套件:Angular Moblie Toolkit)

 

更贴合以往正式(es6/⑦ 、WebComponnent)

Angular2核心:

1.1.6 无缝升级方案-UpgradeAdapter

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

适配器:Angular 2 《===》AngularJS 1.x

 

1.2  Angular2的核心概念详解

种种组件都能不负众望各自的独门功能,如贰个报导录页面能够当做最大的机件,上面由三个子组件组合,包蕴尾部、联系人有的、尾部,而关系人有的又席卷广大牵连人,每贰个牵连人部分都得以看作一个更小的机件。组件能够经过JavaScript、HTML、css完毕。

八组:组件(component)(最核心)、元数据(metadata)、模板(template)、

 

          数据绑定(data
binding)、服务(service)、指令(directives)、

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

          重视注入(dependency
injection)、模块(modules)

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

1.2.1 组件

 

html+css+js

总体的生命周期钩子

父子组件

全生命周期帮忙:

生命周期:

Constructor   构造器起头化

结构器初阶化(constructer)==》第3次接触数据变化钩子(onChangers)==》开首化(onInit)==》运转时期接触数据变动钩子(onChanges
)==》销毁(onDestroy)

OnChanges    第二次接触数据变动钩子

1.2.2 指令

OnInit        组件开首化

 

OnChanges    运营期间接触数据变动钩子

OnDestroy     组件销毁前

 ca88手机版登录网页 1

 

 

元数据与装饰类:

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

装饰器赋予三个类更拉长的消息,而以此新闻正是元数据

 ca88手机版登录网页 2

 ca88手机版登录网页 3

 

 ca88手机版登录网页 4

 ca88手机版登录网页 5

 ca88手机版登录网页 6

 

 ca88手机版登录网页 7

 

 ca88手机版登录网页 8

 

 ca88手机版登录网页 9

 

组件是持续于指令,但组件自个儿是含有模板的,而下令没有。

 ca88手机版登录网页 10

 

ca88手机版登录网页 11

 

ca88手机版登录网页 12

ElementRef用来取得模板对象的引用;Renderer起到援助渲染的效应,跟DOM有关,,做一层包装是为着与dom解耦,能够适用于非浏览器的场景,如服务器端渲染。

 

 

服务:

 ca88手机版登录网页 13

劳务能够知晓为一般的服务类,服务类里定义了有的函数

 

依靠注入,是组件引入外部创设的一种机制,最常用的是劳务,实际上引用的是以此服务类的实例。管理实例化就是依靠注入所完毕的。

 ca88手机版登录网页 14

 

 

 ca88手机版登录网页 15

 

 ca88手机版登录网页 16

模块:

 ca88手机版登录网页 17

 

 ca88手机版登录网页 18

 ca88手机版登录网页 19

      ca88手机版登录网页 20 
  ca88手机版登录网页 21

 

 

行使模块,对零散的零件、指令、服务开展包装。在私下认可情状下,叁个零部件不可能平素动用任何零件,也无法直接使用其余指令的效率,,要利用必须起头入,而以此导入进程正是选取模块所达成的。同意模块内的零部件能够选用同模块内的别样零件、指令等,而跨模块的机件间不能够相互采用,若要跨模块使用,则要结成模块的导入导出功用。

功效到模块里的服务,能够在利用全局里采用,而注入到零部件的,则不得不在该器件及它的子组件里使用。

导入其余模块时,则足以选取任何模块暴透露来的机件和值等。

 ca88手机版登录网页 22

 

 

模块间涉及:

 ca88手机版登录网页 23

 

Ps:服务并不在导入导出的局面内。模块里注入的服务是大局的。由此,只要在某些模块内注入服务,则该服务就能够使用在应用模块的保有组件内。

Ps:文件模块关切的是代码层面,应用模块关怀的是职能范围。

 

Angular2要想成功的运维,至少要定义贰个模块。因为急需贰个模块,作为利用运营的入口.

 ca88手机版登录网页 24

 

ca88手机版登录网页 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在编写翻译时会分析并认清理与运输行时的变量类型,借使判断运营时的门类与定义时的项目差异,则会抛出编写翻译错误;

 ca88手机版登录网页 26

 

 ca88手机版登录网页 27

TypeScript提供了另一种独有的特点,便是装饰器。                   

 ca88手机版登录网页 28

 

 

 ca88手机版登录网页 29

 

 

 

 

Webpack把品种中用到的静态能源都说是模块,模块之间会相互正视,当大家钦点3个进口模块后,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

 

。。。。。。

大山啊大山。。

 

相关文章

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图