Angular、React、Vue是目前最火爆的web前端开发三大框架，本课程将对比三大框架的优势、学习成本、市场流行度及占有率。学习Angular只需要有一定的JS基础，就能快速入门typeScript（开发Angular应用必备的面向对象的脚本语言），然后使用Angular-CLI脚手架工具搭建项目开发环境，利用Angular的组件、服务、指令、模块、路由等核心功能实现移动商城app的开发，最终打包为Android或者IOS系统下的应用程序。

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

Angular 是一个基于 TypeScript 的 Javascript 框架。 由 Google 开发和维护，它被描述为\”超级英雄般的JavaScript MVW 框架\”。 Angular（也称为\”Angular 2 \”，\”Angular 2\”或\”ng2\”）是 AngularJS（也称为\”Angular.js\”或\”AngularJS 1.x\”）的改写，大多为升级了兼容性的继承者。尽管最初般被的 AngularJS 于2010年10月发布，但它仍然在修复bug等问题。新的Angular（sans JS）于2016年9月推出，版本为2.最新的主要版本为版本4， 版本3被跳过。Google，Wix，weather.com，healthcare.gov 和 Forbes 在使用Angular。

Angular团队计划每六个月发布一个主要版本，所以Angular 5在2017年底到来，而Angular 6和Angular 7也分别在2018年6月和2018年12月发布。Angular未来的版本不会像Angular1.x和Angular2.x那样发生重大的变更。所以.x、Angular6.x、Angular7.x和我们现在的开发方式也是一样的。

React 被描述为\”用于构建用户界面的 JavaScript 库\”。 React 最初于2013年3月发布，由 Facebook 开发并维护，在多个页面上使用 React 组件（不是作为单页应用程序）。根据 Chris Cordle 撰写的这篇文章，React 在 Facebook 上的使用远远多于 Angula r在Google上的使用。 React 也被Airbnb，Uber，Netflix，Twitter，Pinterest，Reddit，Udemy，Wix，Paypal，Imgur，Feedly，Stripe，Tumblr，Walmart 等等。

Vue 是2016年发展最迅速的 JS 框架之一. Vue 将自己描述为\”用于构建交互式界面的直观，快速和可组合的 MVVM 框架\”。该框架于2014年2月首次由前 Google 员工尤雨溪发布，当时写了一篇关于营销活动和数字的有趣的博客文章。 这是一次非常成功的比赛，尤其是考虑到 Vue 在没有大公司支持的情况下获得如同一个人的表演一样的吸引力。 Vue 目前拥有一批核心开发人员。 2016年，版本2发布。 Vue 被阿里巴巴、百度、Expedia、任天堂和 GitLab 使用，小型项目列表可以在 madewithvuejs.com 上找到。

React、Angular 、Vue 都非常好，并且他们中没有一个明显高于其他，怎么选？

• 如果你在 Google 工作：Angular
• 如果你喜欢 TypeScript：Angular（或 React）
• 如果你喜欢面向对象编程（OOP）：Angular
• 如果你需要指导，结构和援助：Angular
• 如果你在 Facebook 工作：React
• 如果你喜欢灵活性：React
• 如果你喜欢在几十个软件包中选择：React
• 如果你喜欢 JS &\”一切都是 Javascript 的方法\”：React
• 如果你喜欢真正干净的代码：Vue
• 如果你想要最简单的学习曲线：Vue
• 如果你想要最轻量级的框架：Vue
• 如果你一个人工作或者有一个小团队：Vue（或 React）
• 如果你的应用程序变得非常大：Angular（或 React）
• 如果你想用 react-native 构建一个应用程序：React
• 如果你想有很多跟你一样的开发者：Angular（或 React）
• 如果你与设计师合作并需要干净的 HTML 文件：Angular （或 Vue）
• 如果你喜欢 Vue 但是害怕有限的生态系统：React

二、搭建Angular6项目开发环境

• 前端技术栈

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

• 后台技术栈

php mysql / java mysql / asp.net sql server

nodejs epress mongoDB / Nodejs Epress Mysql

• 搭建前端开发环境

安装脚手架

npm install -g @angular/cli

创建项目，会自动安装依赖

ng new 项目名称 –routing

比如： ng new legouApp –routing

进入项目目录，并安装依赖，不能使用cnpm，原因：webpack打包项目到95%工程会卡死，所以不能使用cnpm

cd loegouAppnpm i 或者 yarn install

运行项目

ng serve –openhttp://localhost:4200/

antD环境的搭建

官网 http://ng.ant.design/docs/introduce/zh执行指令 ng add ng-zorro-antd

帮我们完成 模块安装、模块引入和配置、引入样式，测试antD和angular是否可用，拷贝组件的标签到模板文件中进行测试

三、移动商城功能需求和功能规划

\”乐购商城\”移动端项目是电商B2C的一个典范，倡导\”快乐购物、快乐生活、服务满意\”的服务理念，主要功能模块参考了京东商场和交易流程，实现了常见的B2C商城的基本的功能，比如：商品分类、商品发布、商品展示、商品查询、会员注册、会员登录、购物车、订单管理、在线支付、交易评价、消息提醒、等功能模块。

四、实现移动商城app部分功能

公共组件（复用组件）pubcoms

1. 头部组件 header
2. 页脚组件 footer
3. 底部导航 tabs
4. 分类组件 cate

页面组件（栏目规划） pagecoms

1. 首页 homepage
2. 分类 category
3. 购物车 cart
4. 商品列表 goodslist
5. 商品详情 goodsdetails
6. 我的（会员中心） personal
7. 登录 login
8. 注册 register

依次创建每一个组件

ng g component pubcoms/header

如何处理组件？把公共组件放到根组件app.component.html中，通过路由的链接来切换页面组件

app.component.html<!– 页头组件 –><app-header></app-header><!– 页面组件内容 –><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>

轮播组件的数据模型banner.component.ts

编号 id 图片地址 imgUrl 图片描述 imgTitle 链接网址 linkUrl

export class BannerComponent implements OnInit {bannerList=[]; //轮播的数据源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); //循环向数组中追加每条轮播的数据} }

五、Android环境文件打包、安装、测试

发布angular程序，目的是让应用程序脱离angular环境可以工作，发布就是制作静态资源html,css,js，ng build 指令后生成dist目录，部署静态资源的网页到服务器，拷贝发布后的静态文件到nodejs的public目录，打包网站为安卓或者苹果的安装文件

https://www.apicloud.com/ 安装包云编译平台

创建app的流程

1. 注册
2. 登录
3. 创建一个项目，webAPP
4. 名称 legouShop 乐购商城 说明 商城移动端项目

执行打包服务

云端设置 》 上传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文件