将angularJS与requireJS一起使用

本文介绍了将angularJS与requireJS一起使用 - 无法读取未定义的属性“模块”的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我开始使用angularJS编写应用程序。几个星期后，我突然意识到我应该从一开始就使用require JS来加载我的模块。是的，我知道，这是愚蠢的。但是它就是这样啊。 所以我试图将我的代码转换为现在适合requireJS。

I had started writing an app using angularJS. After a few weeks, I suddenly realized that I should have used require JS from the beginning to load my modules. Yes, I know, it was stupid. But it is what it is. So I've tried to convert my code to suit requireJS now.

这是我的main.js

This is my main.js

requirejs.config({ baseUrl: "js", paths: { jquery:'jquery-1.7.min', angular: 'angular', angularRoute:'angular-route', mainApp:'AngularApp/app' }, priority:['angular'], shim:{ angularRoute:{ deps:["angular"] }, mainApp:{ deps:['angularRoute'] } }}); require(['angular','angularRoute', 'mainApp'], function(angular, angularRoute, app) { angular.bootstrap(document, ['ServiceContractModule']); });

这是我的app.js

This is my app.js

define(['angular', 'angularRoute', 'AngularApp/services', 'AngularApp/directives', 'AngularApp/controllers'], function(angular, angularRoute, services, directives, controllers) { console.log("sup"); var serviceContractModule = angular.module('ServiceContractModule',[ 'ngRoute', services, directives, controllers ]); serviceContractModule.config(function($routeProvider,$locationProvider) { $routeProvider.when('/contractNumber/:contractNumbers', { controller : 'ContractController', templateUrl : './contractSearchResult', reloadOnSearch : true }).when('/serialNumber/:serialNumbers', { controller : 'SerialController', templateUrl : './serialSearchResult' }).when('/QuoteManager',{ controller : 'QuoteManagerController', templateUrl: './quoteManagerView' }).when('/QuoteManagerHome',{ controller : 'QuoteManagerController', templateUrl: './quoteManagerHome' }); }); return serviceContractModule; });

这是我的directives.js文件

This is my directives.js file

define(['angular', 'AngularApp/Directives/tableOperations', 'AngularApp/Directives/line', 'AngularApp/Directives/listOfValues'], function( angular, tableOperations, line, listOfValues) { var directiveModule = angular.module('ServiceContractModule.directives'); directiveModule.directive('tableoperations', tableOperations); directiveModule.directive('line', line); directiveModule.directive('listOfValues', listOfValues); return directiveModule; }

）

这是我的services.js文件

And this is my services.js file

define(['angular', 'AngularApp/Services/quoteManagerSearch'], function(angular, quoteManagerSearch) { var serviceModule = angular.module('ServiceContractModule.services'); serviceModule.factory('searchRequestHandler', quoteManagerSearch); return serviceModule; }

）

当我运行我的页面时，我得到的当前错误是

When I run my page, the current error I am getting is

未捕获的TypeError：无法读取未定义的directives.js的属性'module'： 14

Uncaught TypeError: Cannot read property 'module' of undefined directives.js:14

未捕获TypeError：无法读取未定义services.js的属性'module'：5

Uncaught TypeError: Cannot read property 'module' of undefined services.js:5

这似乎发生在这一特定行上

This seems to be happening on this particular line

var directiveModule = angular.module('ServiceContractModule.directives');

我认为由于某种原因，角度文件没有被加载。虽然当我运行页面时，我可以看到正在以正确的顺序加载所有js文件。

I think for some reason, the angular file is not getting loaded. Although when I run the page, I can see all the js files being loaded in the correct order in chrome.

任何想法的人？需要快速帮助！谢谢！

Any ideas guys? Need quick help! Thanks!

推荐答案

查看Angular的来源，我没有看到它调用RequireJS'的任何地方定义所以你需要一个垫片。将其添加到 shim 配置中：

Looking at the sources for Angular, I do not see anywhere that it calls RequireJS' define so you need a shim for it. Add this to your shim configuration:

angular: { exports: "angular" }

顺便说一下， priority 字段已过时。您使用RequireJS 2.x忽略此字段，因为只有RequireJS 1.x支持 priority 。或者你使用RequireJS 1.x来支持 priority 但是会忽略 shim 字段，因为垫片是在2.x中引入的。我的建议：使用RequireJS 2.x并删除 priority 。

By the way, the priority field in your configuration is obsolete. Either you use RequireJS 2.x which ignores this field because priority is supported only by RequireJS 1.x. Or you use RequireJS 1.x which would honor priority but would ignore the shim field because shim was introduced in 2.x. My suggestion: use RequireJS 2.x and remove priority.