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

?　　

組件內容詳解：

　　

?

轉載于:https://www.cnblogs.com/wjw1014/p/10345651.html

總結

以上是生活随笔為你收集整理的Angular4.x 安装|创建项目|目录结构|创建组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。