zoukankan      html  css  js  c++  java
  • 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     组件销毁前

     

     

    元数据与装饰类:

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

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

     

     

     

     

     

     

     

     

     

     

     

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

     

    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

     

    。。。。。。

    大山啊大山。。

     

    宝剑锋从磨砺出,梅花香自苦寒来。
  • 相关阅读:
    Delphi XE5 android 蓝牙通讯传输
    Delphi XE5 android toast
    Delphi XE5 android openurl(转)
    Delphi XE5 如何设计并使用FireMonkeyStyle(转)
    Delphi XE5 android 捕获几个事件
    Delphi XE5 android listview
    Delphi XE5 android 黑屏的临时解决办法
    Delphi XE5 android popumenu
    Delphi XE5 android 获取网络状态
    Delphi XE5 android 获取电池电量
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/7119951.html
Copyright © 2011-2022 走看看