一眨眼,快三个月没有写博客了。一直在为自己没有写博客而懊恼,忙过这段时间,好好总结一下。

新项目主要是自己一个人在写,先搭建了一个初步的架构,用了我并不熟悉的angular,这个过程中,慢慢也熟悉了angular,同时也优化了自己的项目架构。

这两个多月里一直处在高强度的工作中,项目是一个面向用户的创作中心,涉及到数据、语音、图片、地图等等。

地图上的交互很复杂,由于项目需要还会同时用两种地图,一个谷歌一个高德,谷歌主要面向国外数据,高德面向国内数据,

两个地图可以任意切换,但是内容都要保持一致,并且最好能够相互补充,地图开发商的接口不一样,很多逻辑的实现方法也会不一样,

逻辑虽然是通的,但是适应每一个地图的代码却略有不同。这是这个项目比较难的一个地方。

使用angular后,前后端进行了分离,前端需要去调用后端接口,后端接口比较抽象,常常不能一次性拿到自己想要的数据,请求一个接口获取到内容之后往往还需要根据当前数据,

再次去请求另一个接口,前后端分离之后对前端的要求其实就更高了,同步明明可以很简单就解决的问题,异步之后就需要花费更多的逻辑去处理。

现在想想这个项目开发过程中会发生很多事情:

  •   理解需求、打通数据逻辑、和产品交流,质疑产品设计的问题(修正一些问题或者还是回去照着产品的做)
  •   画娃娃图(用例)、初步技术设计,搭建开发架构、定好主要接口
  •   看原型图、看设计稿相互对比、提出疑问、纠正错误、提出前端方面的建议
  •   和后端协商数据库结构、顾忌以后的需求扩展、商量数据细节、争论命名(其实英文都不好 O(∩_∩)O )
  • 被压缩开发时间,表示不满,然后抗议无效
  • 调整优化前端架构、维护webfont、找插件或者写插件  
  • 熟悉angular,踩过那些坑
  • 后端和我都是第一次用cors跨域资源共享,折腾了一遍
  • 开发:时间紧、功能多、难度大、每天到五点的时候就感觉全身疼痛,写不动了
  • 每天:加一个小时班、加两个小时班、最后快提测时到同事家加班
  •    项目bug多、开发过程中忽略很多细节,实际已经把测试时间也算进开发时间里,先粗再细,也算一种讨巧和无奈吧
  • 在压缩的时间中挑战自我,然后失败,上线延期/(ㄒoㄒ)/~~
  • 负面情绪猛涨然后慢慢泻下,自己经历了痛苦、收获了经验、看到了成长

说说项目架构:

angular + browserify + gulp + bower + less

angular 主要使用了扩展: angular-ui-router、angular-bootstrap

browserify管理打包js

bower管理三方库

gulp自动化构建项目

项目根目录如下:

build文件夹是构建工具最后生成的部署代码,src是所有源代码,temp只是一些临时文件

源码根目录如下:

app.js注册了根模块:

angular.module("zmng", [
"ui.router",
"ui.bootstrap",
"ngAnimate", "zmng.main",
"zmng.test"
]); require("./config.js");
require('./common/js/resize.js');

引入src目录下的config.js、http.js,最后browserify会编译app.js,gulp输出到 build->app.js

common:

存有所有img资源,

一些全局js放在js文件夹(例如:我放置了环境配置和配合rem的resize),

三方的css库、webfont和自己抽象的css,最后会把所有的less引入到app.less中,编译为一个app.css到build

 modules:

所有业务按模块写在modules里:

modules.less

modules目录下有一个modules.less,所有模块里的less会被引入到modules.less里,common的app.less会引入此文件

modules.less

//layout
@import "layout/less/header.less";
@import "layout/less/footer.less";
@import "layout/less/content.less"; // main
@import "main/less/index.less"; // test
@import "test/less/main.less";

js&html:

js代码按控制器、指令和服务划分,控制器控制页面和逻辑,公用的页面或者独立的插件抽离为指令,服务写后台请求接口

每个模块下同样有app.js,用来注册模块和引入当前模块下所有的js,最后编译成一个文件。

config控制路由

templates管理模块html,最后被打包到build(less会被打包到common的app.css里),如下:

test模块的app.js生成到build->modules->test->js->test.js,生成出的js我命名为模块的名字test.js,这样是为了在入口html引入js资源的时候,不想结尾看到的全是app.js,最终如下:

    <script type="text/javascript" src="build/app.js"></script>

    <script type="text/javascript" src="build/modules/layout/js/layout.js"></script>
<script type="text/javascript" src="build/modules/main/js/main.js"></script>
<script type="text/javascript" src="build/modules/test/js/test.js"></script>

这样看起来比较清晰

此架构的优势:

  • 按模块换分,每个模块的js代码最终打包生成为一个模块js,在html引入模块资源时很方便
  • less最终生成一个css,适用于单页面应用
  • 架构默认使用rem布局,可以参照架构里的less代码,支持webfont
  • 方便开发,默认gulp任务用于开发,gulp deploy用于压缩发布

架构代码已经开源到github,说这么多也许看代码更容易让人明白: github地址 https://github.com/zimv/zmNgFrameWork

一些踩过的小坑和建议:

  • 写路由的方法有很多,链接后面带参数如果用 url : "/test/:Id" 这种写法,链接后面如果没有参数,也必须要加上/,如:  /test/,

    写成 /test  的话就会找不到路由。还是建议用 url : "/test?id"   这种写法

  • 用ui-bootstrap的modal插件时候,要把当前控制器的作用域传给modal,否则,在没有关闭当前modal时,页面跳转,modal就不会自动关闭
  • 常常通过隔离作用域来达到作用域间的独立,也会用到@、=、&的方式相互调用数据,但是一旦数据多了,写起来就会很麻烦,

    建议可以直接把当前scope传给另一个作用域,比如:

  angular.module("zmng")
