angular.js - angular require 加载controller问题

浏览:21日期:2022-12-28

问题描述

main.js中定义好配置项

requirejs.config({ paths: {jQuery: ’../lib/jquery.min’,angular: ’../lib/angular.min’,angularRouter: ’../lib/angular-route.min’,angularAnimate: ’../lib/angular-animate.min’,ngNotify: ’../lib/angular-atomic-notify’,api: ’../js/common/api’,utils: ’../js/common/utils’ }, shim: {’angular’: { deps: [’jQuery’], exports: ’angular’},angularRouter: { deps: [’angular’], exports: ’ngRoute’},angularAnimate: { deps: [’angular’]},ngNotify: { deps: [’angular’]},api: { deps: [’angular’]},utils: { deps: [’angular’]} }});// 手动开启angular服务require([’angular’, ’app’], function(angular){ angular.element(document).ready(function(){angular.bootstrap(document, [’yceMain’]); });});

app中定义模块与路由

app.js

define([’angular’, ’angularRouter’, ’ngNotify’, ’angularAnimate’, ’api’, ’utils’], function(angular){ var yceMain = angular.module(’yceMain’,[’ngRoute’, ’atomic-notify’, ’ngAnimate’]); yceMain.config([’$routeProvider’, ’$controllerProvider’, function ($routeProvider, $controllerProvider){$routeProvider .when(’/dashBoard’, {templateUrl: ’views/dashBoard.html’ }) .when(’/appManage’, {templateUrl: ’views/appManage.html’,controller: ’appManage’ }) }]); return yceMain;});

appManage controller.js代码如下

define([’app’], function (yceMain){ yceMain.controller(’appManage’, [’$scope’ , function ($scope){$scope.aa = 11; }]);});

页面报错

Error: [ng:areq] http://errors.angularjs.org/1.5.0/ng/areq?p0=appManage&p1=not%20aNaNunction%2C%20got%20undefined

若在app.js中定义appManage controller,则视图中可以拿到数据,但如果在appManage controller.js 使用define([’app’],xx) 获取angular.module则取不到,求解。

问题解答

回答1:

define([’app’], function (yceMain){ yceMain.controller(’appManage’, [’$scope’ , function ($scope){$scope.aa = 11; }]);});

这个app应该是没有被注入进去的,你console.log(yceMain)一下。如果你只是想将appManage这个控制器绑定到app这个模块里面,应该可以这么写:

// appManage controller.jsangular.module(’app’).controller(’appManage’, [’$scope’ , function ($scope){ $scope.aa = 11;}]);

当然,这个controller也要引入到页面里面去的

我之前是用ui-router + oclazyload

回答2:

已解决,问题在于angular在开启ng-app服务之前,要把所以的controller,service都要注册完成。但是我的想法是要异步加载controller,通过require。

function ctrlRegister (ctrlName, ctrlModule) {return function ($q) { var defer = $q.defer(); require(ctrlModule, function (controller) {$controllerProvider.register(ctrlName, controller);defer.resolve(); }); return defer.promise;} }

该函数完美解决问题,感谢/a/11...。

相关文章: