如何让Requirejs与Angularjs一起使用?

时间:2014-10-26 16:13:56

标签: angularjs requirejs

我正在创建一个简单的演示应用程序,我正在学习使用angularjs并且需要一起使用。  在我看来,当点击的警告对话框显示一条消息时,我有一个“提醒用户”按钮。

HTML

<body>
    <div ng-controller="StartCtrl">
        <input type="button" ng-click="alertUser()" value="AlertUser">
    </div>


     <script data-main="js/main.js" src="~/Scripts/require.js"></script>
</body>

我的目录结构如下:

enter image description here

我的问题

在App.js文件中,当我尝试调用我的包'require('packageName')时,它返回一个未定义的。我想要做的就是让App.js创建一个角度模块并将其附加到我视图的主体部分。我花了几天时间,但没有运气。我怎样才能让这个演示工作?

代码

Root main.js

require.config({
 packages: [{
    name: 'NewFeature',
    location: 'NewFeature',
    main: 'main'
}],
paths: {
    angular: "../Scripts/angular",
    ngRoute: "../Scripts/angular-route",
    jquery: "../Scripts/jquery-1.8.2"
},
shim: {
    jquery: {
        exports: '$'
    },
    angular: {
        exports: "angular"
    },
    ngRoute: {
        exports: 'ngRoute',
        deps: ["angular"]
    }
 }
});

require(['angular',  'App', function (angular) {
  angular.bootstrap(angular.element('body'), ["app"]);
}]);

App.js

define(function(require){
 var angular = require('angular');

require('NewFeature'); // Load the script files from the NewFeature Package;

angular.module('app', ['ngRoute', 'NewFeatureModule']);
});

打包main.js

define(function (require) {
var feature = require('./feature');

return feature;
});

NewFeaturemodule js

define(function (require) {
 var angular = require("angular");
 return angular.module('NewFeatureModule', ['ngRoute', 'ngAnimate']);
});

feature.js

define(['./NewFeatureModule', function (NewFeatureModule) {
 return NewFeatureModule.controller('StartCtrl', function ($scope, $routeParams) {
    $scope.alertUser = function () {
        alert("hello this works");
    }

 })
}]);

0 个答案:

没有答案