Why is my ProjectsController undefined? I get this error message from my browser console.
you can check that for yourself see this plunker:
http://plnkr.co/edit/0DJ6W7QEPx2UzpdzDrVu?p=preview
'use strict';
angular
.module('projectplanner', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/projects');
$stateProvider
.state('projects', {
url: '/projects',
views: {
'menu': {
template: 'Start your projects!'
},
'content': {
templateUrl: "projects.html",
controller: 'ProjectsController'
}
}
})
.state('projects.selected', {
url: '/:projectId'
})
.state('projects.selected.dates', {
url: '/dates/:date',
views: {
'menu': {
templateUrl: 'menu.html'
},
'content': {
templateUrl: 'dateplanner.html',
controller: 'DateplannerController'
}
}
})
});
'use strict';
angular.module('projectplanner').controller('ProjectsController', function ($scope, $state) {
});
you have not included its js
<script src="app.js"></script>
<script src="ProjectsController.js"></script>
corrected PLUNKER LINK
Related
I have followed the documentation and online tutorials to create my ui-router states however when I enter my state, the URL doesn't update. Same happens when I do $state.go('main.about-me'); for example. The state changes but not the URL. Is there something wrong with my config that I can't see clearly?
Will be thankful for any tips. Thanks.
'use strict';
angular
.module('myApp.config', ['ui.router'])
.config(routes)
.run(['$rootScope', '$location', '$stateParams', '$state', appRun]);
function routes($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: 'main',
abstract: true,
views: {
'': {
templateUrl: 'main/main.tpl.html',
controller: 'mainController as vm'
},
'nav-bar#main': {
templateUrl: 'main/nav-bar/nav-bar.tpl.html',
controller: 'navigationBarController as vm'
}
}
})
.state('main.home', {
url: '/home',
views: {
'content': {
templateUrl: 'home/home.tpl.html',
controller: 'homeController as vm'
}
}
})
.state('main.about-me', {
url: '/about-me',
views: {
'content': {
templateUrl: 'about-me/about-me.tpl.html',
controller: 'aboutMeController as vm'
}
}
})
.state('main.contact-me', {
url: '/contact-me',
views: {
'content': {
templateUrl: 'contact-me/contact-me.tpl.html',
controller: 'contactMeController as vm'
}
}
});
$urlRouterProvider.otherwise('');
}
function appRun($rootScope, $location, $stateParams, $state) {
console.log('run the app');
console.log('$location', $location);
console.log('$rootScope', $rootScope);
console.log('$stateParams', $stateParams);
$state.go('main.home');
}
Inside my body I have this
<div ng-cloak>
<div ui-view class="content-container"></div>
</div>
I know that this has been asked before (here and here among others), but I just can't understand what is the problem with my code. Here it is:
(function () {
'use strict';
angular
.module('app.students', ['common', 'xeditable', "googlechart", 'iosDblclick', 'anguFixedHeaderTable', 'disableAll'])
.config(config);
/** #ngInject */
function config($stateProvider, $translatePartialLoaderProvider) {
// State
$stateProvider
.state('app.students', {
abstract: true,
url: '/students'
})
.state('app.students.studentList', {
url: '/',
views: {
'content#app': {
templateUrl: 'app/main/students/views/studentList/studentList.html',
controller: 'StudentListController as vm'
}
}
})
.state('app.studentsInProcess.studentList', {
url: '/process/:id',
views: {
'content#app': {
templateUrl: 'app/main/students/views/studentList/studentList.html',
controller: 'StudentListController as vm'
}
},
parent: 'app.students'
})
.state('app.students.studentDetails', {
url: '/:id',
views: {
'content#app': {
templateUrl: 'app/main/students/views/studentDetails/studentDetails.html',
controller: 'StudentDetailsController as vm'
}
}
});
// Translation
$translatePartialLoaderProvider.addPart('app/main/students');
}
})();
When I click on a link with a ui-sref of "app.studentsInProcess.studentList" i Get the error
"Error: Could not resolve 'app.studentsInProcess.studentList' from state 'app'"
What am I doing wrong? Please bear with me as this stuff is new to me.
Whenever I attempt to go to profile state I'm thrown back to the home state (no errors in console).
Here's my setup:
app.js
angular.module('app',[
'oclazyLoad'
'app.components'
])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$httpProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$urlRouterProvider.otherwise('/');
//$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('jwtInterceptor');
function lazyLoad(pathjs) {
return ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load(pathjs);
}];
}
$stateProvider
.state('home', {
url: '/',
template: 'asd'
})
.state('profile', {
url: '/profile',
templateUrl: 'components/profile/profile.html',
controller: 'profileCtrl',
controllerAs: 'vm',
resolve: {
module: lazyLoad('components/profile/profile.js'),
user: ['SessionService', function (SessionService) {
return {fake: 'user'};//SessionService.currentUser(true);
}]
}
})
}]);
angualar.module('app.components',[]);
profile.js
angular.module('app.components')
.controller('profileCtrl', ['user', function(user){
var vm = this;
vm.test = 123;
}]);
profile.html
<div>{{vm.test || 1}}</div>
This was an embarrasing problem but I forgot to return the response in my $http interceptor jwtInterceptor.
Playing around with angular stateProvider, this is my route:
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state("start", {
url: "/",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}]);
On bootstrapping I would like to go to state 'test':
app.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$state.go('test');
console.log('app.run');
}]);
These are the controllers:
app.controller('StartCtrl', function($scope) {
console.log('start');
});
app.controller('TestCtrl', function($scope) {
console.log('test');
});
Why is the application routing to the 'start' state ? I would like to go to the 'test' state?
Code reference:http://plnkr.co/edit/FCcL4M?p=preview
You need to change the url for either the test or the start "state", right now they are both the same. I changed the test state url to "/test" and it loaded correctly.
http://plnkr.co/edit/2esV4dbd4ptNSEmwD3g4?p=preview
app.config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state("start", {
url: "/",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/test",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}
]);
Just need to add to previous answer : both start and test need to be corrected
to follow standards.
http://plnkr.co/edit/TjDzyL?p=preview
pp.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state("start", {
url: "/start",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/test",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}]);
I'm using modules /sub modules on the angular app, my controller doesn't load on a specific route but the view does, according to a comment on this question I should reference the child module inside the main module and that should do the trick.
this is my code for bootstrapping the app:
angular.module('mainApp', ['ui.bootstrap', 'ui.utils', 'ui.router', 'ngResource', 'ngAnimate', 'ngCookies', 'facebook', 'subModule1', 'subModule2', 'subModule3']);
angular.module('mainApp').config(function ($stateProvider, $urlRouterProvider, $locationProvider, FacebookProvider) {
$stateProvider.state("root",
{
url: '',
abstract: true,
views: {
'footer#': {
templateUrl: "/partial/footer/footer.html",
},
'header#': {
templateUrl: "/partial/header/header.html",
}
}
}).state('root.home', {
url: '/index',
views: {
'container#': {
templateUrl: '/partial/index/index.html',
controller: 'IndexCtrl'
}
},
}
).state('root.login', {
url: "/login",
views: {
'container#': {
templateUrl: '/partial/login/login.html',
controller: 'LoginCtrl'
}
},
});
FacebookProvider.init('xxxxxx');
$urlRouterProvider.otherwise('/index');
$locationProvider.hashPrefix('!');
});
I have the sub-module configuration in a separate folder named /subModule1/submodule1.js
angular.module('subModule1').config(function($stateProvider) {
$stateProvider.state("submodule1",
{
url: '',
abstract: true,
views: {
'footer#': {
templateUrl: "/partial/footer/footer.html",
},
'header#': {
templateUrl: "/partial/header/header.html",
}
}
}).state('submodule1.dashboard',
{
url: '/dashboard',
views: {
'container#': {
templateUrl: '/subModule1/partial/dashboard/dashboard.html',
controller: 'DashboardCtrl',
resolve: {
dashboardinfo: function($resource) {
var resourceGet = $resource('/submodule1/dashboard');
return resourceGet.get().$promise;
}
}
},
'sideBar#': {
templateUrl: '/submodule1/partial/sidebar/sidebar.html'
},
'navBar#': {
templateUrl: '/submodule1/partial/navbar/navbar.html'
}
}
});
});
the controller is defined as:
angular.module('subModule1').controller('DashboardCtrl', function ($scope, $interval, $resource, notification, dashboardinfo) { ... }
the index located on the root of the page which is the page layout have the
<html ng-app="mainApp">
and the controller have the ng-controller definiton as follows:
<div ng-controller="DashboardCtrl">
Everything is fine just the controller isn't running, it doesn't get executed by the view.
The ui-router and ng-controller="DashboardCtrl" are intended to work together. In the ui-router world we are assigning Controllers to views directly in the state definition.
So this (exactly as you have already have it, no change) is enough:
.state('submodule1.dashboard',
{
url: '/dashboard',
views: {
'container#': {
templateUrl: '/subModule1/partial/dashboard/dashboard.html',
controller: 'DashboardCtrl',
to say, that the view rendered inside of the ui-view="container" on the root (index.html) should be provided with DashboardCtrl.
There is an example using the above state definition (1:1 as possible).
This is the index.html content:
<div ui-view="header"></div>
<div ui-view="navBar"></div>
<div ui-view="container"></div>
<div ui-view="sideBar"></div>
<div ui-view="footer"></div>
And this links will correctly trigger the above states:
// root
<li><a ui-sref="root.home">root.home</a></li>
<li><a ui-sref="root.login">root.login</a></li>
// dashboard
<li><a ui-sref="submodule1.dashboard">submodule1.dashboard</a></li>
All the other details check here