(三) Angular2项目框架搭建心得
前言:
在哪看到过angular程序员被React程序员鄙视,略显尴尬,确实Angular挺值得被调侃的,在1.*版本存在的几个性能问题,性能优化的“潜规则”贼多,以及从1.*到2.*版本的面目全非,不过宽容点来看这个强大的框架,升级到ng2肯定是一件好事情,虽然截至目前ng2还存在或多或少需要完善的地方,但是ng2做到了留下并强化ng1好的部分,移除或改善其不好的部分,并且基于许多较新Web技术来开发,不去看从ng1迁移到ng2的门槛和工作量的话,ng2的编程体验是很酷炫的。
目前ng2已经在npm上活跃到了2.4.*版本,笔者也斗胆用来重构现有的一个ng1产品,目前开发还未完全完成,也已经有了一些ng2开发的心得,其给我的其中一个感觉就是,框架的搭建很重要,搭建好一个酷炫的ng2项目架构,已经可以说是成功了一半了。
本文目的就在于分享一下angular2搭配webpack的项目框架搭建心得。
一、前端模块化
ng2的开发可以说是官方强行模块化,毕竟使用了TS与ES6新特性。使用ng1开发推荐的写法就是每个controller啊service啊factory啊filter啊都放在单独文件中并包上立即执行函数来分隔作用域,如果是这种写法,迁移到ng2中能减少一些工作量,将不同服务或是组件到处import即可。
说白了ng2项目架构搭建的重难点就在于对前端代码模块化的运用。习惯了所有变量函数都直接定义在window下的话得花些时间来理解与运用。题外话JS/ES模块化的发展历程也是蛮酷炫的。
二、SystemJS与Webpack
ng2默认使用SystemJS作为模块化工具,在其官网上有推荐使用Webpack来代替,但其对Webpack下ng2的搭建提到的不多。
不管是SystemJS还是Webpack,起到的最根本的作用就是模块化ng2代码,所做的事情就是:通过配置让其知道某个ng2依赖的路径(比如@angular/http),当需要使用网络请求时只要在具体的service下引用这个依赖(import),SystemJS或者Webpack就会将其引入,然后就可以使用它内部提供的实例方法了。
ng1时代在不借助模块化工具的情况下,做法是先将angular.min.js引入,然后再其后面执行代码,而ng2配置好模块化工具后,页面引入的是SystemJS(Webpack)的脚本,然后异步加载后续需要的ng2模块。
至于Webpack区别于SystemJS的地方,简单来说Webpack所做的事不止是帮忙异步加载模块,还把资源的压缩包了。也就是说使用SystemJS的情况下,当使用到某个ng2组件时还得发起请求,请求组件依赖的脚本文件,视图模板以及样式表,而Webpack可以将所有的这些都打包压缩。
所以给出的建议就是,如果只是试水看看ng2酷炫的能力,SystemJS足够了,但如果是用来做产品,Webpack有巨大优势。
三、Webpack的配置
厉害的Webpack配置非常值得研究,笔者能力不够,借鉴了国外一个开源的angular2-starter项目,地址如下:
github.com/AngularClass/angular2-webpack-starter
简单说说Webpack工作的过程:
在npm下使用指令运行webpack,首先会在当前目录寻找webpack.config.js文件,里面就是需要编写的webpack的编译规则,包含代码入口,需要加载的文件(包括各种后缀的文件,需要哪一类都可以配置进去),以及最终输出的文件。
编译完成后只要将输出的几个脚本引用到页面中就完成了,甚至可以由webpack来输出一个index.html,作为网站的入口文件,其深层的工作原理非常值得研究。
四、目录结构与编程风格推荐
关于ng2项目的目录结构与编程风格的推荐,ng2官网的风格指南已经讲得非常完善,看完绝对能受益匪浅,地址如下:
angular.cn/docs/ts/latest/guide/style-guide.html
五、发布与部署
发布与部署不是什么难事,但是从来没发布过的话总会紧张的,大致过程就是:
1. 运行webpack命令将源代码生成为待发布代码(包含入口文件index.html、静态资源assets、主webpack脚本和其trunk脚本)
2. 找一个服务器部署发布的代码,任意服务器都可以,直接使用node服务器也完全没问题,更多的工作是如何维护。
六、浅谈Angular2核心思想
在开始开发ng2项目前,先认识一下其整体的工作过程是很有必要的。
下面是ng2官网给出的一张全景图:
大致的思想就是:
1.按模块来划分。至少有一个根模块,包含一个根组件,一般用来做一些全局的事情,并统筹其他所有模块,具体的各个功能都划分成一个模块,各自工作,互不影响但能互相通信或是继承。
2.围绕组件进行开发。可以直接把组件理解为一个个页面的管理者,一个组件管理自己的一个页面,维护页面需要呈现的数据,并处理页面中触发的各种事件。
3.保留ng1的属性型指令。属性型指令用来做一些不依赖于具体视图的事情,比如通用的事件响应等。
4.服务依赖注入。服务的特性依然是全局单例,注入到具体组件后使用,不过如果在不同模块重复包含相同服务,也就都会有各自的新实例,其使用有小技巧。
5.使用管道来格式化数据的呈现。
6. ...
七、发现的几个问题
1. 第一个问题是针对上文提到的angular2-starter开源项目,其在windows下有一个尴尬的问题,就是经过webpack编译后会出现中文乱码。懵逼许久之后发现此项目原有的文件都是utf8无BOM编码,而windows下默认utf8编码都带有BOM。
2. 组件的切换。主要是路由切换时会从一个组件导航到另一个组件,此过程会销毁前一个组件再创建后一个组件,导致的问题是路由的切换动画总是会有一瞬间的空白页面(因为原组件被销毁了而新组建还未初始化),此问题在StackOverflow上有个别的曲线救国解决方案,但是还是希望ng2后续的版本更新能给出更优雅的官方解决方案。
3. ng2路由有两种形式,H5 pushState与#符号区分前后端路由两种形式。官方推荐前者,但前者显然会与服务器路由冲突(非node服务器情况下)。这个网上有一些解决方案,笔者采用的是将404状态默认重定向到项目首页(服务器端找不到路径则视为是请求首页并保持原有参数)。
总结
其实任何框架都有其长处和短处,深入使用都会遇到各种问题,ng2也是如此。ng2相对于2016年已经成熟很多了,但是还有很长的路要走。
转载于:https://www.cnblogs.com/yitim/p/angular2-study-2.html
(三) Angular2项目框架搭建心得相关推荐
- spring cloud多模块项目框架搭建-Redis-Cluster集群搭建及系统集成
第九章 Redis-Cluster集群搭建及系统集成 本系列博客旨在搭建一套能用于实际开发使用的spring cloud多模块微服务项目框架,并不是一个spring cloud的demo而已,提供系统 ...
- spring cloud多模块项目框架搭建-集成SLF4J和log4j2日志组件
第七章 集成SLF4J和log4j2进行日志管理 本系列博客旨在搭建一套能用于实际开发使用的spring cloud多模块项目框架,并不是一个spring cloud的demo而已,提供分布式系统的 ...
- 【高校宿舍管理系统】第一章 建立数据库以及项目框架搭建
第一章 建立数据库以及项目框架搭建 提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录 第一章 建立数据库以及项目框架搭建 前言 一 ...
- SpringBoot后端项目框架搭建
SpringBoot后端项目框架搭建 本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目. 工具安装 电脑已安装\配置如下工具: IDEA.jdk.MySQL及其可视化 ...
- SpringSecurity(二)、权限项目框架搭建
Springboot + SpringSecurity权限项目框架搭建 目录 一.项目介绍 二.项目搭建(父子工程) 1.添加 pom 依赖 2.修改 yml 配置 3.编写JwtTokenUtil工 ...
- Android最好用的项目框架搭建
本篇先记录下当前项目中涉及的主要技术要点.也算是对所作项目的一次总结.如果这个过程能对你有些许的帮助,那可能就显得有意义点了. 一个完整的Android项目会涉及后台和前端.我们只关注于前端,也就是我 ...
- day18_项目框架搭建1
项目的工程目录: py_53 --根目录 py_api --子目录 day18_项目框架搭建 --项目工程目录 common -公用模块 excle.py -获取Excel表单的数据 handler_ ...
- spring cloud多模块项目框架搭建-集成lombok
第五章: spring cloud多模块项目框架搭建-集成lombok 本系列博客旨在搭建一套能用于实际开发使用的spring cloud多模块微服务项目框架,并不是一个spring cloud的de ...
- [Vue 牛刀小试]:第十六章 - 针对传统后端开发人员的前端项目框架搭建
一.前言 在之前学习 Vue 基础知识点的文章中,我们还是采用传统的方式,通过在 html 页面上引用 vue.js 这个文件,从而将 Vue 引入到我们的项目开发中.伴随着 Node.js 的出现, ...
最新文章
- java下使用Thumbnailator类库来对图片进行缩放
- 网站最令人讨厌的几个用户体验
- SVA Function Coverage
- Algorithm:C++语言实现之概率算法相关问题(计算机中的概率事件、C语言中的随机事件、产生二维随机数、圆内均匀取点)
- Transformer开始往动态路由的方向前进了!厦大华为提出TRAR,在VQA、REC上性能SOTA!(ICCV 2021)...
- 计算机硬件知识pdf,计算机硬件知识 (很详细)
- 第二代计算机网络主要贡献,2010级计算机网络试题
- Spring Cloud中如何保证各个微服务之间调用的安全性
- 比较LANG和NLS_LANG在Linux中的作用
- 瑞利衰落(Rayleigh Fading)
- 彻底关闭Excle进程的几个方法
- 基于遗传算法的柔性车间调度优化(Matlab代码实现)
- Hexo博客搭建之Next主题的安装与设置
- 云计算基础与应用 - 云计算架构
- java在线测试工具_9个最好用的在线编译/调试工具
- chromium 浏览器markdown神器插件
- 知人者智,自知者明。 胜人者有力,自胜者强。 知足者富。 强行者有志。 不失其所者久。 死而不亡者寿。
- 百度VR智拍再升级,3D环物拍摄一站生成
- 云平台 物联网 概念 数据挖掘技术
- 邮件合并批量制作邀请函
热门文章
- 华为鸿蒙第一期名单,机型正式确认,鸿蒙2.0第一批名单曝光!花粉:华为不够厚道...
- 【深度学习】面向医学图像的病灶分割调研(二)
- K-Means原理解析
- iconfont图标_小程序使用 Iconfont 的正确姿势
- java拼接sql保留两位小数_SQL 保留两位小数的实现方式
- SEO优化技巧之Alt标签的使用方法
- 网站推广——网站推广专员浅析如何轻松完成网站关键词优化?
- java mina 长连接_apache mina 长连接
- stm32如何执行软复位_常见的单片机复位方式及其原理分析
- 多路归并排序_1600W整数排序多路归并