I am trying to go using ui-sref but it's saying cannot resolve from ''. What did I do wrong in the route configuration. Everything seems correctly configured from my point of view. But i am getting this error.
view
<li><a ui-sref="container.demurrage.index">Container Management</a></li>
Js
angular.module("app.container",
[
"ui.router",
"ui.select",
"ui.bootstrap",
])
.config([
"$stateProvider", function ($stateProvider) {
$stateProvider.state("container",
{
url: "/container",
template: "<div ui-view></div>",
abstract: true
});
$stateProvider.state("container.demurrage.index",
{
url: "/demurrage",
templateUrl: "/container/demurrageindex",
controller: "demurrageIndexController",
resolve: {
}
});
}
])
For someone who has the same issue, I post the solution and it was the naming issue.
If the parent is container the children should be container.{some name} NOT container.{name}.{name}.
angular.module("app.container",
[
"ui.router",
"ui.select",
"ui.bootstrap",
])
.config([
"$stateProvider", function ($stateProvider) {
$stateProvider.state("container",
{
url: "/container",
template: "<div ui-view></div>",
abstract: true
});
$stateProvider.state("container.demurrageindex",
{
url: "/demurrage",
templateUrl: "/container/demurrageindex",
controller: "demurrageIndexController",
resolve: {
}
});
}
])
Related
It was working before when "/" was "/main", It was able to load main and dashboard as $urlRouterProvider.otherwise("/main/dashboard");
but now I have changed to "/" instead of "/main", it doesn't work, it loads only main and not dashboard. I have changed the code because I am using Active Directory Authentication Library, and it was having an issue of looping.
following is the code sample (config.js)
myapp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$compileProvider', '$httpProvider', 'adalAuthenticationServiceProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider, $compileProvider, $httpProvider, adalProvider) {
$compileProvider.debugInfoEnabled(true);
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise("/dashboard");
$stateProvider
// Main content
.state('main', {
abstract: false,
url: "/",
templateUrl: "/app/views/common/content.html"
})
.state('main.dashboard', {
url: "dashboard",
templateUrl: "/app/views/dashboard.html",
requireADLogin: true,
data: {
pageTitle: 'Dashboard'
}
})
.state('main.usermanagement', {
url: "/usermanagement",
template: "<div ui-view></div>",
requireADLogin: true
});
}])
Any ideas on how to fix this?
Problem is that you did't define URL in correct way
please use below like, url should be start with /
$urlRouterProvider.otherwise("/dasenter code herehboard");
$stateProvider
.state('main', {
abstract: false,
url: "/",
templateUrl: "/app/views/common/content.html"
})
.state('main.dashboard', {
url: "/dashboard", // you missed slash `/` here
templateUrl: "/app/views/dashboard.html",
requireADLogin: true,
data: {
pageTitle: 'Dashboard'
}
})
try it
Use this default childState for main:
$urlRouterProvider.when('/', '/dashboard');
And you should write url starting with '/'
.state('main.dashboard', {
url: "/dashboard",
templateUrl: "/app/views/dashboard.html",
requireADLogin: true,
data: {
pageTitle: 'Dashboard'
}
})
Following code has resolve my issue, if anyone faces this issue when using
Active Directory Authentication Library:
$urlRouterProvider.otherwise(function ($injector, $location) {
var $state = $injector.get("$state");
$state.go("main.dashboard");
});
Hi in my app I have two states called hello and createHello
Modules related to thees two states are given below.
createHello Module
(function(module){
'use strict';
module.config(['$stateProvider',
function($stateProvider) {
$stateProvider.state('createHello', {
url: '/hello/create',
templateUrl: 'app/createHello/createHello.html',
controller: 'createHello'
});
}
]);
})(angular.module('createHello', ['header', 'ui.router', 'timeliner','common']));
hello Module
(function (module) {
'use strict';
module.config(['$stateProvider',
function ($stateProvider) {
$stateProvider.state('hello', {
url: '/hello/{id}',
templateUrl: 'app/hello/hello.html',
controller: 'hello',
resolve: {
.....
}
});
}
]);
})(angular.module('hello', ['header', 'ui.router', 'helloTimer', 'logger', 'timeliner', 'common']));
Any url pattern of /hello/xxxx will go to the hello state. I want this specific url (/hello/create) to go to the createHellostate. At the moment it will also go to the hello state. Any advice on how to solve this issue?
In this case you should used nested states.
module.config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state('hello', {
url: '/hello',
abstract: true,
template: '<ui-view/>'
})
.state('hello.create', {
url: '/create',
templateUrl: 'app/createHello/createHello.html',
controller: 'createHello'
})
.state('hello.display', {
url: '/:id',
templateUrl: 'app/hello/hello.html',
controller: 'hello'
});
}
]);
Note that routing is done on "first match", so you will need to have your /hello/create route declared before the /hello/:id route.
You can read more on how nesting works here:
https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views
In the example above I used an abstract parent state.
I'm using ocLazyLoad with AngularJS and AngularJS UI Router to load AngualarJS modules on demand. I have a Posts view/state and Post view/state in different modules and I can simply navigate between them.
The only issue is that when I'm on /posts/1 and manually refresh the page, it goes back to /. I understand that it makes perfect sense because app.js is the only file that gets loaded after page refresh but what I don't understand is how to make it lazy load the same /posts/1 view again after refreshing the page. I tried using $urlRouterProvider.when in app.js but had no luck.
I have created a plunker for this: http://plnkr.co/edit/lPb2qCGF9KLL16jVoLQo?p=info
app.js
angular.module('app', ['ui.router', 'oc.lazyLoad'])
.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.state = $state;
$rootScope.stateParams = $stateParams;
}
])
.config([
'$ocLazyLoadProvider',
'$stateProvider',
'$urlRouterProvider',
function ($ocLazyLoadProvider, $stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /
$urlRouterProvider.otherwise('/');
$stateProvider
.state('app', {
url: '/',
views: {
header: {
template:
'<nav class="navbar navbar-default">' +
'<div class="container-fluid">' +
'<ul class="nav navbar-nav">' +
'<li><a ui-sref="app">Home</a></li>' +
'<li><a ui-sref="app.posts">Posts</a></li>' +
'</ul>' +
'</div>' +
'</nav>'
},
content: {
template: '<h3>Home view</h3>'
}
}
})
.state('app.posts', {
url: 'posts',
views: {
'content#': {
templateUrl: 'posts.html',
controller: 'PostsController',
resolve: {
load: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
serie: true,
files: [
'posts.js',
'posts-controller.js'
]
});
}]
}
}
}
});
}
]);
posts.js
angular.module('app.posts', ['ui.router', 'oc.lazyLoad'])
.config([
'$ocLazyLoadProvider',
'$stateProvider',
function ($ocLazyLoadProvider, $stateProvider) {
$stateProvider
.state('app.posts.post', {
url: '/:id',
views: {
post: {
templateUrl: 'post.html',
controller: 'PostController',
resolve: {
post: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
serie: true,
files: [
'post.js',
'post-controller.js'
]
});
}]
}
}
}
});
}
]);
post.js
angular.module('app.posts.post', []);
Lazy Loading ui-router states with ocLazyLoad and ui-router-extras futureStates
http://bardo.io/2014/08/26/oclazyload-future-states/
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
I have an AngularJS app that uses $routeProvider and a $stateProvider. I can get all my routes/states to work apart from /.
Here's my app.js file
var MailStash = angular.module("MailStash", ['ui.compat', 'ngResource', 'ngSanitize', 'ui.directives']).
config(function($stateProvider, $routeProvider, $urlRouterProvider) {
$routeProvider
.when('/', { controller: ListCtrl, templateUrl: '/js/partials/list.html' });
$stateProvider
.state('templates', {
url: '/templates',
abstract: true,
templateUrl: '/js/partials/list.html',
controller: ListCtrl,
})
.state('templates.list', {
// parent: 'templates',
url: '',
views: {
'main_content': {
templateUrl: '/js/partials/templates.new.html',
controller:CreateCtrl,
},
}
})
.state('templates.view', {
parent: 'templates',
url: '/{templateId}',
views: {
'main_content': {
templateUrl: '/js/partials/templates.view.html',
controller: ViewCtrl,
},
},
})
.state('templates.new', {
url: '/new',
views: {
'main_content': {
templateUrl: '/js/partials/templates.new.html',
controller: CreateCtrl,
},
},
})
.state('templates.edit', {
parent: 'templates',
url: '/edit/{templateId}',
views: {
'main_content': {
templateUrl: '/js/partials/templates.edit.html',
controller: EditCtrl,
},
},
})
}
)
.run(
[ '$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}]
);
...
Nothing happens when I go to / but when I go to /#templates the appropriate views and controllers kick in.
Can anyone see what is wrong with my $routeProvider and why going to / is not doing anything?
Why not simply use $urlRouterProvider and route to / ?
$urlRouterProvider.otherwise('/');
Then set a new state for /
$stateProvider.state({
name: 'home',
url: '/',
controller: 'HomeCtrl',
templateURL: 'home.html'
});
You can specify the default route like this
$routeProvider
.when('/templates', { controller: ListCtrl, templateUrl: '/js/partials/list.html' })
.otherwise({ redirectTo: '/templates' });
Hope this will help!
Otherwise is more useful to redirect to an error page, if the url is bad. But you can try to add <base href="/" /> to refer the base location in your index and add $locationProvider.html5Mode(true); after the declaration of routes in your config function to enabled, otherwise you need to add # to the url.
I hope this will help you.