你初學(xué)angular4.0，記錄一下學(xué)習(xí)的零碎知識(shí)，以下對(duì)angular4.0都直接書(shū)寫(xiě)為ng
- ng的核心思想是組件； react他的核心就是虛擬DOM
ng新特性
全新的命令行工具AngularCli
服務(wù)端渲染 //提升SEO效率
移動(dòng)和桌面兼容 //angular material等插件
ng程序架構(gòu)
組件：是ng應(yīng)用的基本構(gòu)建快，是一段帶有業(yè)務(wù)邏輯和數(shù)據(jù)的html
模塊用來(lái)將應(yīng)用中不同的部分來(lái)組織成一個(gè)ng框架可以理解的單元
指令：允許你想HTML元素添加自定義行為
服務(wù)：用來(lái)封裝可重用的業(yè)務(wù)邏輯
總結(jié):組件是用來(lái)實(shí)現(xiàn)功能的，模塊是用來(lái)打包和分發(fā)這些功能的
項(xiàng)目初始目錄下個(gè)文件的作用
- e2e 做自動(dòng)測(cè)試用
- node_modules 放第三方依賴(lài)包
- src 應(yīng)用源代碼目錄
- angular-cli.json 是ng命令行工具的配置，引用第三方包用，比如jq,bootstrap
- karma.conf.js 單元測(cè)試的執(zhí)行文件
- package.json 標(biāo)準(zhǔn)的npm工具的配置文件
- protractor.conf.js 自動(dòng)測(cè)試的執(zhí)行文件
- src/app 放項(xiàng)目文件
- src/assets 放圖片之類(lèi)的靜態(tài)文件
組件 app.component.ts組件的構(gòu)成//是整個(gè)應(yīng)用的基礎(chǔ)
- @Component（）組件元數(shù)據(jù)裝飾器
- 包含多個(gè)屬性，這些屬性的值，叫做元數(shù)據(jù)，ng根據(jù)屬性的值來(lái)渲染組件，并執(zhí)行組件的邏輯
- 告訴ng框架如何處理一個(gè)typescript類(lèi)
- Template 模板 以html的形式存在
- Controller 控制器， 是一個(gè)typescript類(lèi)，寫(xiě)業(yè)務(wù)邏輯，通過(guò)數(shù)據(jù)綁定與模板進(jìn)行通訊
- @input() 輸入屬性
- @Outputs輸出屬性
- providers提供器
- Lifecycle Hooks生命周期鉤子
- style樣式表
- animation 動(dòng)畫(huà)
- @Injectable()在服務(wù)文件中使用 //可注射
模塊 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: [],//聲明模塊中提供的服務(wù)
bootstrap: [AppComponent] //聲明模塊主組件是什么
})
export class AppModule {}
