angular4.0笔记

96
洱月
2017.12.11 17:02 字数 462

你初学angular4.0,记录一下学习的零碎知识,以下对angular4.0都直接书写为ng

  • ng的核心思想是组件; react他的核心就是虚拟DOM

ng新特性

全新的命令行工具AngularCli
服务端渲染   //提升SEO效率
移动和桌面兼容 //angular material等插件

ng程序架构

  • 组件:是ng应用的基本构建快,是一段带有业务逻辑和数据的html

  • 模块用来将应用中不同的部分来组织成一个ng框架可以理解的单元

  • 指令:允许你想HTML元素添加自定义行为

  • 服务:用来封装可重用的业务逻辑

  • 总结:组件是用来实现功能的,模块是用来打包和分发这些功能的

项目初始目录下个文件的作用

  • e2e 做自动测试用
  • node_modules 放第三方依赖包
  • src 应用源代码目录
  • angular-cli.json 是ng命令行工具的配置,引用第三方包用,比如jq,bootstrap
  • karma.conf.js 单元测试的执行文件
  • package.json 标准的npm工具的配置文件
  • protractor.conf.js 自动测试的执行文件
  • src/app 放项目文件
  • src/assets 放图片之类的静态文件

组件 app.component.ts组件的构成//是整个应用的基础

  • @Component()组件元数据装饰器
    • 包含多个属性,这些属性的值,叫做元数据,ng根据属性的值来渲染组件,并执行组件的逻辑
    • 告诉ng框架如何处理一个typescript类
  • Template 模板 以html的形式存在
  • Controller 控制器, 是一个typescript类,写业务逻辑,通过数据绑定与模板进行通讯
  • @input() 输入属性
  • @Outputs输出属性
  • providers提供器
  • Lifecycle Hooks生命周期钩子
  • style样式表
  • animation 动画
  • @Injectable()在服务文件中使用 //可注射

模块 app.module.ts

//引入模块中需要的东西
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';   

import { AppComponent } from './app.component';
import { HeroDeatilComponent } from './hero-deatil/hero-deatil.component';


@NgModule({ //装饰器
  declarations: [//声明模块中的  组件/指令/管道
    AppComponent,//组件
    HeroDeatilComponent
  ],
  imports: [//需要的模块
    BrowserModule,//浏览器模块
    FormsModule   //表单模块
  ],
  providers: [],//声明模块中提供的服务
  bootstrap: [AppComponent] //声明模块主组件是什么
})
export class AppModule {}
专业
Web note ad 2