Angular、React、Vue是目前最火爆的web前端開發(fā)三大框架，本課程將對比三大框架的優(yōu)勢、學習成本、市場流行度及占有率。學習Angular只需要有一定的JS基礎(chǔ)，就能快速入門TypeScript（開發(fā)Angular應用必備的面向?qū)ο蟮哪_本語言），然后使用Angular-CLI腳手架工具搭建項目開發(fā)環(huán)境，利用Angular的組件、服務(wù)、指令、模塊、路由等核心功能實現(xiàn)移動商城app的開發(fā)，最終打包為Android或者IOS系統(tǒng)下的應用程序。

一、Angular、React、Vue三大框架對比

Angular 是一個基于 TypeScript 的 Javascript 框架。 由 Google 開發(fā)和維護，它被描述為”超級英雄般的JavaScript MVW 框架”。 Angular（也稱為”Angular 2 “，”Angular 2″或”ng2″）是 AngularJS（也稱為”Angular.js”或”AngularJS 1.x”）的改寫，大多為升級了兼容性的繼承者。盡管最初般被的 AngularJS 于2010年10月發(fā)布，但它仍然在修復bug等問題。新的Angular（sans JS）于2016年9月推出，版本為2.最新的主要版本為版本4， 版本3被跳過。Google，Wix，weather.com，healthcare.gov 和 Forbes 在使用Angular。

Angular團隊計劃每六個月發(fā)布一個主要版本，所以Angular 5在2017年底到來，而Angular 6和Angular 7也分別在2018年6月和2018年12月發(fā)布。Angular未來的版本不會像Angular1.x和Angular2.x那樣發(fā)生重大的變更。所以.x、Angular6.x、Angular7.x和我們現(xiàn)在的開發(fā)方式也是一樣的。

React 被描述為”用于構(gòu)建用戶界面的 JavaScript 庫”。 React 最初于2013年3月發(fā)布，由 Facebook 開發(fā)并維護，在多個頁面上使用 React 組件（不是作為單頁應用程序）。根據(jù) Chris Cordle 撰寫的這篇文章，React 在 Facebook 上的使用遠遠多于 Angula r在Google上的使用。 React 也被Airbnb，Uber，Netflix，Twitter，Pinterest，Reddit，Udemy，Wix，Paypal，Imgur，F(xiàn)eedly，Stripe，Tumblr，Walmart 等等。

Vue 是2016年發(fā)展最迅速的 JS 框架之一. Vue 將自己描述為”用于構(gòu)建交互式界面的直觀，快速和可組合的 MVVM 框架”。該框架于2014年2月首次由前 Google 員工尤雨溪發(fā)布，當時寫了一篇關(guān)于營銷活動和數(shù)字的有趣的博客文章。 這是一次非常成功的比賽，尤其是考慮到 Vue 在沒有大公司支持的情況下獲得如同一個人的表演一樣的吸引力。 Vue 目前擁有一批核心開發(fā)人員。 2016年，版本2發(fā)布。 Vue 被阿里巴巴、百度、Expedia、任天堂和 GitLab 使用，小型項目列表可以在 madewithvuejs.com 上找到。

React、Angular 、Vue 都非常好，并且他們中沒有一個明顯高于其他，怎么選？

• 如果你在 Google 工作：Angular
• 如果你喜歡 TypeScript：Angular（或 React）
• 如果你喜歡面向?qū)ο缶幊蹋∣OP）：Angular
• 如果你需要指導，結(jié)構(gòu)和援助：Angular
• 如果你在 Facebook 工作：React
• 如果你喜歡靈活性：React
• 如果你喜歡在幾十個軟件包中選擇：React
• 如果你喜歡 JS &”一切都是 Javascript 的方法”：React
• 如果你喜歡真正干凈的代碼：Vue
• 如果你想要最簡單的學習曲線：Vue
• 如果你想要最輕量級的框架：Vue
• 如果你一個人工作或者有一個小團隊：Vue（或 React）
• 如果你的應用程序變得非常大：Angular（或 React）
• 如果你想用 react-native 構(gòu)建一個應用程序：React
• 如果你想有很多跟你一樣的開發(fā)者：Angular（或 React）
• 如果你與設(shè)計師合作并需要干凈的 HTML 文件：Angular （或 Vue）
• 如果你喜歡 Vue 但是害怕有限的生態(tài)系統(tǒng)：React

二、搭建Angular6項目開發(fā)環(huán)境

• 前端技術(shù)棧

html5、css3、JavaScript、Webpack、TypeScript、Angular6、AJAX(http模塊)、ant Design UI組件

• 后臺技術(shù)棧

php mysql / java mysql / asp.net sql server

