angular学习笔记1

Angular发展史：

12年，angularJS1.0.0正式版推出：亮点功能基本齐备，如双向绑定、依赖注入、指令等；

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

AngularJS1.5.x增长相似组件式书写体验，主要为过渡angular2作铺垫；

 

Angular1.x困境：

性能问题、落后于当前web发展理念，如组件式开发方式、对手机端支持不够友好

 

Angular2新特性：

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

性能更好（渲染更快，变化检测效率更高）；

优先为移动应用设计，如angular Mobile Toolkit插件；

更加贴合将来的设计，如ES六、webComponent

 

Angular2无缝升级方案-UpgradeAdapter

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

 

 

Angular2核心：

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

 

每一个组件都能完成各自的独立功能，如一个通信录页面能够当作最大的组件，下面由3个子组件构成，包括头部、联系人部分、尾部，而联系人部分又包括好多联系人，每个联系人部分均可以当作一个更小的组件。组件能够经过JavaScript、HTML、css实现。

 

父组件=》子组件（经过输入接口）

子组件=》父组件（经过输出接口）

 

完整的生命周期钩子

全生命周期支持：

Constructor   构造器初始化

OnChanges    第一次触发数据变化钩子

OnInit        组件初始化

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

OnDestroy     组件销毁前

 

 

 

元数据与装饰类：

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

装饰器赋予一个类更丰富的信息，而这个信息就是元数据

 

 

 

 

 

 

 

 

 

 

 

 

 

组件是继承于指令，但组件自身是带有模板的，而指令没有。

 

 

 

ElementRef用来获取模板对象的引用；Renderer起到辅助渲染的做用，跟DOM有关，，作一层包装是为了与dom解耦，能够适用于非浏览器的场景，如服务器端渲染。

 

 

服务：

 

服务能够理解为普通的服务类，服务类里定义了一些函数

 

依赖注入，是组件引入外部构建的一种机制，最经常使用的是服务，实际上引用的是这个服务类的实例。管理实例化正是依赖注入所实现的。

 

 

 

 

 

 

模块：

 

 

 

 

          

 

 

应用模块，对零散的组件、指令、服务进行包装。在默认状况下，一个组件不能直接使用其余组件，也不能直接使用其余指令的功能，，要使用必须先导入，而这个导入过程就是应用模块所实现的。赞成模块内的组件能够使用同模块内的其余组件、指令等，而跨模块的组件间不能相互使用，若要跨模块使用，则要结合模块的导入导出功能。

做用到模块里的服务，能够在应用全局里使用，而注入到组件的，则只能在该组件及它的子组件里使用。

导入其余模块时，则能够使用其余模块暴露出来的组件和值等。

 

 

 

模块间关系:

 

 

Ps：服务并不在导入导出的范畴内。模块里注入的服务是全局的。所以，只要在某个模块内注入服务，则该服务就能够使用在应用模块的全部组件内。

Ps：文件模块关注的是代码层面，应用模块关注的是功能层面。

 

Angular2要想成功的运行，至少要定义一个模块。由于须要一个模块，做为应用启动的入口.

 

 

 

 

 

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在编译时会分析并判断运行时的变量类型，若是判断运行时的类型与定义时的类型不同，则会抛出编译错误；

 

 

 

TypeScript提供了另外一种独有的特性，便是装饰器。                   

 

 

 

 

 

 

 

 

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

 

。。。。。。

大山啊大山。。