1.開發環境搭建
安裝node npm 確認安裝node -V npm -V
win10系統直接添加到環境變量里面去了 CMD里查看版本
我的電腦-屬性-高級系統設置
在webstorm里使用需要配置下nodejs
File -settings -Languages & Frameworks - Nodejs and NPM
找到node 開啟
Latest Current Version: v8.2.1 (includes npm 5.3.0)
不知道為啥開啟不了
重啟webstorm
file-settings
不明白為啥突然可以了
實例教學
下載快速起步種子 下載完解壓到項目目錄里 執行npm install
完成后
執行npm start
完整截圖下來也是不容易啊，然后瀏覽器直接打開了http://localhost:3000/
參考資料：
angular cli 快速搭建環境
確保node 和npm 已經安裝
npm install -g @angular/cli 卸載angular cli 的話 就是npm uninstall -g @angular/cli
創建新項目
ng new demo-name
進入項目目錄，啟動服務器
cd demo
ng serve --open
新建組件
ng g component component-name
這個目錄結構
啟動測試
ng test
開發angular
angular 4 接入bootstrap
npm查看已安裝的包
npm list
npm list -g 查看全局安裝包
卸載npm 包
npm uninstall 包名 --save
目錄下有package-lock.json改名為package.json在執行下面命令
執行完上面的命令 還是會出現package-lock.json 和package.json兩個文件 直接刪除即可
再次查詢即為刪除
angular 4 路由
使用angular cli 創建兩個組件component ,如A和B，
ng g component A
ng g component B
這個命令會自動添加到app.module.ts文件里
先添加
import { RouterModule } from '@angular/router';
在@NgModule({
declarations:[
AppComponent,
AComponent,
BComponent //這里就是自動添加上的，使用ng g component 名字 這個命令
]，
imports:[
BrowserModule,
RouterModule.forRoor([
{
path:'a',
component:AComponent //這里就是瀏覽器地址欄輸入 http://localhost/a 頁面直接進入組件AComponent里
},
{
path:'b',
component:BComponent //這里就是瀏覽器地址欄輸入 http://localhost/b 頁面直接進入組件BComponent里
}
])
]
})
效果圖：
然后在文件 D:\wamp\angular-cli-demo\demo\src\app\app.component.html 中，添加
<div>
<a routerLink="/admin">admin-routerLink</a>
<a routerLink="/production">production</a>
</div>
<router-outlet></router-outlet>
roterLink 注意第二個單詞大寫 最后要加上router-outlet
效果圖
由於首頁 D:\wamp\angular-cli-demo\demo\src\index.html 中
index.html 中的app-root
直接關聯在 D:\wamp\angular-cli-demo\demo\src\app\app.component.ts
所以內容都是在app.component.html里添加即可
使用*ngIf 進行條件顯示
作為提示信息還是不錯的比如 注冊表單時候的提示信息，插入刪除DOM來提示信息的
命令建立組件
ng g component 組件名稱
目錄結構
路由模塊
新建路由模塊 app.routing.module.ts 文件，引入NgModule、 RouterModule 、Routes 模塊 ，緊接着引入路由需要的組件 ；
定義常量路由規則 appRouter 這里有個問題：
默認顯示（也就是首頁）會調用404 沒有找到頁面的組件 匹配規則需要個默認首頁，現在的解決辦法是重定向路由，不過地址欄會顯示AppComonent ,需要解決辦法
寫好的路由規則 調用是在 @NgModule 里的imports用RoterModule下的forRoot方法調用 定義好的規則；
這時候需要去匹配需要設置app.module.ts 添加
/*引入路由模塊*/
import { AppRoutingModule} from "./app.routing.module";
imports里添加 AppRoutingModule
組件模板里設置如下（app.component.html）
angular cli 常用查詢命令
ng -v
常見問題：
1.angular cli 使用命名ng g component new-component時候，提示“Error: More than one module matches. Use skip-import option to skip importing the component into the closest module.”
出現這個的原因是出現了兩個module.ts文件
解決方法
ng g c new-component --module app
參考資料：
https://stackoverflow.com/questions/46174863/error-more-than-one-module-matches-use-skip-import-option-to-skip-importing-th
angular 4引用bootstrap 4
找到.angular-cli.json
D:\wamp\angular4\xxx\.angular-cli.json
在styles和scripts里添加
