我正在创建一个简单的演示应用程序,我正在学习使用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>
我的目录结构如下:
我的问题
在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");
}
})
}]);