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

ゝ一世哀愁。 2022-06-15 02:11 92阅读 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用法详解][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>

[require.js]: http://www.ruanyifeng.com/blog/2012/11/require_js.html