1. 程式人生 > >Angular總結一:環境搭建

Angular總結一:環境搭建

ets jquery lar 文件 command baidu gitignore 執行 jet

工欲善其事必先利其器,開發 Angular 項目首先要搭建環境。Angular 的環境搭建包括三個方面,開發環境 WebStorm,命令行工具 Angular CLI,以及 nodejs。

一、安裝 nodejs

進入到 nodejs 的官網 https://nodejs.org/en/ 去下載安裝包,下載慢的同學可以去我的百度網盤下載:https://pan.baidu.com/s/1mkilULq 密碼:uaf7

技術分享圖片

根據電腦操作系統推薦了不同的版本,這裏可以選擇以上兩個中的其中一個,下載完成後是一個 msi 文件

技術分享圖片

右鍵選擇安裝

技術分享圖片

然後一路點擊Next就行了。

安裝完成後,運行cmd打開命令行工具,輸入 node -v

如果出現版本號,就說明nodejs安裝成功了。安裝nodejs的同時,nodejs的包管理器npm也一並安裝完成了。

技術分享圖片

二、安裝 Angular命令行工具 Angular CLI

CLI 是 Command Line Interface 的簡寫,是一種命令行接口,實現自動化開發流程,比如:ionic cli, vue cli 等,它可以創建項目、添加文件以及執行一大堆開發外的任務,比如測試、編譯。

運行命令行 npm install -g @angular/cli 等待一會兒,安裝完成後,使用 ng -v 如果出現版本號,就說明安裝成功了

技術分享圖片

三、安裝 WebStorm

去官網 http://www.jetbrains.com/webstorm/ 下載最新版本,下載慢的同學可以去我的百度網盤下載:https://pan.baidu.com/s/1smsAPlV 密碼:jys4

下載完成後右鍵選擇打開

技術分享圖片

一路點擊 Next 進行安裝就可以了。

四、新建 Angular 項目

安裝完成需要的工具後,就可以使用命令 ng new project-name 來新建一個 angular 項目了

首先進入到我想要放置項目的 G 盤,然後進入到指定的目錄 angular,在運行 ng new angular-project1 創建了一個名為 angular-project1 的 Angular 項目

技術分享圖片

五、運行項目

首先進入項目 cd angular-project1, 然後運行項目 npm start,等待 webpack 進行模塊的打包

技術分享圖片

編譯完成後,可使用 http://localhost:4200/ 查看項目(4200是默認端口,打開地址可以在上圖中 open your browser on http://localhost:4200/ 這句話中看出)

技術分享圖片

六、Angular 框架目錄文件含義

.editorconfig                         // ide 的一個配置文件
README.md                             // 該應用的一些簡介
src/app/app.component.css             // 項目的主樣式
src/app/app.component.html            // 項目的主模板
src/app/app.component.spec.ts
src/app/app.component.ts              // 項目的主組件,定義AppModule,這個根模塊會告訴Angular如何組裝該應用
src/app/app.module.ts                 // 項目的主模塊
src/assets/.gitkeep                   // 這個文件夾下你可以放圖片等任何東西,在構建應用時,它們全都會拷貝到發布包中。
src/environments/environment.prod.ts  // 環境配置,生產環境
src/environments/environment.ts       // 環境配置,默認環境,開發環境
src/favicon.ico                       // 每個網站都希望自己在書簽欄中能好看一點。 請把它換成你自己的圖標。
src/index.html                        // 宿主頁面
src/main.ts                           // 整個web應用的入口點,angular通過該項目來啟動整個項目
src/polyfills.ts                      // 導入一些必要的庫,使得angular可以在一些老版本的瀏覽器中運行
src/styles.css                        // 公共樣式
src/test.ts                           // 這是單元測試的主要入口點
src/tsconfig.app.json
src/tsconfig.spec.json
src/typings.d.ts
.angular-cli.json                     // Anguar 編譯依賴(可以在其中引入一些 css 和 js 的庫,如 jquery, bootstrap)
e2e/app.e2e-spec.ts                   // e2e 端對端測試目錄
e2e/app.po.ts
e2e/tsconfig.e2e.json
.gitignore                            // 項目上傳到 git 時,需要忽略一些文件上傳的配置文件
karma.conf.js                         // 執行自動化測試的
package.json                          // npm 工具的配置文件,指明了當前這個應用所要用到的模塊,Angular 的依賴包
protractor.conf.js                    // 做自動化測試的一個配置文件
tsconfig.json                         // TypeScript 編譯器的參數
tslint.json                           // 定義 ts 文件質量檢查的一些規則

Angular總結一:環境搭建