采用angularjs+requirejs+ui-route搭出前端路由经验

最新推荐文章于 2018-11-27 09:46:31 发布

爱酷的桥俏皮

最新推荐文章于 2018-11-27 09:46:31 发布

阅读量2.7k

点赞数 1

本文链接：https://blog.csdn.net/lq15310444798/article/details/72591879

版权

angularJS 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

require.js

3 篇文章 0 订阅

订阅专栏

angularAMD

2 篇文章 0 订阅

订阅专栏

使用angularjs+requirejs+ui-route+angularAMD搭出路由机制，按需进行js的加载

1：需要导入的js文件有

（1）：angular.js

（2）：require.js

（3）：angular-ui-router.js

（4）：angularAMD.js//用于app.js中配置路由

2：main.js的编写：requirejs主要的文件包括一个主要的js（main.js）main.js里面是项目开始就需要引入的js，它是项目js的入口，就相当于java语言或者C语言中的main()函数，并且采用AMD规范来写。学习require.js建议参考（require.js用法详解）参考代码如下

define(function(){

//config配置模块

require.config({
//baseUrl:用来指定加载模块的目录
//baseUrl:"js/injs",
//paths，是指定模块的加载路径。
paths:{
"angular":"/questionnairePrj/js/angular/angular",
"jquery":"/questionnairePrj/js/jquery-2.1.1/jquery",
"angularAMD":"/questionnairePrj/js/angular/angularAMD",
"angular-ui-router":"/questionnairePrj/js/angular/angular-ui-router",
"ngload":"/questionnairePrj/js/angular/ngload",
"angularResource":"/questionnairePrj/js/angular/angular-resource"
},
//shim:是配置不兼容的模块。
shim : {
"angular" : {
exports : "angular"
},
"angular-ui-router":["angular"],
"angularAMD":["angular"],
"ngload":["angularAMD"],
"ngResource":["angular"],
'angularResource': ['angular'],
},
//deps:用来指定依赖模块，requireJS会加载这个文件并执行。
deps : ['app']
});

});

3：app.js的编写：一个用于路由的js(app.js)，app.js里面配置的是自己的路由。具体参考代码如下

//采用angularAMD规范写
define(["angular","angularAMD","angular-ui-router","angularResource"],function(angular,angularAMD){
//实例化angularJS
var app = angular.module("app",['ui.router','ngResource']);
//配置
app.config(function($stateProvider, $urlRouterProvider,$rootScopeProvider){
$urlRouterProvider.otherwise("/login");
$stateProvider

.state("login",angularAMD.route({
url:"/login",
templateUrl:"../html/login.html",
controller:"login",
controllerUrl:["../js/injs/js/login.js"]//切记，这里一定是一个数组
}))

.state("index",angularAMD.route({
url:"/index",
templateUrl:"../html/file.html",
controller:"my"
}))

.state("home",angularAMD.route({
url:"/home",
templateUrl:"../html/home.html",
controller:"homeController",
controllerUrl:["../js/injs/js/home.js"]
}))

.state("questionnireCenter",angularAMD.route({
url:"/questionnireCenter",
templateUrl:"../html/questionnire/QuestionnaireCenter.html",
controllerUrl:["../js/injs/js/questionnire/questionnireCenter.js",
"../js/injs/js/questionnire/questionnireService.js"]
}))
});
return angularAMD.bootstrap(app);
});

当这两个文件写好后，在主界面里面引入main.js和一些依赖的js就行了。示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>问卷制作(桥)</title>

<link href="../css/incss/index.css" rel="stylesheet"
type="text/css">
<link href="../css/incss/common.css" rel="stylesheet" type="text/css">
<link href="../css/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="../js/jquery-2.1.1/jquery.js"type="text/javascript"></script>
<script src="../js/require/require.js" data-main="/questionnairePrj/js/injs/main.js"></script>这里就是引入的require.js，用来加载js,data-main=""指明入口js

</head>
<body>
<div ui-view class="container-fluid"></div>
</body>
</html>

爱酷的桥俏皮

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
采用angularjs+requirejs+ui-route搭出前端路由经验

使用angularjs+requirejs+ui-route搭出路由机制，按需进行js的加载1：需要导入的js文件有（1）：angular.js（2）：require.js（3）：angular-ui-router.js（4）：angularAMD.js//用于app.js中配置路由2：main.js的编写：requirejs主要的文件包括一个主要的js（main.js）m
复制链接

扫一扫