AngularJS
kittyjie
这个作者很懒,什么都没留下…
展开
-
AngularJS实际项目应用——项目目录结构概览
在网上很多AngularJS的项目示例中,目录结构都是简单的按照controller,view,service分层的,其实这种目录结构在大一点的项目中根本没法用,因为实际项目的controller可能会非常多,如果按照一个js文件里一个controller的写法,文件会非常多,几乎没法维护。如果一个文件里写多个controller,那就更没法维护了。个人认为目录结构应该先按照业务逻辑结构划分,这样便于查找和后来的开发者快速学习。在按照业务逻辑划分以后,如果文件数仍然很多的话,再按照模块的功能划分。原创 2017-01-20 17:31:36 · 6929 阅读 · 0 评论 -
AngularJS实际项目应用——打包发布
这个过程说简单也简单,说麻烦也麻烦,如果想简单做,就用requirejs带的r.js进行压缩一下就行了,要想麻烦,需要在requirejs的压缩文件里配置需要合并压缩的模块。例如下面这种: modules:[ { "name":"app", "exclude":[ 'jquery',原创 2017-03-07 13:51:03 · 8251 阅读 · 0 评论 -
AngularJS实际项目应用——单元测试框架设计
转自:http://www.cnblogs.com/vipyoumay/p/5331787.html关于本文:介绍通过karma与jsmine框架对angular开发的应用程序进行单元与E2E测试。angular单元测试与集成测试实践先决条件创建项目webstorm中创建空白web项目创建html、js文件夹安装框架安装前端框架转载 2017-03-07 09:58:19 · 1260 阅读 · 0 评论 -
AngularJS实际项目应用——动态模块切换设计
有这样一个需求,就是根据后台一个API或者参数确定前台展示的功能模块:菜单会不同,点击菜单,切换页面,页面内容也会不同。比如云计算中虚拟化的后台可能是KVM,openstack或者esxi或者其它,那么针对这几个平台创建虚拟机的页面会不一样,因为需要的参数会有很大不同。功能的实现主要是利用requirejs的路径配置来切换不同的功能模块。看一下目录结构:首先,在bootstra原创 2017-02-22 15:23:51 · 1012 阅读 · 0 评论 -
AngularJS实际项目应用——移动端设计
按照现在主流的做法,采用响应式设计,应该不在区分移动端和PC端,但由于项目历史遗留的问题,或者说为了开发速度,还是需要单独的移动端设计。其实我觉得单独的移动端开发也有好处,可以充分利用移动端的各种设计模式以及用户使用习惯,最大限度的使用移动框架的各种组件。本项目采用了分开的设计,看一下项目总体目录结构:移动端的代码都在app_m下面,里面的目录结构和app几乎一样,但可以省略一些文原创 2017-02-21 09:43:18 · 3044 阅读 · 0 评论 -
AngularJS实际项目应用——Service层介绍
所谓的Service层就是如何调用后台的rest api,你可能觉得这有什么可设计的?不就是用$http或者$resource直接调用就行了吗?如果这样写,在简单的应用中还行,但程序一旦复杂起来,$http调用会散落在各种controller或者directive中,会有很多重复的代码。如果后台rest api的路径设计不好的话,那通过$http调用会使得业务逻辑很难被理解。万一需要更改路径,只能原创 2017-02-20 15:36:03 · 2582 阅读 · 1 评论 -
AngularJS实际项目应用——Controller层介绍
在这个angularjs的项目里,我把controller分类两类,一个是页面级别的controller,一个是对话框级别的controller。页面级别的controller就是用户直接点菜单,路由到某个页面,需要用到的。对话框级别的就是在页面中使用bootstrap对话框组件需要的controller。页面级别controllerdefine(['require','angular',原创 2017-02-17 14:45:57 · 1371 阅读 · 0 评论 -
AngularJS实际项目应用——程序入口启动
一步一步看程序怎么启动的,angularjs是单页应用,基本就一个页面,页面主要结构如下: 页面最下面引入requirejs真正的程序启动点在config-product.js里(function(window){ var appPath=window.contextPath+ '/static/js/'+(window.i原创 2017-02-16 15:12:37 · 7997 阅读 · 0 评论 -
AngularJS实际项目应用——模块路由
本项目利用了ui-router-extras库的特性,实现了路由的动态加载,即对路由按照模块进行切割,只有用户真正访问某个模块下的页面时,才会去加载对应的模块文件,配置路由。设想一下如果项目有几十个路由甚至更多,用ui-router的方式在app启动时候用config方法去配置,会显得臃肿低效率。如果项目由多个人开发,那么每个人都需要更改自己模块下路由的配置,很容易造成代码冲突。具体ui-ro原创 2017-02-14 15:49:50 · 2321 阅读 · 0 评论 -
AngularJS实际项目应用——模块划分
angularjs的设计理念是鼓励多模块的,每个模块可以依赖于其它模块,这样可以用模块的概念匹配业务功能。所以在设计angularjs的程序时,可以根据一定的业务规则进行模块划分。一般来讲,一个angularjs的程序都会有一个app模块,也就是程序的入口点。当然如果功能较少,一个app模块就足够了,剩下的service和controller等其他组件都可以挂到这个app上。但是程序一扩张,就原创 2017-02-07 17:29:10 · 2597 阅读 · 0 评论 -
AngularJS实际项目应用——前端js框架以及库介绍
AngularJS 1.x系列,这个项目开始的时候2.x正式版还没有发布,现在发布了。但是看2.x系列的AngularJS变化非常大,个人觉得学习曲线有点陡,现在还处在观望中,看要不要继续学习一下。UI Bootstrap,https://angular-ui.github.io/bootstrap/,基于angularjs的bootstrap库,现在已经比较成熟了,用起来还可以。Bootstra原创 2017-01-24 11:07:34 · 1686 阅读 · 0 评论 -
AngularJS实际项目应用——前端工具介绍
现在前端的工具越来越多,真是应接不暇,有时候觉得也挺困惑的,好多人把经历都专注到了各种工具的使用,而忽略了深入JS语言规范以及架构的学习。本人认为工具够用就好,没必要总是尝试最新的工具各种功能。简单介绍一下本项目使用的几个前端工具,以及怎么用的,仅供参考:1)nodejs,npm主要用来装gulp以及gulp的一些包,还有单元测试框架jasmine,karma以及karma的一些插件原创 2017-01-23 10:57:48 · 817 阅读 · 0 评论 -
AngularJS实际项目应用——命名规范概览
有一条好的软件设计原则叫CoC(Convention over Configuration),即惯例优于配置原则,详见:wiki项目需要一个好的命名规范,这样可以大大降低学习成本以及查找成本,通过对文件名以适当的形式命名,可以非常快速的知道这个文件的类型,作用以及用来实现的功能。在本项目开发的过程中,主要参考了两个命名规范:一个是github上关于angularjs的规范,一个是google自原创 2017-01-22 17:06:18 · 3711 阅读 · 1 评论 -
AngularJS在实际项目中的应用系列目录
1,项目目录结构概览2,命名规范概览3,前端工具介绍4,前端js框架以及库介绍5,程序入口启动6,模块划分7,模块路由8,Controller层介绍9,Service层介绍10,移动端设计11,动态模块切换设计12,单元测试框架设计13,打包发布原创 2017-01-20 16:23:29 · 1194 阅读 · 0 评论