一个Angular的开发脚手架(求星星)

简介: 一个Angular的开发脚手架(求星星)

Oniangular

一个Angular开发的脚手架,前端UI框架使用NG-ZORRO,服务端用koa2。

相关技术:Angular2、Koa2、NG-ZORRO等。

项目使用的是Angular5,这里用Angular2代称是便于关联网友搜索。

github地址:https://github.com/xiaohuoni/angular 求星星点击阅读原文直达github哦!


实际解决问题

  1. Angular2 项目上线(常用的是编译成静态文件之后,放到nginx tomcat等服务下)
  2. Angular2 http请求代理(拦截请求做一些处理)
  3. Angular2 项目跨域访问
  4. koa2中转服务器(简单的koa2项目,也可以使用koa2-proxy。这个看起来比较像koa2项目。)


需求说明

我们的服务端,要求我自己搭建一个中转服务器。

因为app端的请求,我们都是依赖于token,而且这个token是不变的。

之前都是服务端保存session数据,进行用户身份认证的。现在服务端不想单独为了web端做这些工作,

希望和app端使用一样的方式。所以需要前段自己搭建一个中转服务器,用于处理跨域访问和tokon的问题。

此项目脚手架使用的Angular CLI version 1.5.3.创建。

在koa中对token这些数据做处理,再进行代理,将所有的http请求中转到实际的服务器api。


特别说明

1、在开发环境使用ng serve启用了ng开发服务,监听的是4200端口。

然后我们使用koa2搭建一个node服务器,监听1336端口。

使用koa-proxy2将请求中转到真实业务的服务端。

app.use(async(ctx, next) => {

console.log(Process ${JSON.stringify(ctx.request.method)} ${ctx.request.url}...);

//这里可以处理请求中转到服务器之前,操作一下token和参数之类的。

await next();

//可以在这里处理从服务端返回的数据

});

因为开发时请求从4200访问1336所以也存在跨域访问问题。

所以在koa2中加入koa2-cors处理了跨域访问。

2、在生产环境或者称为正式上线时。修改src\app\config\td-config.ts中的this.serveUrl = ''

使用ng build将前端页面编译成静态文件。

src\dist目录和koa-proxy.js(如果有修改的话)复制到build中。

拷贝build中的文件到远程服务器上,安装node环境和nodemon,

执行npm install再执行nodemon koa-proxy


使用方法

开发

0、gitclone 本项目

1、执行 npm i.

2、确认src\app\config\td-config.ts文件中的端口号和koa-proxy.js中的端口号相同。

2、执行 ng serve 启动一个angular开发服务。

3、执行 nodemon koa-proxy 开启中转服务器。


生产

0、修改src\app\config\td-config.ts中的this.serveUrl = ''

1、执行 ng build 编译项目。

2、拷贝src\dist文件夹和 koa-proxy.js文件到src\build目录下。

3、拷贝build中的文件到远程服务器上,安装node环境和nodemon。

4、执行npm install再执行nodemon koa-proxy.


说明

UI框架使用NG-ZORRO

NG-ZORRO是Ant Design 的 Angular^5.0.0 实现,开发和服务于企业级后台产品。


BUG和建议

请提交到ISS:https://github.com/xiaohuoni/angular/issues

目录
相关文章
|
7月前
|
开发框架 前端开发 测试技术
什么是 Angular 企业级应用开发中的 Breaking Change
什么是 Angular 企业级应用开发中的 Breaking Change
49 0
|
8月前
|
Web App开发 存储 前端开发
使用 Chrome 开发者工具研究一个基于 Angular 开发的网站源代码
使用 Chrome 开发者工具研究一个基于 Angular 开发的网站源代码
43 0
|
4月前
|
存储 搜索推荐 API
通过项目中的实际例子,介绍 LocalStorage 在 Angular 开发中的使用场景
通过项目中的实际例子,介绍 LocalStorage 在 Angular 开发中的使用场景
39 0
|
6月前
|
Web App开发 缓存 前端开发
Angular 应用支持 PWA(Progressive Web Application) 特性的开发步骤分享
Angular 应用支持 PWA(Progressive Web Application) 特性的开发步骤分享
52 0
|
6月前
|
开发框架 前端开发 JavaScript
推荐一个前后端分离.NetCore+Angular快速开发框架
推荐一个前后端分离.NetCore+Angular快速开发框架
62 0
|
7月前
|
JavaScript 前端开发 测试技术
angular框架怎么从0到1进行开发
angular框架怎么从0到1进行开发
38 0
|
7月前
|
存储 JavaScript 前端开发
关于 Subscription 在 Angular 开发中的应用
关于 Subscription 在 Angular 开发中的应用
58 0
|
7月前
|
前端开发 测试技术
关于 fakeAsync 在 Angular 应用单元测试开发领域的使用介绍
关于 fakeAsync 在 Angular 应用单元测试开发领域的使用介绍
38 0
|
7月前
|
存储 缓存 JSON
用 Visual Studio Code 开发 Angular 应用自动生成的 .angular 文件夹
用 Visual Studio Code 开发 Angular 应用自动生成的 .angular 文件夹
33 0
|
7月前
|
测试技术 开发者
关于 Angular testing 开发包里 fakeAsync 测试工具的用法
关于 Angular testing 开发包里 fakeAsync 测试工具的用法
21 0

热门文章

最新文章