为了账号安全,请及时绑定邮箱和手机立即绑定

Angular2一小时快速入门

难度中级
时长 1小时11分
学习人数
综合评分9.63
87人评价 查看评价
9.9 内容实用
9.5 简洁易懂
9.5 逻辑清晰
  • 元数据


    selector参数:CSS标签选择器


    template参数:用于定义组件的模板,一个组件只能使用一个模板.


    *如果使用外部模板则通过URL的形式进行引入.



    自定义模板则涉及数据绑定的概念.


    数据绑定方式


    1.插值(适用于自身模板与组件类中的数据绑定) 


    直接使用组件类中的属性.


    templage: <p>{{属性名}}</p>



    2.属性绑定(适用于父组件的模板往子组件类中数据的绑定)



    <ele [子组件属性名]="data">



    3.事件绑定(适用于子组件的模板往父组件类中数据的绑定)


    把子组件的模板里产生的数据通过函数调用的方式传递到父组件类中.


    <input (keyup) = "handle($event)">


    *当keyup事件触发时则调用组件实例中的handle方法.



    4.双向绑定


    实现数据的双向流动


    <input [(ngModel)] = "属性名">


    查看全部
    0 采集 收起 来源:组件及组件树

    2018-08-21

  • Angular的组件由Component装饰器以及组件类组成.


    组件的业务逻辑都是在组件类中进行编写.


    组件=Component装饰器+组件类



    装饰器的语法


    @装饰器名({参数名:参数值})


    *装饰器中的元素叫做元数据




    组件类的语法


    export class 组件类名{


    private 属性名: 属性类型

    //构造器

    constructor(){

             this.属性名 = 'Hello World';

    }


    }



    *装饰器的作用是将元数据注入到组件类中.


    当定义了组件类后,Augular并不知道怎么解析这个类,如果在类中使用装饰器进行修饰,那么装饰器就会在运行的时候把其元数据中的参数注入到组件类中,此时Angular就能识别出组件类.


    查看全部
    0 采集 收起 来源:组件及组件树

    2018-08-21

  • 组件的生命周期


    Constructor(构造器):用于对组件中的元素进行初始化操作--》第一次OnChanges事件被触发(用于接收父组件传入的数据)--》组件初始化阶段--》运行间OnChanges事件被触发--》组件销毁时触发OnDestroy


    *只要组件的输入数据发生变化既会触发一次OnChange事件.


    查看全部
    0 采集 收起 来源:组件及组件树

    2018-08-21

  • 组件与组件之间通过树形结构进行关联,每个组件都能设置输入和输出属性来构造关系,负责与上下游的组件进行交互.

    查看全部
    0 采集 收起 来源:组件及组件树

    2018-08-21

  • 页面由不同的组件渲染组成,每个组件都有自己的JavaScript逻辑、html元素、css样式,每个组件都能完成各自的功能.

    查看全部
    0 采集 收起 来源:组件及组件树

    2018-08-21

  • 文件模块使用

    查看全部
    0 采集 收起 来源:模块

    2018-08-16

  • 文件模块Module


    查看全部
    0 采集 收起 来源:模块

    2018-08-16

  • 自定义指令

    查看全部
    0 采集 收起 来源: 指令

    2018-08-16

  • 数据绑定方式

    查看全部
    0 采集 收起 来源:组件及组件树

    2018-08-16

  • 模板 template

    查看全部
    0 采集 收起 来源:组件及组件树

    2018-08-16

  • 插值interpolation


    查看全部
    0 采集 收起 来源:组件及组件树

    2018-08-16

  • 父子组件通讯

    (1)通讯前提:定义输入属性

    (2)首先接收数据则导入Input装饰器,发送数据则导入Output,EventEmitter

    (3)使用Input装饰器

    @Input() private message : string;

    发送端设置:[message]="msgToChild"

    (4)使用Output装饰器

    声明:@Output() private outer = new EventEmitter<string>();

    发送数据:outer.emit('something');

    接收端接收代码:(outer="receive($event)")

    查看全部
    1 采集 收起 来源:父子组件通讯

    2018-08-15

  • 服务使用

    (1)建立xxx.service.ts

    (2)在模块(app.module.ts)中引入,同时在providers中注入依赖(引入服务)

    (3)在组件导入服务类

    查看全部
    0 采集 收起 来源:服务使用

    2018-08-14

  • 自定义指令使用

    (1)建立xxx.directive.ts文件,在@Directive下的selector中声明标签名。

    (2)通过导入ElementRef、Renderer辅助元素的渲染

     constructor(el : ElementRef, render : Renderer){

     render.setElementStyle(el.nativeElement, 'backgroundColor','yellow');

    }

    (3)在模块中引入指令,同时在declarations中引入指令。

    (4)在组件中通过标签名引用自定义指令

    查看全部
  • (1)tsconfig.json :typeScript编译器的配置文件

    (2)代码放在app目录下

    (3)组件文件xxx.component.ts

    (4)selector声明标签名,templateUrl声明外链模版文件

    (5)模块文件xxx.module.ts

    (6)模块文件中在declarations,bootstrap将【组件】定义到模块里

    (7)启动文件main.ts,将声明的模块导入到这个文件,通过platformBrowserDynamic()动态引导启动,最后在这里导入依赖库

    reflect-metadata(动态引导),zone.js(浏览器异步事件)

    (8)在webpack.config.js声明上述的启动文件的路径,在index.html通过script引入webpack.config.js打包出来的bundle.js(<script src="./bundle.js"></script>)

    (9)在index.html中使用根组件my-app

    查看全部
    0 采集 收起 来源:项目启动

    2018-08-14

举报

0/150
提交
取消
课程须知
1、对ES6基础知识已经掌握。
老师告诉你能学到什么?
1、Angular 的诞生起源 2、AngularJS 1.x的迭代之路及其痛点 3、Angular2 的新特性 4、Angular2 的八大核心概念(组件、元数据、模板、数据绑定、指令、服务、依赖注入、模块) 5、TypeScript 基础 6、基于 webpack 的 Angular2 项目搭建

微信扫码,参与3人拼团

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!