.directive("test", test);
function test() {
return {
restrict: "AE",
replace : true,
scope : {
testScope: "="
},
link : function() {
$scope.testScope = $scope;
}
}
}

这样代码要干净很多,扩展也不用再多写参数

  • 用了定时器,记得加上$scope.$apply()
  • 某一个页面功能太复杂,可以把一些子功能抽离成指令并且不要隔离scope,这样代码就不会全部揉在一起
  • 小心重复提交数据,为按钮做重复提交限制
  • 为避免select出现空白选项,为select设置一个空值,显示请选择,初始化的时候把ng-model的值设置为空字符串

结语:

做项目成长的才会更快,但不一定成长的更好

高压下容易产生负能量需要去诉说去释放,需要时刻告诉自己,自己的目标是什么

在写代码时,架构做过几次调整,没有最合适的架构,只有不断调整才能适应需求

 

ng1.5.5&md5-cache对架构稍微做了调整:

  调整之后build目录有所改变,之前重命名app.js为文件名:test/test.js ,现在不重命名: test/app.js

angular项目总结——angular + browserify + gulp + bower + less 架构分享的更多相关文章

  1. angularjs探秘<三> 控制器controller及angular项目结构

    先来看一个例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...

  2. Angular企业级开发(6)-使用Gulp构建和打包前端项目

    1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...

  3. gulp 在 angular 项目中的使用

    gulp 在 angular 项目中的使用 keyword:gulp,angularjs,ng,ngAnnotate,jshint,gulpfile 最后附完整简洁的ng项目gulpfile.js 准 ...

  4. angular项目grunt serve报错Cannot find where you keep your Bower packages

    运行angular项目grunt serve一直报错,截图如下: 无法找到报错Bower包的位置. 解决方法: 1.全局安装bower npm install bower -g 2.检查是否安装成功 ...

  5. angular项目中各个文件的作用

    原文地址 https://www.jianshu.com/p/176ea79a7101 大纲 1.对angular项目中的一些文件的概述 2.对其中一些文件的详细描述 2.1.package.json ...

  6. Angular项目构建指南 - 不再为angular构建而犹豫不决(转)

    如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的. Angular和它之前所出现的其余 ...

  7. angular 项目回顾

    从学习angular,到实际项目开发不到一周,完全是边写边学呀,都是为了项目,已使用angular 开发了两个项目了,有些技术当时只是会用,都没好好回顾一下,现在有时间回顾一下,项目中用到的一些指令, ...

  8. Webpack入门——使用Webpack打包Angular项目的一个例子

    2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...

  9. 把angular项目整合到.net mvc中

    之前的开发选择的是完全舍弃服务端,仅保留最简单web服务器提供angular经打包的静态资源,此外所有的业务与数据请求都访问一个分离的WebApi来实现.不过最近碰到一个需求,有必要使用多个客户端,而 ...

随机推荐

  1. LNMP 部署

    一.防火墙配置 CentOS 7.x默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop firewalld.servic ...

  2. 怎样让.bat文件开机自启动

    Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\R ...

  3. storysnail的Linux串口编程笔记

    storysnail的Linux串口编程笔记 作者 He YiJun – storysnail<at>gmail.com 团队 ls 版权 转载请保留本声明! 本文档包含的原创代码根据Ge ...

  4. Yii2中的入口文件环境配置

    默认的Debug配置 在入口文件中 defined ( 'YII_DEBUG' ) or define ( 'YII_DEBUG', true ); defined ( 'YII_ENV' ) or ...

  5. 用c#开发微信 系列汇总

    网上开发微信开发的教程很多,但c#相对较少.这里列出了我所有c#开发微信的文章,方便自己随时查阅.   一.基础知识 用c#开发微信(1)服务号的服务器配置和企业号的回调模式 - url接入 (源码下 ...

  6. 教你如何完美保存Html编辑器编辑过的文本到Word中

    有时候在网页上面编辑了一段文字,有图片,想保存一份到word文档里面,但是复制粘贴以后发现格式并没有保存下来,今天就来教大家如何完整的保存Html编辑器编辑过的文字(可以包含图片,但是图片必须是绝对路 ...

  7. 假如现在有一堆长度大于3小于9的电话号码,用座机呼叫,如果出现这样的号码【123和12345】那么12345将永远不会被拨出,因为拨到123的时候电话已经呼出了,试写一个函数输出所有不能被呼出的电话号码(java实现)

    解题: 假如现在有一堆长度大于3小于9的电话号码,用座机呼叫,如果出现这样的号码[123和12345]那么12345将永远不会被拨出,因为拨到123的时候电话已经呼出了,试写一个函数输出所有不能被呼出 ...

  8. json-smart 使用示例(推荐fastjson)

    关于json库,请使用fastjson,这是我用过的最好用的json库! 地址:https://github.com/alibaba/fastjson ======================== ...

  9. [专业名词·硬件] 1、等效串联电阻ESR概述及稳压电路中带有一定量ESR电容的好处

        一.等效串联电阻ESR概述 ESR是Equivalent Series Resistance的缩写,即“等效串联电阻”.理想的电容自身不会有任何能量损失,但实际上,因为制造电容的材料有电阻,电 ...

  10. 说说设计模式~策略模式(Strategy)

    返回目录 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.而对于客户端(UI)来说,可以通过IOC再配合工厂模块,实现动态策略的切换,策略模块通常于一个抽象策略对象(in ...