AngularJSangular学习笔记1

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

Webpack把品种中用到的静态能源都算得模块,模块之间会互相珍惜,当大家内定二个入口模块后,webpack会挖掘出以这些进口模块为根节点的全方位重视模块链,从而把这一个着重链打包到贰个文本里,然后不一样的模块会调用不一样的解释器(在webpack里称为loader),这几个loader须要团结手动配置,那个安插在文件webpack.configure.js(webpack的关键布署文件)文件里,

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

Ps:与用户一贯互动的是模板,模板接收来自用户的操作,通过数据绑定与相应的零部件类进行相互,组件类成就数据处理后更新模板视图,来反映给用户.组件处于angular2相比基本的局地,而服务和下令都作为协助

 AngularJS 1

 

Angular发展史:

 AngularJS 2

 

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

 AngularJS 3

}

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

npm install webpack -g

推行是考查真理的唯一标准:

 

新建app.component.ts

 

Angular2核心:

ElementRef用来收获模板对象的引用;Renderer起到帮助渲染的效劳,跟DOM有关,,做一层包装是为了与dom解耦,可以适用于非浏览器的现象,如服务器端渲染。

 2.x升迁为4.x,只需立异注重,运维npm serve或npm start

 AngularJS 4

OnInit        组件伊始化

 AngularJS 5

 

功能到模块里的劳务,可以在行使全局里使用,而注入到零部件的,则不得不在该零件及它的子组件里采用。

 

Angular1.x困境:

 

属性问题、落后于当下web发展理念,如组件式开发形式、对手机端协理不够自个儿

凭借注入,是组件引入外部打造的一种机制,最常用的是劳动,实际上引用的是那一个服务类的实例。管理实例化正是凭借注入所已毕的。

 

AngularJS 6

元数据与装饰类:

参考:

eg.

 

$ npm install ts-loader

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

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

 

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

 AngularJS 7

 

 

 

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

大山啊大山。。

模块:

 

 

 

 

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

 

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

完全的生命周期钩子

质量更好(渲染更快,变化检测功效更高);

TypeScript在编译时会分析并认清运维时的变量类型,如果判断运转时的项目与概念时的项目不平等,则会抛出编译错误;

运用模块,对零散的零件、指令、服务拓展包装。在暗许景况下,3个零件无法一贯运用任何零件,也不可能直接行使其余指令的功用,,要拔取必须伊始入,而这么些导入进度就是运用模块所完毕的。同意模块内的机件可以运用同模块内的其余零件、指令等,而跨模块的零件间不可以相互利用,若要跨模块使用,则要整合模块的导入导出功能。

越来越贴合现在的安插,如ES陆 、webComponent

 

新建index.html

 AngularJS 8

      AngularJS 9 
  AngularJS 10

 

Ps:服务并不在导入导出的规模内。模块里注入的劳动是大局的。因而,只要在有个别模块内注入服务,则该服务就足以运用在运用模块的拥有组件内。

 

var num: number = 123;

 AngularJS 11

新建tsconfig.json

新建webpack.config.js

OnChanges    第1遍接触数据变动钩子

 AngularJS 12

……

 

 

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

服务可以清楚为日常的服务类,服务类里定义了某些函数

 

cnpm install typescript -g

 AngularJS 13

 

Angular2新特性:

 

AngularJS 14

 

 

模块间关系:

 AngularJS 15

 

 

 

 

装饰器赋予二个类更增进的音信,而以此信息就是元数据

 

 

种种组件都能到位各自的单身功效,如三个报导录页面可以看作最大的零件,下边由贰个子组件组合,包涵底部、联系人有的、底部,而沟通人部分又席卷过多关联人,每一个关联人有的都足以当作1个更小的组件。组件能够透过JavaScript、HTML、css完成。

AngularJS 16

 

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

零件是延续于指令,但组件本身是富含模板的,而下令没有。

function log(msg: string): void{

导入其余模块时,则足以选取其他模块暴光出来的机件和值等。

 

 

 AngularJS 17

 

git下安装:

 

 AngularJS 18

   console.log(msg);

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

 AngularJS 19

 AngularJS 20

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

 AngularJS 21

 

 

var book: string = “Angular 2”;

 

。。。。。。

 AngularJS 22

 

 AngularJS 23

 AngularJS 24

 

因此UpgradeAdapter,将angular2的组件化代码加载到angular1代码中

 

 AngularJS 25

 

12年,angularJS1.0.0正规版推出:亮点功用为主齐备,如双向绑定、倚重注入、指令等;

 

 

 

 AngularJS 26

TypeScript:微软开发的编程语言,JavaScript的超集,包容JavaScript;运营前需编译生成JavaScript代码,因为TypeScript无法从来在浏览器中运营.;出席类型判断,编译时开展项目检查;TypeScript有和好的文书扩大名.ts

$ 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

Angular2无缝升级方案-UpgradeAdapter

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

$ npm install angular

 

 

 AngularJS 27

 

 

 AngularJS 28

OnDestroy     组件销毁前

全生命周期帮助:

新建app文件夹

服务:

 

Constructor   构造器开始化

 AngularJS 29

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

OnChanges    运行时期接触数据变动钩子

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

相关文章