将angular.js项目整合到.netmvc中的方法详解-创新互联
前言
成都创新互联-专业网站定制、快速模板网站建设、高性价比淇滨网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式淇滨网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖淇滨地区。费用合理售后完善,十年实体公司更值得信赖。之前的开发选择的是完全舍弃服务端,仅保留最简单web服务器提供angular经打包的静态资源,此外所有的业务与数据请求都访问一个分离的WebApi来实现。不过最近碰到一个需求,有必要使用多个客户端,而各客户端本身都是webpack打包出来的js而已,没必要每个客户端都自己建一个站点,这就有必要搭建一个服务端,根据参数动态渲染不同客户端的脚本来服务多个客户端了。主要需要解决两个问题,一是防止前后端路由冲突各自有效工作,二是如何实现一套比较合理的部署方案。笼统一点看待这个问题,无非就是要实现如题目所描述的,如何将专注前端的强大框架(angular)整合到一个健壮的现有服务端(.Net)项目中去。
Webpack配置
第一步必然是要先得到前端项目的打包资源,由强大的webpack来完成,目标是将angular的所有依赖以及应用主代码分别打包到polyfill.js、vendor.js、main.js三个脚本中,以及异步懒加载的模块各自打包成一个chunk.js。webpack博大精深,刚接触会摸不着头脑,好在其终究是用来给我们带来方便的一个工具而已,使用起来是很有条理的。其主要的介绍可以移步webpack的官方文档【https://doc.webpack-china.org 】,认真吸收完远远足够写出angular-webpack-starter【 https://github.com/AngularClass/angular-starter 】这样完善的启动项目来了。
简单来说webpack配置有四部曲:
一、 定义入口文件 包含angular的依赖,angular框架代码以及项目的启动代码即可,比如angular-webpack-starter中的配置:
entry: { 'polyfills': './src/polyfills.browser.ts', // 依赖项 'main': AOT ? './src/main.browser.aot.ts' : './src/main.browser.ts' // 主程序 },
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前标题:将angular.js项目整合到.netmvc中的方法详解-创新互联
本文网址:http://hbruida.cn/article/cosgoo.html