Angular4.x 安裝|建立項目|目錄結構|建立組件

Angular4.x 安裝|建立項目|目錄結構|建立組件

---

安裝最新版本的 nodejs

node.js 官網：https://nodejs.org/zh-cn/

　　

去官網下載 node.js，下一步下一步就能夠了。只要 node.js 安裝成功，那麼 npm 也會幫你安裝完成！

注意：請先在終端/控制檯窗口中運行命令 node -v 和 npm -v， 來驗證一下你正在運行 node 6.9.x 和 npm 3.x.x 以上的版本。 更老的版本可能會出現錯誤，更新的版本則沒問題。

 　　

全局安裝 Angular CLI 手腳架工具（只需安裝一次）

使用 npm 命令安裝

npm install -g @angular/cli

　　

　　若是安裝失敗，接着往下看！！！

安裝 cnpm

 npm 可能安裝失敗，建議使用 npm 安裝一下 cnpm 用淘寶鏡像安裝。https://npm.taobao.org/

npm install -g cnpm --registry=https://registry.npm.taobao.org

 使用 cnpm 命令安裝

cnpm install -g @angular/cli

建立項目

打開 cmd 找到建立項目的目錄

 

假如在桌面的 AngularStudy 目錄下建立一個項目，先進入到目錄下。

　　

建立項目

ng new 項目名稱  建立一個項目

ng new my-app

　　

進入剛纔建立的項目裏面，啓動服務。

cd my-app

　　

npm install //安裝依賴

　　

ng serve --open

　　

一系列操做完成以後，他會幫助咱們把新建立的項目在瀏覽器中運行起來！

　　　　

注意： 若是在運行 npm install 以後報錯，刪除項目文件夾中的整個 node_modules文件夾，而後從新運行 npm install 命令從新安裝依賴，若是再不行，用 cnpm 命令安裝。

導入編輯器

 我喜歡 VScode 因此導入裏面很容易。

文件 -> 打開文件件 -> 選擇項目文件夾，肯定！

 　　　　

Angular目錄結構

表 * 的注意！其餘的瞭解就好。

Hello Angular 4.0 以及 app.module.ts、組件分析

 定義 AppModule，這個根模塊會告訴 Angular 如何組裝該應用。 目前，它只聲明瞭 AppComponent。 稍後它還會聲明更多組件。

 　　

　　

自定義組件

https://github.com/angular/angular-cli

ng g component components/header

 　　

組件內容詳解：