【实例分解一】angular+require+ngroute+bootstrap
之前项目中实现过这样的一套前端框架，但angular版本还是1.0.X的，bootstrap是2.0的。当时项目时间较紧，加上研究不够深入，对angular理解不够透彻，虽然功能实现，但也确实存在一些bug，很多地方可以优化。所以项目准备升级到angular1.3.X、bootstrap3。
下面是调研时做得一个简单的框架demo，angularJS1.3.15,bootstrap3，requireJS2.1.16,ngroute1.3.15.模拟对话框使用了ngDialog，实现了动态template和controller文件，下面会有介绍。
文件结构参考网上各种大神的建议，将各个页面和对应的controller放到了同一个文件目录下，这样子确实方便了查找，不用再翻到controller的文件夹中查找页面对应的controller，结构如下：
[img]data/attachment/album/201506/04/164151hpimplpsw41gpp4a.gif[/img]
首先我们来说一说bootstrap3，bootstrap3和bootsrtap2相比，不同的地方也是蛮多的，但对我们项目而言，升级起来，改动量最大的就是页面的布局这一方面，bootstrap2中span*在bootstrap3中已经不复存在 ，变成了col-**-*，这个好处是多多的，移动优先嘛。麻烦的就是我们这些程序员了，苦逼的改代码吧。
其它的不多说，官网上面都有详细说明，送上中文网地址：http://www.bootcss.com/
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>fish.UI.index</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 8 <link rel="stylesheet" href="../../resources/css/bootstrap.css" /> 9 <link rel="stylesheet" href="../../resources/css/ngDialog.min.css" /> 10 <link rel="stylesheet" href="../../resources/css/ngDialog-theme-default.min.css" /> 11 <link rel="stylesheet" href="../../resources/css/style.css" /> 12 </head> 13 14 <body ng-controller='mainctrl'> 15 <div class="container main"> 16 <div class="row"> 17 <div class="col-md-2 main_content"> 18 <mymenu></mymenu> 19 </div> 20 <div class="col-md-10 page_main" ng-view> 21 </div> 22 </div> 23 </div> 24 <script src="../../resources/plugin/require/require.js" defer async="true" data-main="../../resources/main"></script> 25 </body> 26 27 </html>
requireJS的用法这边不做过多说明，网上说明很多，没有额外扩展的操作，附上配置信息：
1 (function() { 2 require.config({ 3 baseUrl: '../../resources/', 4 paths: { 5 jquery: 'js/jquery.min', 6 bootstrap: 'plugin/bootstrap/js/bootstrap.min', 7 angular: 'plugin/angular/js/angular.min', 8 ngRoute: 'plugin/angular/js/angular-route', 9 routeConfig: 'plugin/utils/route-config', 10 ngDialog: 'plugin/angular/js/ngDialog.min', 11 //text:'plugin/require/text',//用于require加载html,css等非js文件 12 app: 'app', 13 directives: 'js/directive', 14 services: 'js/service', 15 route: 'routes', 16 mainCtrl: '../items/index/indexCtrl' 17 }, 18 shim: { 19 bootstrap: { 20 deps: ['jquery'], 21 exports: 'bootstrap' 22 }, 23 angular: { 24 deps: ['jquery'], 25 exports: 'angular' 26 }, 27 ngDialog: { 28 deps: ['angular'] 29 }, 30 ngRoute: { 31 deps: ['angular'] 32 }, 33 routeConfig: { 34 deps: ['angular'] 35 }, 36 app: { 37 deps: ['ngRoute'] 38 }, 39 directives: { 40 deps: ['angular'] 41 }, 42 services: { 43 deps: ['app'] 44 }, 45 route: { 46 deps: ['app'] 47 }, 48 mainCtrl: { 49 deps: ['angular'] 50 } 51 }, 52 urlArgs: 'v=' + (new Date()).getTime() 53 }); 54 require(['angular', 'bootstrap', 'app', 'ngRoute', 'ngDialog', 'routeConfig', 'directives', 'services', 'route', 'mainCtrl'], function(angular) { 55 angular.bootstrap(document, ['myapp']); 56 }); 57 })(this);
初始化angularJS,在这边给document绑定module.
1 angular.bootstrap(document, ['myapp']);
这里先对几个引入的文件说明下，后面会有具体的介绍。
ngRoute:angularJS路由模块，angularJS从1.2.X开始就把路由模块分离出来了，所以这边需要引用；
routeConfig:这个模块是为了实现根据当前路由，动态加载template和controller文件，项目越大，文件越来越多，是肯定是要实现按需加载的。所以这一步是肯定要做的。
services:里面封装了一个模拟对话框的服务，使dialog在不同的页面可以重复调用。后面会有介绍。
app.js代码如下：
1 define(['angular', 'routeConfig'], function(angular, routeConfig) { 2 var app = angular.module('myapp', ['ngRoute','ngDialog', 3 function($compileProvider, $controllerProvider) { 4 routeConfig.setCompileProvider($compileProvider); 5 routeConfig.setControllerProvider($controllerProvider); 6 } 7 ]); 8 return app; 9 })
app中定义angular模块，加载了一些模块。
下一篇会对route按需加载controller进行介绍..
