Angular總結一:環境搭建
工欲善其事必先利其器,開發 Angular 項目首先要搭建環境。Angular 的環境搭建包括三個方面,開發環境 WebStorm,命令行工具 Angular CLI,以及 nodejs。
一、安裝 nodejs
進入到 nodejs 的官網 https://nodejs.org/en/ 去下載安裝包,下載慢的同學可以去我的百度網盤下載:https://pan.baidu.com/s/1mkilULq 密碼:uaf7
根據電腦操作系統推薦了不同的版本,這裏可以選擇以上兩個中的其中一個,下載完成後是一個 msi 文件
右鍵選擇安裝
然後一路點擊Next就行了。
安裝完成後,運行cmd打開命令行工具,輸入 node -v
二、安裝 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總結一:環境搭建