• 如何在项目中使用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 的切换
    
    ........///
    

      

  • 相关阅读:
    ANC耳机中的数字反馈稳定性控制(Active Noise Cancellation in Headphones by Digital Robust Feedback Control)
    【控制理论】水床效应(waterbed effect)与Bode灵敏度积分
    ANC的基本概念 主通路和次级通路
    ANC耳机中通透模式设计方案
    matlab编程规则总结
    滤波器系数、单位脉冲响应、频率响应等概念笔记
    shell 脚本艺术
    vue leader-line-vue
    vue npm rum命令
    VUEX
  • 原文地址:https://www.cnblogs.com/evaling/p/6722980.html
Copyright © 2020-2023  润新知