如何在項目中使用requireJS

時間 2019-12-02

原文原文鏈接

本文主要講講如何在一個項目中合理的使用requireJS,來加載js代碼，這裏是個實際例子，講解很少，javascript

看詳情請鏈接到：http://www.cnblogs.com/evaling/p/6722760.htmlcss

項目文件基本上都有一個index.htmlhtml

在index界面中，咱們只須要引入start.js，（start.js是一個起始js代碼）html5

<!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.jsjava

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 的切換

........///

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。