angular 4 開發總結

1.開發環境搭建

安裝node npm 確認安裝node -V npm -V

版本要求

nodejs下載地址

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/

 

 

參考資料：

 

webstorm 相關nodejs設置

 

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裏添加