一、 Angular介紹
Angular是谷歌開發的一款開源的web前端框架,誕生於2009年,由Misko Hevery 等人創建,后為Google所收購。是一款優秀的前端JS框架,已經被用於Google的多款產品當中。
根據項目數統計angular(1.x 、2.x 、4.x、5.x、6.x、7.x 、8.x、9.x)是現在網上使用量最大的框架。
Angular基於TypeScript和react、vue相比 Angular更適合中大型企業級項目。
目前2019年12月25日angular最新版本angular9.x。根據官方介紹,Angular每過幾個月就會更新一個版本。Angular2.x以后所有的Angular版本用法都是一樣的,此教程同樣適用於Angular7.x 、Angular8.x、Angular9.x 以及未來的其它版本....。
二、學習Angular必備基礎
必備基礎:html 、css 、js、es6
如果有Typescript基礎更容易理解,沒有Typescript基礎也可以學此教程。此教程中用到的Typescript語法會詳細講解。
Typescript基礎入門教程: https://www.itying.com/goods-905.html
三、Angular環境搭建
1、安裝前准備工作:
1.1、安裝nodejs
安裝angular的計算機上面必須安裝最新的nodejs--注意安裝nodejs穩定版本
官網地址:https://nodejs.org/zh-cn/download/
1.2、安裝cnpm
npm可能安裝失敗建議先用npm安裝一下cnpm用淘寶鏡像安裝
命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
2、使用 npm/cnpm 命令安裝angular/cli (只需要安裝一次)
命令:npm install -g @angular/cli 或者 cnpm install -g @angular/cli
四、Angular創建項目
1.打開命令行工具找到你要創建項目的目錄
2.創建項目
ng new 項目名稱
直接安裝:
命令:ng new angulardemo
如果要跳過npm i安裝:
命令:ng new angulardemo --skip-install
3.運行項目
3.1切換到項目文件夾
cd 文件夾目錄
3.2 啟動項目
ng serve --open
五、Angular環境搭建以及創建項目的時候可能遇到的錯誤
1、npm安裝angular/cli失敗
解決方案:用 cnpm 安裝
2、創建項目npm i的時候失敗
解決方案1:ctrl+c結束項目,cd到項目里面,用 cnpm i 安裝依賴
解決方案2:創建項目的時候 --skip-install
ng new my-app --skip-install
cd my-app
cnpm install / yarn |
3、創建項目后用npm i 或者 cnpm i后項目沒法運行
解決方案:用yarn 替代 cnpm和npm
1 cnpm instal @angular/cli (我的npm會報錯);
2 ng new 的時候阻止自動安裝ng包,只創建ng目錄
ng new my-app --skip-install |
3 安裝yarn npm install -g yarn / cnpm install -g yarn
4 進入目錄my-app 使用yarn 安裝ng所依賴的包 yarn
注意:yarn 命令 等同於 npm install / cnpm install 使用yarn前提是先安裝yarn ,安裝使用 cnpm install -g yarn 就可以安裝