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

Angular2一小时快速入门

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

    (1)通讯前提:定义输入属性,它是通过input装饰器来修饰的。导入:

    import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'

    (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)")


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

    2019-07-02

  • 服务使用

    (1)建立xxx.service.ts

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

    (3)在组件导入服务类


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

    2019-07-02

  • 自定义指令使用

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

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

     constructor(el : ElementRef, render : Renderer){

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

    }

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

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


    查看全部
  • 1. ngIf指令用于插入或移除dom节点

    <p *ngIf="isShowMore">Angular2</p>

    2. [(ngModel)]="isShowMore"   定义绑定信息,双向绑定指令,使用的时候需要引入“@angular/forms”,如下:

    import {FormsModule} from "@angular/forms"

    查看全部
    0 采集 收起 来源:内置指令使用

    2019-07-02

  • (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 采集 收起 来源:项目启动

    2019-07-02

  • webpack.config.js

    查看全部
    0 采集 收起 来源:开发环境准备

    2019-07-02

  • webpack

    查看全部
    0 采集 收起 来源:开发环境准备

    2019-07-02

  • Angular的装饰器

    https://img1.sycdn.imooc.com//5d1196b50001733a07620555.jpg

    查看全部
    0 采集 收起 来源:TypeScript简述

    2019-06-25

  • 装饰器的说明

    https://img1.sycdn.imooc.com//5d1196400001191309380544.jpg

    查看全部
    0 采集 收起 来源:TypeScript简述

    2019-06-25

  • TypeScript与面向对象结合点多

    https://img1.sycdn.imooc.com//5d1195dd0001e69f07830598.jpg

    查看全部
    0 采集 收起 来源:TypeScript简述

    2019-06-25

  • TypeScript的例子

    https://img1.sycdn.imooc.com//5d11957c00011da608230552.jpg

    查看全部
    0 采集 收起 来源:TypeScript简述

    2019-06-25

  • 核心的内容展示

    https://img1.sycdn.imooc.com//5d1194740001e1a709230628.jpg

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

    2019-06-25

  • 一个Angular由多个模块组成

    https://img1.sycdn.imooc.com//5d1192b30001bf4610390603.jpg

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

    2019-06-25

  •                                                     应用模块的交互

    https://img1.sycdn.imooc.com//5d1192b30001bf4610390603.jpg

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

    2019-06-25

  • TypeScript的装饰器

    查看全部
    0 采集 收起 来源:TypeScript简述

    2019-06-20

举报

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

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

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