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

     

    。。。。。。

    大山啊大山。。

     

    宝剑锋从磨砺出,梅花香自苦寒来。
  • 相关阅读:
    Kth Smallest Element in a BST
    Bitwise AND of Numbers Range
    Happy Number
    Summary Ranges
    linux设置MySQL开机自动启动
    基本PSO算法实现(Java)
    Invert Binary Tree
    Rectangle Area
    Contains Duplicate II
    Contains Duplicate
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/7119951.html
Copyright © 2011-2022 走看看