如何在项目中使用requireJS
本文主要讲讲如何在一个项目中合理的使用requireJS,来加载js代码，这里是个实际例子，讲解不多，
看详情请连接到：http://www.cnblogs.com/evaling/p/6722760.html
项目文件基本上都有一个index.html
在index界面中，我们只需要引入start.js，（start.js是一个起始js代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script data-main="/js/start.js" src="/lib/require.js"></script>
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/theme.css">
<link rel='icon' href='/image/logo.jpg' type='image/jpg'/>
</head>
<body>
<!--添加头部-->
<div ui-view="main"></div>
<div footer></div>
<!--<pnav></pnav>-->
<!--进度条-->
<div class="loading-progress"></div>
<div class="auto-message"></div> <script> </script>--> </body>
</html>
start.js
try {
require.config({//通过此次配置后，我们可以在各个子模块中使用下面的文件库
baseUrl: "js",
paths: {
'angular': '../lib/angular',
'ui-router': '../lib/angular-ui-router',
'jquery': '../lib/jquery',
'lodash': '../lib/lodash',
'ng-bootstrap': '../lib/ui-bootstrap-tpls-1.3.2',
'angular-locale_zh-cn': "../lib/angular-locale_zh-cn",
'webupload': '../lib/webuploader',
'rap': "../lib/ngrap",
'nganimate': '../lib/angular-animate',
'kindeditor-all': '../lib/kindeditor/kindeditor-all',
'zh-cn': '../lib/kindeditor/lang/zh-CN',
'pingpp': '../lib/pingpp',
'echarts': '../lib/echarts',
'statehelper': '../lib/statehelper',
'map_china': '../lib/echarts/map/china',
'thenjs': '../lib/then',
"ng-require": '../lib/angular-require',
'sharejs':'../lib/share'
},
shim: {
'angular': {
exports: 'angular',
deps:['jquery']
},
'zh-cn': {
deps: 'kindeditor-all'
},
'ui-router': {
deps: ['angular']
},
'angular-locale_zh-cn': {
deps: ['angular']
},
'ng-bootstrap': {
deps: ['angular','angular-locale_zh-cn']
},
'rap': {
deps: ['angular']
},
'nganimate': {
deps: ['angular']
},
'statehelper': {
deps: ['ui-router']
},
'ng-require': {
deps: ["angular"]
}
},
waitSeconds: 15
});
require(['angular', 'env','app','router',"ctrl/rootctrl"], function (angular, env,app,router) {//参数列表是将模块引入
if (env == "dev") {
document.domain = "localhost";
} else if (env == 'test') {
document.domain = "two.cn";
} else if (env == "production") {
document.domain = "three.com";
}
angular.bootstrap(document, ['myapp']);
});
} catch (e) {
window.location.href = "/errors/ie8.html";
}
app.js
define(['angular','ng-require','rap','ng-bootstrap','ui-router'], function (angular) {
var myapp = angular.module('myapp', ['ui.router', 'ui.bootstrap', 'ngRap','ngRequire']);
myapp.config(['$httpProvider', 'ngRapProvider', function (httpProvider, ngRapProvider) {
/* ngRapProvider.script = 'http://rap.taobao.org/rap.plugin.js?projectId=15265';// replce your host and project id
/* ngRapProvider.script = 'http://rap.taobao.org/rap.plugin.js?projectId=15265'; // replce your host and project id
ngRapProvider.enable({
mode:2,
domain:['http://10.0.3.217','http://api...cn:81']
});
httpProvider.interceptors.push('rapMockInterceptor');*/
}]);
return myapp;
});
router:
define(['app', 'env',
'routers/demo/d_default',
'routers/account/account',
'routers/scene/scene',
'routers/proposal/proposal',
'routers/ideas/ideas',//创意
'routers/setting/setting',
'routers/patent/patent',//专利
'routers/workspace/scene_mainscene',//工作台
'routers/practicePages/practices' ], function (myapp, env) {
myapp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$requireProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider, $requireProvider) {
$urlRouterProvider.otherwise("/account/login");
if (env == "production" || env == "test") {
$locationProvider.html5Mode(true);
}
$stateProvider.state('home', {
url: '/home',
views: {
'main': {
templateUrl: 'tpls/home/home.html',
controller: 'home_home_ctrl'
}
}
}); }]);
});
rootCtrl:
define(['app',
'ctrl/setting/setting_ctrl',
'ctrl/home/home_ctrl',
'ctrl/proposal/proposal_ctrl',
//'ctrl/account/account_ctrl',
'ctrl/scene/apply_ctrl',
'ctrl/scene/new_ctrl',
'ctrl/patent/patent_ctrl', //专利
'ctrl/ideas/ideas_ctrl', //创意
'ctrl/workspace/mainscene_ctrl',//工作台
'ctrl/proposal/proposal_export_ctrl',//导出提案
'ctrl/patent/patent_export_ctrl',//导出专利
'services/permission' /* "ctrl/account/account_login_ctrl",
"ctrl/account/account_register_ctrl"*/ ],function (myapp) {
//加载字典数据到本地存储
myapp.controller('root_controller',
['$scope', 'patent_api', function (s, patent_api) {
console.log('root_controller') }])
});
ideas_ctrl:
define(["app",
"ctrl/ideas/ideas_first_ctrl",
"ctrl/ideas/ideas_allIdeas_ctrl", //全部创意
"ctrl/ideas/ideas_myIdeas_ctrl", //我的创意
"ctrl/ideas/ideas_add_ctrl", //创意新增（发布创意）
"ctrl/ideas/ideas_detail_ctrl", //创意详情的ctrl
"ctrl/ideas/ideas_edit_ctrl", //编辑创意
"ctrl/ideas/ideas_waitPass_ctrl", //待审批列表
"ctrl/ideas/ideas_hasPass_ctrl", //已经审批
"ctrl/ideas/appr_listDetail_ctrl" //创意审批详情 ],function(huadeeapp){
console.log('ideasaddCtrl');
});
ideas_myIdeas_ctrl:
define(["app","directives/sidebar/sidebar",'api/setting_api','api/ideas_api','services/zct_get_my_right','api/dictionary_api',
'services/create_fixed_files','services/setting','services/translate_tags_style'], function (myapp) {
myapp.controller('ideas_myIdeas_ctrl',
[
'$scope',
'$rootScope',
'$state',
'setting_api',
'ideas_api',
'myalert',
'get_my_right',
'dictionary_api',
'create_fixed',
'setting',
'translate_tags_format',
function (s, rs,$state,setting_api, ideas_api,myalert,getRight,dictionary_api,create_file,setting,tags_format) {
console.log("ideas_myIdeas_ctrl");
// debugger;
//tab 的切换 ........///
如何在项目中使用requireJS的更多相关文章
- ionic新手教程第三课-在项目中使用requirejs分离controller文件和server文件
继上篇教程中提到的,我们新建一个简单的tabs类型的Ionic项目. 依据文件夹文件我们知道,系统自己主动创建了一个controller文件和server文件,而且把全部的控制器和服务都写到这两个文件 ...
- 【grunt第三弹】grunt在前端实际项目中的应用
前言 [grunt第二弹]30分钟学会使用grunt打包前端代码(02) [grunt第一弹]30分钟学会使用grunt打包前端代码 经过前两次的学习,我们了解了grunt打包的一些基础知识,对于压缩 ...
- VS项目中使用Nuget还原包后编译生产还一直报错？
Nuget官网下载Nuget项目包的命令地址:https://www.nuget.org/packages 今天就遇到一个比较奇葩的问题,折腾了很久终于搞定了: 问题是这样的:我的解决方案原本是好好的 ...
- ABP项目中使用Swagger生成动态WebAPI
本文是根据角落的白板报的<使用ABP实现SwaggerUI,生成动态webapi>一文的学习总结,感谢原文作者角落的白板报. 1 安装Swashbuckle.core 1.1 选择WebA ...
- iOS 之项目中遇到的问题总结
昨天去一家公司面试,面试官问了我在项目开发中遇到过哪些问题,是什么引起的,怎样解决的? 当时由于有点小紧张只说出了一两点,现在就来好好总结一下. 问题: 1.两表联动 所谓的两表联动就是有左右两个表格 ...
- My97DatePicker时间控件在项目中的应用
一.下载My97DatePicker的压缩包My97DatePicker.rar,解压. 注:My97DatePicker最新版本有开发包,项目中使用时删掉,以便节省空间,提高程序的运行效率. 二.在 ...
- 在项目中同时使用Objective-C和Swift
苹果发布的Swift语言可以和之前的Objective-C语言同时存在于一个项目中. 可能有人会认为是同一个类文件中既可以有Objective-C也可以有Swift,这是不对的.同一个类文件或同一个代 ...
- 在数据库访问项目中使用微软企业库Enterprise Library，实现多种数据库的支持
在我们开发很多项目中,数据访问都是必不可少的,有的需要访问Oracle.SQLServer.Mysql这些常规的数据库,也有可能访问SQLite.Access,或者一些我们可能不常用的PostgreS ...
- 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入
在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...
随机推荐
- msdia80.dll文件出现在磁盘根目录下的解决方案（转）
情况描述: 当安装某些软件后,磁盘根目录中多出了msdia80.dll文件,该文件显示为2006年12月1日,884KB. 原因: 当使用64位操作系统时,在电脑上安装 Microsoft Vis ...
- 在写一个iOS应用之前必须做的7件事(附相关资源)
本文由CocoaChina--不再犹豫(tao200610704@126.com)翻译 作者:@NIkant Vohra 原文:7 Things you must absolutely do befo ...
- 使用wepy框架搭建微信小程序采坑记（一）
1.什么是wepy 这个框架是腾讯内部出的一个类MVVM的小程序开发框架.大体上来说语法是类VUE的,所以如果有VUE开发经验的话迁移成本会低一些.至于具体的怎么使用我就不赘言了,有问题查文档(官方文 ...
- 【zznu-2093】毁掉这颗二叉树
题目描述 广寒宫下有株二叉树,树上共有n个节点,通过n-1条树枝连接,树下有一只玉兔,吴刚提着斧子站在一旁. 他恼恨一切同他争夺嫦娥的事物,所以他决定通过砍二叉树上的n-1条树枝来毁掉这颗二叉树. 妙 ...
- 【51nod-1396】还是01串
给定一个0-1串s,长度为n,下标从0开始,求一个位置k,满足0<=k<=n, 并且子串s[0..k - 1]中的0的个数与子串s[k..n - 1]中1的个数相等. 注意: (1) 如果 ...
- MySQL小误区：关于set global sql_slave_skip_counter=N 命令的一些点
背景知识1: 在主从库维护中,有时候需要跳过某个无法执行的命令,需要在slave处于stop状态下,执行 set global sql_slave_skip_counter=N以跳过命令.常用 ...
- Struts13---Ognl
模拟初始化的jsp页面 <body> <a href="user/login">登录</a> </body> public clas ...
- Jenkins分享
2016-02-26 小马哥 程序员之路 PPT下载地址:http://pan.baidu.com/s/1i4pw6oP Jenkins 是一个开源软件项目,旨在提供一个开放易用的软件平台,使 ...
- weblogic启动失败java.lang.NullPointerException
在weblogic 启动的时候 出现 java.lang.NullPointerException at weblogic.deploy.internal.adminserver.Deployment ...
- IOS开发使用GCD后台运行
什么是GCD Grand Central Dispatch (GCD)是Apple开发的一个多核编程的解决方法.该方法在Mac OS X 10.6雪豹中首次推出,并随后被引入到了iOS4.0中.GCD ...