angularjs集成requirejs

最新推荐文章于 2024-09-03 17:02:58 发布

weixin_30347335

最新推荐文章于 2024-09-03 17:02:58 发布

阅读量50

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wancy86/p/ng-requirejs.html

版权

其实说成使用requirejs加载angularjs应用会更贴切一些

<body>  
    <span ng-controller="homeController">{{resultValue.Msg}}</span>  
      
    <script src="js/lib/require.js" data-main="js/main"></script>  
</body>

只不过需要手动启动angularjs，同时所有的模块由requirejs来组织并确定依赖关系，这样就能实现按需加载了

/** 
 * main.js
 * 这个文件完成的事情简单来说就是：载入所有文件，然后在document上运行Angular并将ng-app属性设置为’app’。 
 * 这些文件因为是由RequireJS异步载入，因此我们需要来“手动启动”Angular应用。 
 * 
 * */  
  
require.config({  
    paths: {  
        //库文件  
        //"responsive": "lib/responsive-nav",  
        "angular": "lib/angular",  
        "bootstrap": "lib/bootstrap.min",  
        "angularRoute": "lib/angular-route",  
        "angularResource": "lib/angular-resource",  
        //"ui-bootstrap": "lib/ui-bootstrap-tpls-0.11.0.min",  
        //"phprpc": "lib/phprpc_client",  
        "jquery": "lib/jquery.min"  
    },  
    shim: {  
        angular: {  
            exports: "angular"  
        },  
        angularRoute: {  
            deps: ["angular"]  
        },  
        angularResource: {  
            deps: ['angular']  
        }  
    },  
    urlArgs: "bust=" + (new Date()).getTime()  //防止读取缓存，调试用  
});  
  
  
  
//手动启动ng  
define(["routes"], function () {  
    //使用bootstrap方法启动Angular应用  
    angular.bootstrap(document, ["app"]);  
});

/** 
 * routes.js 
 */  
  
define([  
    "app"  
], function (app) {  
  
    //app是Angular应用对象  
    app.config(['$routeProvider',  
        function ($routeProvider) {  
  
            $routeProvider  
                .when('/search', {  
                    templateUrl: 'template/search.html',  
                    controller: 'SearchCtrl'  
                })  
                .otherwise({ redirectTo: '/LmpSumQut' });  
  
        }]);  
  
})

其他的模块代码略了，看参考链接:

http://blog.csdn.net/yo548720570/article/details/41047309
http://www.open-open.com/lib/view/open1413189699875.html
https://segmentfault.com/a/1190000000492238
http://www.cnblogs.com/kenkofox/p/4643760.html
http://www.tuicool.com/articles/J3INv2Z
http://blog.163.com/liuyong_xiaxia/blog/static/17435525520156341446981/

转载于:https://www.cnblogs.com/wancy86/p/ng-requirejs.html

weixin_30347335

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs集成requirejs

其实说成使用requirejs加载angularjs应用会更贴切一些<body> <span ng-controller="homeController">{{resultValue.Msg}}</span> <script src="js/lib/require.js" data-main="js/main"&gt...
复制链接

扫一扫