I'm attempting to use angular-ui-router to display templates, based on state. Currently, i'm not getting errors in the terminal. In the console, I see "Uncaught TypeError: Cannot read property 'isDefined' of undefined" and "uncaught TypeError: Cannot read property 'isDefined' of undefined". This makes me think I'm not instantiating modules properly. New to angularjs and hoping someone might be able to point me in the right direction. app.js
var app = angular.module('app', ['ui.bootstrap', 'ui.router', 'ngMessages', 'app-templates'])
.run(function($rootScope, $state, Auth) {
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
if (!Auth.authorize(toState.data.access)) {
event.preventDefault();
$state.go('anon.login');
}
});
});
And, routes.js.
angular.module('app')
.config(function($stateProvider, $urlRouterProvider, AccessLevels) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('anon', {
abstract: true,
template: '<ui-view/>',
data: {
access: AccessLevels.anon
}
})
.state('anon.index', {
url: '/',
templateUrl: 'index.html'
})
.state('anon.login', {
url: '/login',
template: 'auth/login.html',
controller: 'LoginController'
})
.state('anon.register', {
url: '/register',
templateUrl: 'auth/register.html',
controller: 'RegisterController'
});
$stateProvider
.state('user', {
abstract: true,
template: '<ui-view/>',
data: {
access: AccessLevels.user
}
})
.state('user.messages', {
url: '/messages',
template: 'user/messages.html',
controller: 'MessagesController'
});
});
Related
I got some err when i try to create external module, i think that is something wrong with my nested state in nested.js
The err said:Error: State 'admin.quyensudung' has a 'views' object. It cannot also have "view properties" at the state level. Move the following properties into a view (in the 'views' object): controller
Please help me fix this bug and tell me the reason i got this bug thank too much
app.js:
var app = angular.module('app', [
'ui.router',
'ngCookies',
'quyensudung',
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/admin');
$stateProvider
.state('admin', {
url: '/admin',
templateUrl: 'admin/home/index.html'
}])
nested.js
var quyensudung = angular.module('quyensudung', [])
.config(['$stateProvider', function($stateProvider){
$stateProvider
.state('admin.quyensudung', {
url: '/quyensudung',
views: {
"container#": {
templateUrl: 'admin/quyensudung/index.html'
},
},
controller: 'quyensudungController',
})
}])
Error: State 'admin.quyensudung' has a 'views' object. It cannot also have "view properties" at the state level. Move the following properties into a view
Just move controller: 'quyensudungController', into views -> "container#"
Instead:
.state('admin.quyensudung', {
url: '/quyensudung',
views: {
"container#": {
templateUrl: 'admin/quyensudung/index.html'
},
},
controller: 'quyensudungController',
})
Should be:
.state('admin.quyensudung', {
url: '/quyensudung',
views: {
"container#": {
templateUrl: 'admin/quyensudung/index.html',
controller: 'quyensudungController'
},
}
})
Ref: Nested-States-and-Nested-Views
I've tried with various anwsers without any luck.
I have this two ui-views:
<div ui-view class="expand"></div> //Inside index.html
<div ui-view></div> //Inside home.html
And this is my routing:
$stateProvider
.state('home', {
url: '/',
views: {
'#': {
templateUrl: 'app/components/home/home.html',
controller: 'HomeCtrl'
}
}
})
.state('clients', {
url: '/clients',
views: {
'#home': {
templateUrl: 'app/components/clients/clients.html',
controller: 'ClientsCtrl'
}
}
})
I've tried putting names on the view and calling them in different ways but clients.html never gets display even though the route url changes.
I'm not entirely familiar with the view syntax that you're using with $stateProvider. I'll give you two versions, the first will seem very similar to your example and the second is more aligned with best practices.
$stateProvider
.state('base', {
abstract: true,
url: '',
templateUrl: 'views/base.html'
})
.state('login', {
url: '/login',
parent: 'base',
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.state('dashboard', {
url: '/dashboard',
parent: 'base',
templateUrl: 'views/dashboard.html'
})
Best practice version:
(function () {
'use strict';
angular
.module('app.core')
.config(stateConfig)
.run(errorHandler);
stateConfig.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider'];
getZipCodes.$inject = ['googleMapService'];
errorHandler.$inject = ['$rootScope', 'logger'];
function stateConfig($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
$stateProvider.state('core', {
url: '/',
templateUrl: 'app/core/core.html',
controller: 'CoreController',
controllerAs: 'vm',
resolve: {
getZipCodes : getZipCodes
}
})
}
/** #desc: Ping the back-end for a JSON object that will be converted into an array of NYC zip codes */
function getZipCodes(googleMapService) {
return googleMapService.getZipCodes();
}
/** #desc: $stateChangeError handler */
function errorHandler($rootScope, logger) {
$rootScope.$on('$stateChangeError', function (error, event) {
if (error) { logger.error('Error while changing states', error); }
if (event) { logger.error('The event that caused the error', event); }
})
}
})();
I have a problem when i click on backspace
it doesn't go to the last page
i don't know how to fix it sometime it does go the last page only when i go from app.home page to app.newJob.Step1 and press backspace it goes back to home but not always
here is my router
'use strict';
angular.module('ijob').
config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'Views/login.html',
data: {
requireLogin: false
}
})
.state('app', {
abstract: true,
template: '<ui-view/>',
data: {
requireLogin: true
}
})
.state('app.home', {
url: '/home',
templateUrl: '/Views/home.html'
})
.state('app.editJob', {
url: '/editJob',
templateUrl: 'Views/editJob.html'
})
.state('app.purchasePackages', {
url: '/purchasePackages',
templateUrl: 'Views/purchasePackages.html'
})
.state('app.accountDetails', {
url: '/accountDetails',
templateUrl: 'Views/accountDetails.html'
})
.state('app.jobOrder2', {
url: '/jobOrder2',
templateUrl: 'Views/jobOrder2.html'
})
.state('app.newJob', {
abstract: true,
templateUrl: 'Views/newJob/newJob.html',
url: '/newJob'
})
.state('app.newJob.Step1', {
url: '/newJob/step1',
templateUrl: 'Views/newJob/step1.html'
})
.state('app.newJob.Step2', {
url: '/newJob/step2',
templateUrl: 'Views/newJob/step2.html'
})
.state('app.newJob.Step3', {
url: '/newJob/step3',
templateUrl: 'Views/newJob/step3.html'
})
.state('app.newJob.Step4', {
url: '/newJob/step4',
templateUrl: 'Views/newJob/step4.html'
})
.state('app.newJob.Step5', {
url: '/newJob/step5',
templateUrl: 'Views/newJob/step5.html'
});
$urlRouterProvider.otherwise('/home');
// $locationProvider.html5Mode(true);
})
.config(function config() {
});
and my app
'use strict';
// Declare app level module which depends on views, and components
angular.module('ijob', [
'ui.router', 'ngRoute', 'btorfs.multiselect', 'ngCookies', 'ngResource'
]);
var app = angular.module('ijob');
app.run(['$state', '$cookieStore', '$rootScope', 'Auth', 'UserService',
function ($state, $cookieStore, $rootScope, auth, userService) {
$rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
var requireLogin = toState.data.requireLogin;
if (requireLogin && !($cookieStore.get('authdata'))) {
event.preventDefault();
$state.go('login');
}
else if ($cookieStore.get('authdata') && $state.current.name !== toState.name) {
userService.token = auth.getCredentials($cookieStore.get('authdata'));
console.log(userService);
$state.current.name = toState.name;
$state.go(toState.name);
}
});
}]);
sometimes i get that error
Error: No such state 'app.newJob.Step1'
or
Error: No such state 'login'
and the states do exist.
its something about the ui router?
or there is anyway to override that?
I cannot get $state.go('dashboard') to work. I get the error:
Failed to instantiate module app.controllers.login due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.2.19/$injector/nomod?p0=app...
When defined routes I get no errors. What I'm I doing wrong?
I have also tried $stateProvider and get the same error.
This is my controller...
App.js
var app = angular.module('dashboardApp', [
"ngRoute",
"ngAnimate",
"ngTouch",
"mobile-angular-ui",
"ui.router",
"app.factories.storage",
"app.controllers.main",
"app.controllers.login",
"angular-loading-bar"
]);
app.config(function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/");
$stateProvider
.state('login', {
url: "/",
templateUrl: STATIC_URL + "html/company/login.html",
controller: "loginController"
})
.state('dashboard', {
url: "/dashboard",
templateUrl: STATIC_URL + "html/company/dashboard.html"
})
});
Controller:
angular.module('app.controllers.login', [
"app.factories.http",
"ui.router",
])
.controller("loginController", ['$scope', "$location", "httpTokens", "httpFactory", "toaster", "$state",
function ($scope, $location, httpTokens, httpFactory, toaster, $state ) {
$scope.actionLoginCompanyUser = function () {
var post_data = {username: $scope.user.email, password: $scope.user.password};
httpTokens.createAccessTokens(post_data)
.then(function (responce) {
if (responce.status == 200) {
$state.go('dashboard')
}
else {
toaster.pop('error', "Incorrect Credentials", "Incorrect Email/Password");
}
})
}
}]);
You never defined the route.
angular.module('app.controllers.login', ["app.factories.http","ui.router"])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('dashboard', {
url: "/dashboard",
views: {
"view": {
templateUrl: "views/something.html"
}
}
});
This should work!
If you want something like a re-route to the login page, which I assume, you can also add the following in the config:
$urlRouterProvider.otherwise("login");
What this does is, if someone tries to go to a route which doesn't exist it will route you back to login.
NOTE:
If you are using $q or $timeout, try using $location.path('/dashboard'); instead.
More info on that particular behaviour: https://github.com/angular-ui/ui-router/issues/916
i'am using AngularJS with ui-router, this is my current app.js configuration.
'use strict';
angular.module('nodeserverApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.bootstrap',
'ui.router'
])
.config(function ($routeProvider, $locationProvider, $httpProvider , $stateProvider , $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/user/main',
controller: 'MainCtrl'
})
.state('dashboard', {
url: '/user/dashboard',
templateUrl: 'partials/user/dashboard/main',
controller: 'UserDashboardDashboardCtrl',
authenticate: true
})
.state('dashboard.welcome', {
url: '/welcome',
parent: 'dashboard',
templateUrl: 'partials/user/dashboard/welcome'
})
.state('dashboard.account', {
url: '/account',
templateUrl: 'partials/user/dashboard/account',
controller: 'UserDashboardAccountCtrl'
})
.state('dashboard.address', {
url: '/address',
templateUrl: 'partials/user/dashboard/address/index'
})
.state('dashboard.address.view', {
url: '/view',
templateUrl: 'partials/user/dashboard/address/view',
controller: 'UserDashboardAddressViewCtrl'
})
.state('dashboard.address.new', {
url: '/new',
templateUrl: 'partials/user/dashboard/address/new',
controller: 'UserDashboardAddressNewCtrl'
})
.state('login', {
url: '/user/login',
templateUrl: 'partials/user/login',
controller: 'LoginCtrl'
})
.state('signup', {
url: '/user/signup',
templateUrl: 'partials/user/signup',
controller: 'SignupCtrl'
})
.state('settings', {
url: '/user/settings',
templateUrl: 'partials/user/settings',
controller: 'SettingsCtrl',
authenticate: true
});
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(true);
// Intercept 401s and 403s and redirect you to login
$httpProvider.interceptors.push(['$q', '$location', function($q, $location) {
return {
'responseError': function(response) {
if(response.status === 401 || response.status === 403) {
$location.path('/user/login');
return $q.reject(response);
}
else {
return $q.reject(response);
}
}
};
}]);
})
.run(function ($rootScope, $state, Auth) {
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
if (toState.authenticate && !Auth.isLoggedIn()){
// User isn’t authenticated
$state.transitionTo("login");
event.preventDefault();
}
});
});
as you can see, dashboard requires authentication, how can i make it's children inherit the authenticate like dashboard.welcome , dashboard.address.view etc. with out the need to specify each one?
I know this is pretty old, but for future Googlers, note that the data property is inherited by child states, so you can place something like this authenticate flag in the parent. These modifications to your should do the trick:
For $stateProvider:
.state('dashboard', {
url: '/user/dashboard',
templateUrl: 'partials/user/dashboard/main',
controller: 'UserDashboardDashboardCtrl',
data: {
authenticate: true
}
})
For angular.module:
.run(function ($rootScope, $state, Auth) {
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
if (toState.data.authenticate && !Auth.isLoggedIn()){
// User isn’t authenticated
$state.transitionTo("login");
event.preventDefault();
}
});
});
I hope this link will help, this is a great article from Frederik Nakstad about the Single Page Auth for AngularJS, sorry but not able to provide you the detail codes
http://frederiknakstad.com/2013/01/21/authentication-in-single-page-applications-with-angular-js/