1、使用angular脚手架进行多项目工作区搭建*

搭建后的项目到project层，后续项目需自主配置

ng new my-workspace --create-application false

2、项目分析与架构分层设计*

为了方便管理，公用组件与公共层进行拆分，剩余分层根据具体业务需求进行拆分，比如：采购层，仓储层，用户中心，具体分层设计根据项目具体业务需求设计，考虑后台设计模式，本文后台假设使用DDD进行服务拆分，前后台工程对应。

#项目创建
ng generate application my-first-app

3、项目分层搭建完成后进行项目配置*

项目配置一定要考虑部署方式，如果采用CI/CD 容器化部署的方式，每个项目需配置Dockerfile文件，编写dockerfile脚本，并且对package.json配置进行修改,方便CI/CD部署，在这儿基于nginx进行镜像打包docker镜像

3.1 package.json文件配置

配置自定义npm命令，多项目文件，指定project执行项目工程（与angular.json文件中projects下项目结构匹配）以及configuration配置文件选择。

3.2 将Dockerfile与指定项目共同打包，配置在angular.json中指定项目下的配置中

不了解angular分层结构，参考https://angular.cn/guide/file-structure

4、开发模式

具体开发模式根据前端组件封装情况决定，若封装统一模板，则可选择采用多投影，或者条件投影的方式做组件插拔。可增加组件复用。前端组件开发要求考虑组件扩展性，可复用组件不做重复开发。

5、项目路由设计

根据业务层拆分后的项目，每个模块放在单独文件夹下并导入路由文件，模块路由单独组合，页面路由采用主子路由的模式配置。每个模块有单独路由配置。
每个模块单独配置路由
表单页面比如存在详情与列表这种情况采用子路由模式配置

将每个页面配置为一个单独的模块儿就可以为其配置自定义的路由地址

注：没有根据路由走可能是没有在app.component.html中进行配置

<router-outlet></router-outlet>

6、项目粒度细化

每个页面配置单独的module文件，主次页面绑定在统一module，根据子路由进行页面访问地址配置。将每一个页面理解为一个单独的模块，对页面与页面之间的关联进行拆分，降低耦合！

7、公共层

采用依赖注入的方式进行接口配置，保证接口易用，独立可配置，调用不同平台接口配置不同服务，在此项目中进行统一整理
使用命令创建服务`ng generate service User`![在这里插入图片描述](https://img-blog.csdnimg.cn/46283580aacb4b16a37201b5a0a515b3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzQ0NDY4NTQ2,size_20,color_FFFFFF,t_70,g_se,x_16)

8、项目中每个模块下每个页面配置单独服务

主子页面使用接口，实体进行统一管理，方便代码整理与后续维护，降低开发成本

9、前端架构设计时需充分考虑

前端架构设计需充分考虑项目后期运行环境，人员技术水平，上手成本不宜太高，考虑现有其他业务，在兼容其他业务架构的情况下进行架构设计，充分考虑业务走向，实际开发环境，避免摊子铺得太大，一般小公司也不会选择采用微服务的形式开发，一站到底式开发另当别论了哈。

10、项目粒度进行合理设计

项目体量小方便后期项目部署扩展，项目架构就已经成功一大步，条件允许，能拆则拆，合理拆分，避免后期因为项目设计不合理导致单体项目体重。

11、架构设计的同时需指定开发规范，避免垃圾代码

前端项目通病，不同页面，同样的功能，例如列表字段不同，但是数据源是相同，这种情况往往会出现两个字段不同共用一个数据源的情况，前端开发人员应考虑是否可对组件进行设计，实现需求，此类重复代码后期统统都是垃圾代码，没有必要的代码只会让项目变得更重。
前端架构设计将公共的内容能封则封，降低对开发人员的要求，降低上手难度与理解难度，业务开发人员只需关注代码开发，而无需关注项目结构

项目中可扩展的东西很多，配置的东西也很多，不一一说明，具体根据后台架构设计与业务需求，开发需求，进行扩展。
Angular的核心就是组件化，我们需要对整体架构进行思考，怎么样将项目进行合理拆分，加深对组件化的理解，每一个完整的页面就是一个模块，每一个功能就是一个组件。就像搭积木，将他们严丝合缝的搭建起来！

Angular.js前端简单微服务架构设计相关推荐

Java生鲜电商平台-秒杀系统微服务架构设计与源码解析实战
Java生鲜电商平台-秒杀系统微服务架构设计与源码解析实战 Java生鲜电商平台- 什么是秒杀通俗一点讲就是网络商家为促销等目的组织的网上限时抢购活动比如说京东秒杀,就是一种定时定量秒杀,在规定 ...
微服务架构设计总结实践
- 目录 - 一.微服务架构介绍二.出现和发展三.传统开发模式和微服务的区别四.微服务的具体特征五.SOA和微服务的区别六.如何具体实践微服务七.常见的微服务设计模式和应用 ...
（转）微服务架构互联网保险O2O平台微服务架构设计
http://www.cnblogs.com/Leo_wl/p/5049722.html 微服务架构互联网保险O2O平台微服务架构设计关于架构,笔者认为并不是越复杂越好,而是相反,简单就是硬道理也 ...
php 余额冻结设计_加密货币交易所：微服务架构设计
本文介绍一个实际开发并上线的加密货币交易所项目的逻辑架构设计,其中包括撮合服务.做市服务.用户服务.市场数据服务.钱包服务.报表服务等核心组件,并采用了基于AKKA集群的微服务架构. 加密交易所的逻辑 ...
互联网金融平台功能分析及微服务架构设计
互联网金融平台微服务架构设计按照孢子框架要义对互联网金融理财平台进行微服务架构设计.假设我们设计的目标是5年后的陆金所(https://www.lu.com/).陆金所简介,平安集团旗下理财平台,是 ...
互联网金融平台微服务架构设计
微服务架构设计互联网金融平台微服务架构设计按照孢子框架要义对互联网金融理财平台进行微服务架构设计.假设我们设计的目标是5年后的陆金所(https://www.lu.com/).陆金所简介,平安集团 ...
微服务架构设计实践系列之九：应用架构
微服务架构设计实践系列之九:应用架构原文:微服务架构设计实践系列之九:应用架构版权声明: https://blog.csdn.net/beyondself_77/article/details/7 ...
孢子框架-互联网金融平台微服务架构设计(转)
非常感谢http://www.cnblogs.com/skyblog/p/4915383.html 对互联网金融理财平台进行微服务架构设计.假设我们设计的目标是5年后的陆金所(https://www. ...
保险o2o微服务架构设计
开发环境: 编码:UTF-8 工具:Myeclipse 10 SVN:Site-1.8.22 Web服务器:Tomcat7 JDK: JDK1.7. Java EE 5 开发环境:Maven 3 开发 ...

Angular.js前端简单微服务架构设计