RequireJS + AngularJS Seed 03 _RequireJS

最新推荐文章于 2024-08-30 12:42:13 发布

weixin_34376562

最新推荐文章于 2024-08-30 12:42:13 发布

阅读量69

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/ilivebox/blog/262108

版权

2019独角兽企业重金招聘Python工程师标准>>>

在 index.html 里面引用 Requirejs。

<!-- lang: js -->
<script type="text/javascript" 
           src="bower_components/requirejs/require.js" 
           data-main="scripts/bootstrap.js">
</script>

这里第一部分src当然就是指requirejs的库文件。第二部分data-main是指入口配置。当前我指定的是scripts下面的bootstrap。requirejs默认的是js文件作为存档格式。所以不写bootstrap.js，直接写bootstrap也行。

然后在bootstrap中对模块进行配置，

<!-- lang: js -->
require.config({
    baseURI: '../scripts', // 根目录。比如说下面的 'app' 模块，就会查找 scripts/app.js
    paths:{
        'angular' : './libs/angular/angular' // 以AMD格式写的js文件，到这里就可以了
    },
    shim:{
        'angular' : {
            exports : 'angular' // Angular不是AMD格式，所以必须向外重命名
        }
    }
});

下半段

<!-- lang: js -->
require(
    [
        'angular',
        'app' 
        // 这里会直接找 'scripts/app.js' 模块。
        // AMD不是可以定义id吗，但是这里如果在同一个app里面写两个define，
        // 貌似是按照顺序加载第一个的。不太明白。以后看。
    ],
    // 这里加载的是angular定义的模块。
    // 嗯，开始出现了两个模块。RequireJS的模块和AngularJS的模块。麻烦。
    function(angular){ angular.bootstrap(document, ['bearnose']); });

然后再看app.js中的定义:

<!-- lang: js -->
define(['angular'], function(angular){
    var app = angular.module('bearnose', []);
    app.controller("ctrlLogin", function($scope){
        $scope.name = "Kitty";
    });
    
    return app;
});

前面的define是AMD的格式，后面的angular.module是AngularJS的格式。于是这两个就连接起来了。运行一下，和原先那个一样。

转载于:https://my.oschina.net/ilivebox/blog/262108