When my angular application starts, it immediately raises an error at Line 4414 of Angular.js (v1.4.3). It seems to be having trouble loading a service during the initialization (bootstrapping) stage. When I hit F5 to continue, the _Layout.chtml is loaded. However, the ui-view isn't loaded from the Index.cshtml. That indicates the Home controller isn't executed, so the $scope isn't populated. It should have been in "Home" ui-state, but it did not going in to that state with url "http://localhost/myApp/". Thanks for your help.
From Chrome console
trimEmptyHash@ angular.js: 11267
$get@ angular.js: 12096
invoke@ angular.js: 4450(anonymous
function)@ angular.js: 4268
getService@ angular.js: 4409
invoke@ angular.js: 4441(anonymous
function)@ angular.js: 4268
getService@ angular.js: 4409
invoke@ angular.js: 4441(anonymous
function)@ angular.js: 4268
getService@ angular.js: 4409
invoke@ angular.js: 4441(anonymous
function)@ angular.js: 4272
forEach@ angular.js: 336
createInjector@ angular.js: 4272
doBootstrap@ angular.js: 1630
bootstrap@ angular.js: 1651
angularInit@ angular.js: 1545(anonymous
function)@ angular.js: 28359
jQuery.Callbacks.fire@ jquery - 2.1.4.js: 3099
jQuery.Callbacks.self.fireWith@ jquery - 2.1.4.js: 3211
jQuery.extend.ready@ jquery - 2.1.4.js: 3417
completed@ jquery - 2.1.4.js: 3433Here is the callstack and breakpoint
When click any dropdown in the menu renderded by _layout.cshtml, I got "Unable to get property 'split' of undefined or null reference". It think the URL is "undefined".
Here is my App.js
/// <reference path="E:\Work\App\AngularSPA\AngularSPA\Views/TasksEndedTable .cshtml" />
'use strict';
angular.module('App', ['ui.router', 'App.controllers', 'App.filters', 'App.services', 'ui.bootstrap'])
// Gets executed during the provider registrations and configuration phase. Only providers and constants can be
// injected here. This is to prevent accidental instantiation of services before they have been fully configured.
.config(['$stateProvider', '$locationProvider',
function($stateProvider, $locationProvider) {
// UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
// ------------------------------------------------------------------------------------------------------------
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/index',
controller: 'HomeCtrl'
})
.state('about', {
url: '/about',
templateUrl: 'views/about',
controller: 'AboutCtrl'
})
.state('contacts', {
url: '/contacts',
templateUrl: 'views/contacts',
controller: 'ContactsCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'views/login',
controller: 'LoginCtrl'
})
.state('preferences', {
url: '/preferences',
templateUrl: 'views/preferences',
controller: 'PreferenceCtrl'
})
.state('uiGrid', {
url: '/uigrid',
templateUrl: 'views/uigrid.cshtml',
controller: 'UIGridCtrl'
})
// Task routes -----------------------------
.state('taskList', {
url: '/:listType',
templateUrl: 'views/tasksList.cshtml',
controller: 'TaskCtrl'
})
.state('taskSearchForm', {
url: '/taskSearch/:formType',
templateUrl: 'views/taskSearch.cshtml',
controller: 'TaskSearchCtrl'
})
.state('taskEdit', {
url: '/taskEdit/:id',
templateUrl: 'views/taskEdit.cshtml',
controller: 'TaskEditCtrl'
})
.state('taskAdd', {
url: '/taskAdd',
templateUrl: 'views/taskAdd.cshtml',
controller: 'TaskAddCtrl'
})
// User routes -----------------------------
.state('users', {
url: '/users',
tempalteUrl: 'views/users',
controller: 'UserCtrl',
})
.state('addUser', {
url: '/addUser',
tempalteUrl: 'views/userAdd',
controller: 'UserAddCtrl',
})
// Otherwise routes -----------------------------
.state('otherwise', {
url: '*path',
templateUrl: 'views/404',
controller: 'Error404Ctrl'
});
$locationProvider.html5Mode(true);
}
])
.run(['$templateCache', '$rootScope', '$state', '$stateParams',
function($templateCache, $rootScope, $state, $stateParams) {
// <ui-view> contains a pre-rendered template for the current view
// caching it will prevent a round-trip to a server at the first page load
var view = angular.element('#ui-view');
$templateCache.put(view.data('tmpl-url'), view.html());
// Allows to retrieve UI Router state information from inside templates
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeSuccess',
function(event, toState) {
// Sets the layout name, which can be used to display different layouts (header, footer etc.)
// based on which page the user is located
$rootScope.layout = toState.layout;
});
}
]);