nodejs epress mongoDB / Nodejs Epress Mysql

• 搭建前端開發(fā)環(huán)境

安裝腳手架

npm install -g @angular/cli

創(chuàng)建項目，會自動安裝依賴

ng new 項目名稱 –routing

比如： ng new legouApp –routing

進入項目目錄，并安裝依賴，不能使用cnpm，原因：webpack打包項目到95%工程會卡死，所以不能使用cnpm

cd loegouAppnpm i 或者 yarn install

運行項目

ng serve –openhttp://localhost:4200/

antD環(huán)境的搭建

官網(wǎng) http://ng.ant.design/docs/introduce/zh執(zhí)行指令 ng add ng-zorro-antd

幫我們完成 模塊安裝、模塊引入和配置、引入樣式，測試antD和angular是否可用，拷貝組件的標簽到模板文件中進行測試

三、移動商城功能需求和功能規(guī)劃

“樂購商城”移動端項目是電商B2C的一個典范，倡導”快樂購物、快樂生活、服務(wù)滿意”的服務(wù)理念，主要功能模塊參考了京東商場和交易流程，實現(xiàn)了常見的B2C商城的基本的功能，比如：商品分類、商品發(fā)布、商品展示、商品查詢、會員注冊、會員登錄、購物車、訂單管理、在線支付、交易評價、消息提醒、等功能模塊。

四、實現(xiàn)移動商城app部分功能

公共組件（復用組件）pubcoms

1. 頭部組件 header
2. 頁腳組件 footer
3. 底部導航 tabs
4. 分類組件 cate

頁面組件（欄目規(guī)劃） pagecoms

1. 首頁 homepage
2. 分類 category
3. 購物車 cart
4. 商品列表 goodslist
5. 商品詳情 goodsdetails
6. 我的（會員中心） personal
7. 登錄 login
8. 注冊 register

依次創(chuàng)建每一個組件

ng g component pubcoms/header

如何處理組件？把公共組件放到根組件app.component.html中，通過路由的鏈接來切換頁面組件

app.component.html<!– 頁頭組件 –><app-header></app-header><!– 頁面組件內(nèi)容 –><router-outlet></router-outlet><!– 頁腳組件 –><app-footer></app-footer><!– 底部導航組件 –><app-tabs></app-tabs>

配置路由

const routes: Routes = [{ path:”homepage”, component: HomepageComponent },{ path:””, component: HomepageComponent }, //默認為空值加載首頁{ path:”category”, component: CategoryComponent },{ path:”cart”, component: CartComponent },{ path:”personal”, component: PersonalComponent }];

路由的導航鏈接

<ul><li><a routerLink=”/homepage”>首頁</a></li><li><a routerLink=”/category”>分類</a></li><li><a routerLink=”/cart”>購物車</a></li><li><a routerLink=”/personal”>會員中心</a></li></ul>

輪播組件的數(shù)據(jù)模型banner.component.ts

編號 id 圖片地址 imgUrl 圖片描述 imgTitle 鏈接網(wǎng)址 linkUrl

export class BannerComponent implements OnInit {bannerList=[]; //輪播的數(shù)據(jù)源constructor() { }ngOnInit() {for (let index = 1; index <= 4; index ) {let bannerObj = {id:index,imgUrl:`assets/images/banner${index}.jpg`,imgTitle:’輪播圖的標題’ index,linkUrl:’http://’};this.bannerList.push(bannerObj); //循環(huán)向數(shù)組中追加每條輪播的數(shù)據(jù)} }

五、Android環(huán)境文件打包、安裝、測試

發(fā)布angular程序，目的是讓應用程序脫離angular環(huán)境可以工作，發(fā)布就是制作靜態(tài)資源html,css,js，ng build 指令后生成dist目錄，部署靜態(tài)資源的網(wǎng)頁到服務(wù)器，拷貝發(fā)布后的靜態(tài)文件到nodejs的public目錄，打包網(wǎng)站為安卓或者蘋果的安裝文件

https://www.apicloud.com/ 安裝包云編譯平臺

創(chuàng)建app的流程

1. 注冊
2. 登錄
3. 創(chuàng)建一個項目，webAPP
4. 名稱 legouShop 樂購商城 說明 商城移動端項目

執(zhí)行打包服務(wù)

云端設(shè)置 》 上傳Icon（手機上顯示的app的圖標）》Android證書 iso證書》

• Android證書流程

https://docs.apicloud.com/Dev-Guide/Android-License-Application-Guidance

• iso證書流程

https://docs.apicloud.com/Dev-Guide/iOS-License-Application-Guidance

云編譯，生成二維碼，手機掃描就可以下載安裝包apk文件