RequireJS + AngularJS Seed 03 _RequireJS

在 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的格式。因而這兩個就鏈接起來了。 運行一下，和原先那個同樣。