【实例分解一】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进行介绍..

时间: 2024-10-23 05:06:32

【实例分解一】angular+require+ngroute+bootstrap的相关文章

Angular 中引入BootStrap

由于Bootstrap官方目前并没有发布Angular的相关类库进行支持,当前Angular只能引用使用Bootstrap相关的样式.无法使用Bootstrap自带的脚本逻辑.以下以Angular7和Bootsrap4.2为例进行demo验证. 环境搭建 首先执行以下两个命令创建angular项目和组件 ng new AngularDemo //创建项目 ng g c bootstrapdemo // 创建组件 然后执行 npm install bootstrap // 安装最新的bootstr

Angular中使用bootstrap样式

Angular中使用bootstrap样式 Angular中引入bootstrap的方法 ? 方法1:在Angular.json中的styles数组中添加bootstrap路径 如下所示: "styles": [ "src/styles.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ] 这里需要注意路径问题,不同Angular版本下,Angular.json的位置可能有所不

【实例分解二】angularjs根据路由按需加载Controller

开始笔记之前,把早上检测到的angularjs中的命名问题做一下记录. 检测工具:google浏览器扩展工具angularJS,结果如下: angularjs中,module要遵守lowerCamelCase原则,例:"myApp"; controller要遵守UpperCamelCase原则并且要以Controller结尾,例:"MainController". 这一篇笔记主要对angularjs根据路由按需加载Controller的操作进行了说明,也就是上一篇中

Angular之ngRoute与uiRoute

ngRoute不支持嵌套路由 用法如下: 1 <!DOCTYPE html> 2 <html lang="en" ng-app="myApp"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width = device-width, initial-scale = 1.0,

angular中ng-route和ng-ui-router的差异($http)

ngroute和ui-router并不是两个相互独立的部分,ui-router是社区库提供的用来提高ngroute的功能的,可用于多视图(嵌套),功能十分强大! 为了全面的了解两者的不同点,在这里我就加上$http请求时对两者进行比较, 1.引入文件:  ngroute:<script src="angular-route.js"></script>  ui-router:<script src="angular-ui-router.js&quo

angular 使用 ui.bootstrap 弹窗

在下才疏学浅,不足之处,请各位指正. 接下来介绍使用angular的组件,将页面上input的数据显示出来,直接上代码 <!DOCTYPE html> <html lang="en" ng-app="indexApp"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="styleshe

Angular require(抄别的)

require参数的值可以用下面的前缀进行修饰,这会改变查找控制器时的行为:?如果在当前指令中没有找到所需要的控制器,会将null作为传给link函数的第四个参数.^如果添加了^前缀,指令会在上游的指令链中查找require参数所指定的控制器.?^将前面两个选项的行为组合起来,我们可选择地加载需要的指令并在父指令链中进行查找.没有前缀如果没有前缀,指令将会在自身所提供的控制器中进行查找,如果没有找到任何控制器(或具有指定名字的指令)就抛出一个错误. 在自定义Angular指令时. 举个简单的例子

angular 使用ui.bootstrap的分页

在下才疏学浅,不足之处,还请大家指正. 代码如下 <!DOCTYPE html> <html lang="en" ng-app="indexApp"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../js/bootstrap

关于Breeze.js+Angular.js+KendoUI+BootStrap+TypeScript+EF4.5的使用心得记录之一

第一章:数据交互 提醒:博客开篇之作.望指导.不喜随便喷. 什么也不说,先上图. 就kendoui官网有详细的API说明,不做过多累赘,以下图中用到的控件为例: 一.DropDownList,Grid 页面简洁得体,是我个人比较偏爱的.主要来讲讲DropDownList和GridOnLineEdit结合Angular和BreezeJs的应用. 1.Breeze.js ?功能:负责处理前端和后端程序的通讯. 用法:到官网下载Breeze包.在页面引入上图中JS. 添加Breeze.WebApi2.