I know it's duplicate but mine doesn't work .I searched a lot. Angular routing to some pages which I want to load their controller using requirejs fails
app.js
define("app", ['angular', 'angularUiBootstrap'], function () {
var app = angular.module('app', ['ngCookies', 'ngRoute']);
app.config(['$controllerProvider', '$compileProvider', '$filterProvider', '$provide',
function ($controllerProvider, $compileProvider, $filterProvider, $provide) {
}]);
return app;
});
routing.js
define('routing', ['app', 'safeApply'], function (app) {
app.factory('api', function ($http, $cookies) {
return {
init: function (token) {
debugger;
$http.defaults.headers.common['X-Access-Token'] = token || $cookies.token;
}
};
});
/////////////////////////////
app.factory('httpInterceptor', function httpInterceptor($q, $window, $location) {
return function (promise) {
var success = function (response) {
return response;
};
var error = function (response) {
if (response.status === 401) {
$location.url('/login');
}
return $q.reject(response);
};
return promise.then(success, error);
};
});
/////////////////////////
app.config(function ($routeProvider, $locationProvider, $httpProvider, $provide) {
var routingCfg =
[
{ path: '/', controller: 'MainPageController', isFree: true, category: 'User', actionUrl: '/Home/MainPage' },
{ path: '/UploadNationalCard2', controller: 'UploadNationalCardController2', isFree: true, category: 'User', actionUrl: '/UploadNationalCard/Index' },
{ path: '/SmsReply', controller: 'SmsReplyJsController', isFree: true, category: 'User', actionUrl: '/SmsReply/Index' },
{ path: '/Support', controller: 'SupportController', isFree: true, category: 'User', actionUrl: '/Support/Index' },
{ path: '/Rule', controller: 'RuleController', isFree: true, category: 'User', actionUrl: '/Rule/Index' },
{ path: '/Api', controller: 'ApiController', isFree: true, category: 'User', actionUrl: '/Api/Index' },
{ path: '/Language', controller: 'LanguageController', isFree: true, category: 'User', actionUrl: '/Language/Index' },
{ path: '/About', controller: 'AboutController', isFree: true, category: 'User', actionUrl: '/About/Index' },
];
routingCfg.forEach(function (x) {
$routeProvider.when(x.path, {
templateUrl: x.actionUrl,
controller: x.controller,
resolve: {
load: ['$q', '$rootScope', 'safeApply', '$location', function ($q, $rootScope, safeApply, $location) {
var deferred = $q.defer();
require([x.controller], function () {
safeApply($rootScope, function () {
deferred.resolve();
});
});
return deferred.promise;
}]
}
});
$routeProvider.otherwise({
redirectTo: '/'
});
});
});
return app;
});
requirejsConfig.js
/// <reference path="routing.js" />
require.config({
baseUrl: '/',
urlArgs: 'v=1.0',
skipDataMain: true,
paths: {
bootstrap: 'Scripts/bootstrap.min',
jquery: 'Scripts/jquery-1.10.2.min',
angular: 'Scripts/angular-1.4.7/angular',
angularRoute: 'Scripts/angular-1.4.7/angular-route',
angularCookies: 'Scripts/angular-1.4.7/angular-cookies',
angularUiBootstrap: 'app/lib/ui-bootstrap/ui-bootstrap-tpls-0.10.0.min',
app: 'app/js/app',
routing: 'app/js/routing',
safeApply: 'app/js/safeApply',
serviceBaseAngular: 'app/js/serviceBaseAngular',
UserPageController: 'app/user/UserPageController',
MainPageController: 'app/user/MainPageController',
UploadNationalCardController2: 'app/user/UploadNationalCardController2',
SmsReplyJsController: 'app/user/SmsReplyJsController',
},
shim: {
'bootstrap': ["jquery"],
'angularUiBootstrap': ['angular'],
'app': ['angular', 'angularRoute'],
'angular': {
deps: ["jquery"],
exports: 'angular'
},
'angularRoute': ['angular'],
'angularCookies': ['angular'],
},
});
require(
[
'app',
'routing',
'jquery',
'bootstrap',
'angular',
'angularUiBootstrap',
'safeApply',
'angularCookies',
'angularRoute',
'serviceBaseAngular',
'UserPageController',
'MainPageController',
'UploadNationalCardController2'
],
function (app) {
//app.init();
angular.bootstrap(document, ['app']);
});
this works because it is in the require part of reuirejsConfig.js
MainPageController.js
define("MainPageController", ['app'], function (app) {
app.controller('MainPageController', ["$scope", "serviceBaseAngular",
"$compile", "$timeout", "$location", "$rootScope", function ($scope,
serviceBaseAngular, $compile, $timeout, $location, $rootScope) {
}]);
});
MainPage.cshtml
<div ng-controller="MainPageController">
</div>
but SmsReplyJsController.js doesn't work
define('SmsReplyJsController', ['app'], function (app) {
app.controller('SmsReplyJsController', ["$scope", "$location", "$routeParams", "sharedServices", function ($scope, $location, $routeParams, sharedServices) {
}]);
});
and I get this error
VM976:27 Error: [ng:areq] Argument 'SmsReplyJsController' is not a function,
got undefined
http://errors.angularjs.org/1.4.7/ng/areq?
p0=SmsReplyJsController&p1=not%20aNaNunction%2C%20got%20undefined
which means
Error: ng:areq
Bad Argument
Argument 'SmsReplyJsController' is not a
Description
AngularJS often asserts that certain values will be present and truthy using a helper function. If the assertion fails, this error is thrown. To fix this problem, make sure that the value the assertion expects is defined and matches the type mentioned in the error.
If the type is undefined, make sure any newly added controllers/directives/services are properly defined and included in the script(s) loaded by your page.
error-ngareq-from-angular-controller didn't help me
Any help! thanks
