Angular入門教程(一)


一、 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 jses6

如果有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用淘寶鏡像安裝

   https://npm.taobao.org/

  命令: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的時候失敗

  解決方案1ctrl+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 替代 cnpmnpm

  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   就可以安裝

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM