您所在的位置:小祥子 » 编程 » JavaScript » 正文

【实例分解一】angular+require+ngroute+bootstrap

时间:2015-06-09 编辑:十八子客栈 来源:本站整理

之前项目中实现过这样的一套前端框架,但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,结构如下:

首先我们来说一说bootstrap3,bootstrap3和bootsrtap2相比,不同的地方也是蛮多的,但对我们项目而言,升级起来,改动量最大的就是页面的布局这一方面,bootstrap2中span*在bootstrap3中已经不复存在 ,变成了col-**-*,这个好处是多多的,移动优先嘛。麻烦的就是我们这些程序员了,苦逼的改代码吧。

其它的不多说,官网上面都有详细说明,送上中文网地址:http://www.bootCSS.com/

 <!DOCTYPE html>
 <html>
 
 <head>
 <meta charset="utf-8">
 <title>fish.UI.index</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 <link rel="stylesheet" href="../../resources/css/bootstrap.css" />
 <link rel="stylesheet" href="../../resources/css/ngDialog.min.css" />
 <link rel="stylesheet" href="../../resources/css/ngDialog-theme-default.min.css" />
 <link rel="stylesheet" href="../../resources/css/style.css" />
 </head>
 
 <body ng-controller='mainctrl'>
 <div class="container main">
 <div class="row">
 <div class="col-md-2 main_content">
 <mymenu></mymenu>
 </div>
 <div class="col-md-10 page_main" ng-view>
 </div>
 </div>
 </div>
 <script src="../../resources/plugin/require/require.js" defer async="true" data-main="../../resources/main"></script>
 </body>
 
 </html>

requireJS的用法这边不做过多说明,网上说明很多,没有额外扩展的操作,附上配置信息:

 (function() {
 require.config({
 baseUrl: '../../resources/',
 paths: {
 jquery: 'js/jquery.min',
 bootstrap: 'plugin/bootstrap/js/bootstrap.min',
 angular: 'plugin/angular/js/angular.min',
 ngRoute: 'plugin/angular/js/angular-route',
 routeConfig: 'plugin/utils/route-config',
 ngDialog: 'plugin/angular/js/ngDialog.min',
 //text:'plugin/require/text',//用于require加载html,css等非js文件
 app: 'app',
 directives: 'js/directive',
 services: 'js/service',
 route: 'routes',
 mainCtrl: '../items/index/indexCtrl'
 },
 shim: {
 bootstrap: {
 deps: ['jquery'],
 exports: 'bootstrap'
 },
 angular: {
 deps: ['jquery'],
 exports: 'angular'
 },
 ngDialog: {
 deps: ['angular']
 },
 ngRoute: {
 deps: ['angular']
 },
 routeConfig: {
 deps: ['angular']
 },
 app: {
 deps: ['ngRoute']
 },
 directives: {
 deps: ['angular']
 },
 services: {
 deps: ['app']
 },
 route: {
 deps: ['app']
 },
 mainCtrl: {
 deps: ['angular']
 }
 },
 urlArgs: 'v=' + (new Date()).getTime()
 });
 require(['angular', 'bootstrap', 'app', 'ngRoute', 'ngDialog', 'routeConfig', 'directives', 'services', 'route', 'mainCtrl'], function(angular) {
 angular.bootstrap(document, ['myapp']);
 });
 })(this);

初始化angularJS,在这边给document绑定module.

 angular.bootstrap(document, ['myapp']);

这里先对几个引入的文件说明下,后面会有具体的介绍。

ngRoute:angularJS路由模块,angularJS从1.2.X开始就把路由模块分离出来了,所以这边需要引用;
routeConfig:这个模块是为了实现根据当前路由,动态加载template和controller文件,项目越大,文件越来越多,是肯定是要实现按需加载的。所以这一步是肯定要做的。
services:里面封装了一个模拟对话框的服务,使dialog在不同的页面可以重复调用。后面会有介绍。

app.js代码如下:

 define(['angular', 'routeConfig'], function(angular, routeConfig) {
 var app = angular.module('myapp', ['ngRoute','ngDialog',
 function($compileProvider, $controllerProvider) {
 routeConfig.setCompileProvider($compileProvider);
 routeConfig.setControllerProvider($controllerProvider);
 }
 ]);
 return app;
 })

app中定义angular模块,加载了一些模块。


下一篇会对route按需加载controller进行介绍..

关键词:ul