本文主要讲讲如何在一个项目中合理的使用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的更多相关文章

  1. ionic新手教程第三课-在项目中使用requirejs分离controller文件和server文件

    继上篇教程中提到的,我们新建一个简单的tabs类型的Ionic项目. 依据文件夹文件我们知道,系统自己主动创建了一个controller文件和server文件,而且把全部的控制器和服务都写到这两个文件 ...

  2. 【grunt第三弹】grunt在前端实际项目中的应用

    前言 [grunt第二弹]30分钟学会使用grunt打包前端代码(02) [grunt第一弹]30分钟学会使用grunt打包前端代码 经过前两次的学习,我们了解了grunt打包的一些基础知识,对于压缩 ...

  3. VS项目中使用Nuget还原包后编译生产还一直报错？

    Nuget官网下载Nuget项目包的命令地址:https://www.nuget.org/packages 今天就遇到一个比较奇葩的问题,折腾了很久终于搞定了: 问题是这样的:我的解决方案原本是好好的 ...

  4. ABP项目中使用Swagger生成动态WebAPI

    本文是根据角落的白板报的<使用ABP实现SwaggerUI,生成动态webapi>一文的学习总结,感谢原文作者角落的白板报. 1 安装Swashbuckle.core 1.1 选择WebA ...

  5. iOS 之项目中遇到的问题总结

    昨天去一家公司面试,面试官问了我在项目开发中遇到过哪些问题,是什么引起的,怎样解决的? 当时由于有点小紧张只说出了一两点,现在就来好好总结一下. 问题: 1.两表联动 所谓的两表联动就是有左右两个表格 ...

  6. My97DatePicker时间控件在项目中的应用

    一.下载My97DatePicker的压缩包My97DatePicker.rar,解压. 注:My97DatePicker最新版本有开发包,项目中使用时删掉,以便节省空间,提高程序的运行效率. 二.在 ...

  7. 在项目中同时使用Objective-C和Swift

    苹果发布的Swift语言可以和之前的Objective-C语言同时存在于一个项目中. 可能有人会认为是同一个类文件中既可以有Objective-C也可以有Swift,这是不对的.同一个类文件或同一个代 ...

  8. 在数据库访问项目中使用微软企业库Enterprise Library，实现多种数据库的支持

    在我们开发很多项目中,数据访问都是必不可少的,有的需要访问Oracle.SQLServer.Mysql这些常规的数据库,也有可能访问SQLite.Access,或者一些我们可能不常用的PostgreS ...

  9. 在基于MVC的Web项目中使用Web API和直接连接两种方式混合式接入

    在我之前介绍的混合式开发框架中,其界面是基于Winform的实现方式,后台使用Web API.WCF服务以及直接连接数据库的几种方式混合式接入,在Web项目中我们也可以采用这种方式实现混合式的接入方式 ...

随机推荐

  1. wordcount程序出现map 100% reduce 0%问题的解决方法

    运行wordcount程序一直停在map 100% reduce 0%, input文件夹的内容: 其中: f1.txt中的内容为:hello hadoop f2.txt中的内容为:hello had ...

  2. 初识async函数

    为什么会出现async函数 首先从大的方面来说,出现async函数时为了解决JS编程中的异步操作,再往具体说就是为了对以往异步编程方法的一种改进,也有人说仅仅只是Generator 函数的语法糖,这个 ...

  3. [SQL]会引起全表扫描的10种SQL语句

    1.模糊查询效率很低: 原因:like本身效率就比较低,应该尽量避免查询条件使用like:对于like ‘%...%’(全模糊)这样的条件,是无法使用索引的,全表扫描自然效率很低:另外,由于匹配算法的 ...

  4. C++复习13.虚析构函数知识

    C++ 虚析构函数 20131010 在C++中的虚函数作用是实现基于继承机制的多态,但是我们好像忽略了一种情况,就是虚析构函数.在C++继承机制中,虽然构造函数是不可以使用虚函数声明,但是析构函数是 ...

  5. Prism 4 文档 ---第6章 高级MVVM场景

        在上一章中描述了如何通过将UI,表现逻辑,业务逻辑分别放到三个单独的类中(View,View Model,Model),实现这些类之间的交互(通过数据绑定,命令以及数据验证接口)以及实现一个策 ...

  6. APUE学习笔记——5.5~5.7数据流的打开与读写

    1.open #include <stdio.h> FILE *fopen(const char *restrict pathname,const char *restrict type) ...

  7. 分水岭分割算法（watershed segmentation）的C++实现（法1）

    运行环境:ubuntu16.04+Qt+opencv2.4.13 参考链接:http://blog.csdn.net/u010741471/article/details/45193521 water ...

  8. three.js入门系列之粒子系统

    其实代码很简单,也很容易懂(我用的是r99版本的three.js,目前网上大多数demo是60或者80的版本,其中的一些api已经废弃,如下是r99版本支持的写法): 注:渲染器是WebGl渲染器 如 ...

  9. js中top、self、parent

    1.在应用iframe或者frameset的时候 parent指的是父窗口.top指的是顶级的窗口.self指的是当前的窗口-window window.self 功能:是对当前窗口自身的引用.它和w ...

  10. EasyRMS录播管理服务器项目实战:windows上开机自启动NodeJS服务

    本文转自EasyDarwin开源团队成员Penggy的博客:http://www.jianshu.com/p/ef840505ae06 近期在EasyDarwin开源团队开发一款基于EasyDarwi ...