Giorgio.WEB
|-app // WEB前端模块源码
|-_common // 全局共享目录
|- module.js // 全局共享路由配置
|-home // 首页模块
|-admin // 项目后台管理模块
|-app.js // angular顶层入口，在其它模块定义的Module要在这里注入
|-main.js // 手动bootstrap（运行）项目
|-layout // 全局布局模块
|-assets // 资源: js、css、images、lib(第三方插件，非Bower和npm)
|-bower_components // bower前端依赖组件
|-node_modules // npm依赖包
|-build // 部署打包生成文件
|-tests // 测试
|-404.html // 404
|-app.config.js // 配置文件
|-app.scripts.json // 依赖插件配置
|-bower.json // bower配置
|-package.json // package配置
|-gulpfile.js // gulp配置
|-README.md // 项目说明
|-index.html // 项目主页 整体项目结构大致如上，第一个模块下都有一个module.js文件进行路由配置。 注：项目结构以当前实际目录结构为准，以上只供参考。
首先运行如下命令，从远程仓库将项目源码拉取到本地。
Git clone https://github.com/veyhunk/Liu.git
首先需要下载Node.js，选择LTS（Long Term Support）版本，下载完成之后，在项目根目录运行：
npm install安装bower包依赖管理器:
npm install -g bower然后在项目根目录下运行如下指令：
bower install安装完依赖包之后，安装gulp，顺序运行如下命令：
npm install --g gulp-cli
// sudo npm install --g gulp-cli // for mac
npm install --save-dev gulp现在运行项目:
gulp到此，项目就部署完成，如无意外，会自动弹出页面。已经将BrowserSync整合，代码修改后，浏览器页面会自动刷新，不需要其它操作。（如果代码修改后发生错误，可能页面不会自动刷新，这时候需要手动刷新下）
拿demo模块为例，首先需要在本模块下新建一个module.js文件，在这个文件内进行模块申明和配置，此文件的内容类似如下：
(function(){
'use strict';
angular
// module定义要注意，后面没第二个参数是获取
// 下面这样是重新定义一个新的，定义只在module.js文件中进行
// 其它地方获取使用，不需要第二个参数如.module('app.demo').controller()
.module('app.demo',['ui.router'])
.config(DemoConfig);
DemoConfig.$inject = ['$stateProvider'];
function DemoConfig($stateProvider){
$stateProvider
.state('app.demo', {
url: '/demo',
data: {
title: 'Demo'
},
views: {
'content@app': {
templateUrl: 'app/demo/views/demo.html',
controller: 'DemoCtrl'
}
}
})
}
})();app.demo就是此模块的名称，将此模块注入到最外层的app.js文件中，这样就完成模块注册，之后就可以调用之前注册的模块进行开发工作，如下：
(function(){
'use strict';
angular
.module('app.demo')
.controller('DemoCtrl',DemoCtrl);
// 必须要这么写注入，后期可能会压缩代码
DemoCtrl.$inject = ['$scope'];
function DemoCtrl($scope) {
var vm = this;
var i = 0;
console.info($scope);
vm.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light', notAnOption: true},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark', notAnOption: true},
{name:'yellow', shade:'light', notAnOption: false}
]
vm.select = vm.colors[2];
}
})(); 所有模块请使用匿名立即执行函数包裹，防止对全局空间的污染：
(function(){
// 模块定义
// Module Definitions
})(); // 后面跟`;` 不然打包的时候可能出错！因为在架构的过程中，删除了一些可能用不上的插件，和原来的UI框架还是有所区别，如在使用一些功能时出现无找到插件等错误，请自行使用bower安装，需要配置app.scripts.json 文件中的信息，并重新运行gulp命令,弄不来随时call我。在项目中使用到的第三方组件大致如下：
这个组件是我自己写的treetable，基本覆盖原型文档中大部分的树形表格显示，暂时支持radio和checkbox，详细内容参看nc-widgets中的docs和README
图表组件使用highcharts-ng，选项接口有点区别，支持angular双向绑定，具体信息参看官方文档。
消息提示的插件，参看：angular-toast
本地存储插件使用 angularLocalStorage
使用angular-datatables作为表格显示组件，具体资料参看官方
将bootstrap-datetimepicker进行简单的封装，所有配置参考官网API文档，使用方法如下：
statisticalanalysis-declaration-energy-consume.html
<div class='input-group date' nc-datetimepicker nc-option="DeclarationBasisOwner.dateOption">
<input type='text' class="form-control" ng-model="DeclarationBasisOwner.selectYear" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>DeclarationEnergyConsumeCtrl.js
vm.dateOption = {
startView: 'decade',
minView: 'decade',
format: 'yyyy'
};使用Restangular来实现RESTful接口，已经在master中配置好，只需要根据官方文档进行使用就行，在相应的model注入调用就好，API的base路径已经设置。
有些插件是打包在其它vendor文件中，这些文件在初始化的时候没有加载进项目，需要在路由配置的时候手动进行懒加载，如下：
.state('app.ui.jqueryUi', {
url: '/ui/jquery-ui',
data: {
title: 'JQuery UI'
},
views: {
"content@app": {
templateUrl: 'app/ui/views/jquery-ui.html',
controller: 'JquiCtrl'
}
},
resolve: {
srcipts: function(lazyScript){
return lazyScript.register([
'build/vendor.ui.js'
])
}
}
})每天来秀智商之前，一定先使用fetch命令抓取下服务器仓库中的内容，之后使用diff看看有什么区别，再进行手动merge，因为暂时没有使用branch和pull request，有可能产生冲突。
其实每个人负责一个模块，就是一个branch，当这个人完成模块的时候，就向管理人员发起pull request，管理人员code review之后，如果没问题再将代码merge到master分支中。
当几个模块完成后，由管理人员，对源码进行tag处理，也就是版本发布，每个阶段，对应相应的版本。 以上内容因为人员和学习成本的问题，估计暂时无法实行，只作为提议。
1、AngularJS 开发介绍 2、前端组队“打怪”规范 3、GIS团队开发
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent