angular4.0笔记

你初学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 {}