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

時間 2019-11-20

標籤實例分解一 angular+require+ngroute+bootstrap angular require ngroute bootstrap 欄目 AngularJS 简体版

原文原文鏈接

以前項目中實現過這樣的一套前端框架，但angular版本仍是1.0.X的，bootstrap是2.0的。當時項目時間較緊，加上研究不夠深刻，對angular理解不夠透徹，雖然功能實現，但也確實存在一些bug，不少地方能夠優化。因此項目準備升級到angular1.3.X、bootstrap3。css

下面是調研時作得一個簡單的框架demo，angularJS1.3.15,bootstrap3，requireJS2.1.16,ngroute1.3.15.模擬對話框使用了ngDialog，實現了動態template和controller文件，下面會有介紹。html

文件結構參考網上各類大神的建議，將各個頁面和對應的controller放到了同一個文件目錄下，這樣子確實方便了查找，不用再翻到controller的文件夾中查找頁面對應的controller，結構以下：前端

[img]data/attachment/album/201506/04/164151hpimplpsw41gpp4a.gif[/img]jquery

首先咱們來講一說bootstrap3，bootstrap3和bootsrtap2相比，不一樣的地方也是蠻多的，但對咱們項目而言，升級起來，改動量最大的就是頁面的佈局這一方面，bootstrap2中span*在bootstrap3中已經不復存在，變成了col-**-*，這個好處是多多的，移動優先嘛。麻煩的就是咱們這些程序員了，苦逼的改代碼吧。程序員

其它的很少說，官網上面都有詳細說明，送上中文網地址：http://www.bootcss.com/bootstrap

 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.app

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

這裏先對幾個引入的文件說明下，後面會有具體的介紹。框架

ngRoute:angularJS路由模塊，angularJS從1.2.X開始就把路由模塊分離出來了，因此這邊須要引用；
routeConfig:這個模塊是爲了實現根據當前路由，動態加載template和controller文件，項目越大，文件愈來愈多，是確定是要實現按需加載的。因此這一步是確定要作的。
services:裏面封裝了一個模擬對話框的服務，使dialog在不一樣的頁面能夠重複調用。後面會有介紹。async

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進行介紹..

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。