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

ゝ一世哀愁。 2022-06-15 02:11 120阅读 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>




问卷制作(桥)






这里就是引入的require.js,用来加载js,data-main=””指明入口js





发表评论

表情:
评论列表 (有 0 条评论,120人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Vue Router前端

    感受前端路由 1、简介 2、HTML页面使用路由 1、简介 传统的Web应用程序不同页面间的跳转都是向服务器发起请求,服务器处理请求后向浏览器推送页面

    相关 前端与后端

    后端路由 意味着 浏览器刷新页面。显然很多 webapp 的需求上是不希望这样的体验的。网速慢的话说不定屏幕全白再有新内容。 前端路由就不会有这样的问题了。随意控制,逻辑也可

    相关 前端与后端

    后端路由 意味着 浏览器刷新页面。显然很多 webapp 的需求上是不希望这样的体验的。网速慢的话说不定屏幕全白再有新内容。 前端路由就不会有这样的问题了。随意控制,逻辑也可

    相关 什么是前端

    前端路由在很多开源的js类库框架中都得到支持,如angularJS,Backbone,Reactjs等等。这篇文章主要和大家谈谈什么是前端路由,以及它的使用场景及优缺点 1

    相关 前端】Vue

    介绍   为了提高浏览器页面响应速度,在功能的开发中,应该尽量避免创建多个页面,因为浏览器在页面的跳转过程中会先删除之前的界面,然后重新渲染新加载界面上的DOM元素,这一