之前项目中实现过这样的一套前端框架，但angular版本还是1.0.X的，bootstrap是2.0的。当时项目时间较紧，加上研究不够深入，对angular理解不够透彻，虽然功能实现，但也确实存在一些bug，很多地方可以优化。所以项目准备升级到angular1.3.X、boots ...
之前项目中实现过这样的一套前端框架，但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 >16 <div >17 <div >18 <mymenu></mymenu>19 </div>20 <div ng-view>21 </div>22 </div>23 </div>24 <script src='/images/loading.gif' data-original="../../resources/plugin/require/require.js" defer async="true" data-main="../../resources/main"></script>25 </body>26 27 </html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：【实例分解一】angular+require+ngroute+bootstrap
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
