I'm trying to replace AngularJS Route with UI Router since that seems to be what everyone uses. I'm just getting started and am wondering how to replace the following code with $stateProvider:
$routeProvider
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.when('/dashboard', {
templateUrl: 'views/dashboard.html',
controller: 'DashboardCtrl'
})
.otherwise({
redirectTo: '/login'
});
Replace when with state:
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
More details here: https://github.com/angular-ui/ui-router
Related
my code its something like this:
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.when('/login', {
controller: 'LoginController',
templateUrl: 'views/login.html'
})
.otherwise({
redirectTo: '/'
});
});
But I wonder if it could be something like this:
...
.when('/login' OR '/' OR '/SOMETHING', {
controller: 'LoginController',
templateUrl: 'views/login.html'
})
...
I already read doc of when function and a have see this question too, but unfortunately I have not be able to find a conclusive answer.
Can when function of routeProvider take multiple url paths?
Thank you in advance.
Your code seems to be fine.Can you just guide me which error you are getting?
In order to reuse the data you can simply:
app.config(function ($routeProvider) {
loginData = {
controller: 'LoginController',
templateUrl: 'views/login.html'
};
$routeProvider
.when('/', loginData)
.when('/login', loginData)
…
.otherwise({
redirectTo: '/'
});
});
I have create a new project, but got a problem which I am not able to fix.
Here's my example:
angular.module('MosysTimes', ['ngRoute']).config($routeProvider, RouteConfiguration);
function RouteConfiguration ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'start.html',
controller: 'WelcomeController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/'
});
}
It always says:
$routeProvider is undefined....
Any help will be appreciated ?
You should change your code to this.
angular.module('MosysTimes', ['ngRoute']).config(['$routeProvider',function($routeProvider)
{
$routeProvider
.when('/', {
templateUrl: 'start.html',
controller: 'WelcomeController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/'
});
}]);
Did you add ngroute script to you index html?
for example:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
and try to use following syntax
angular.module("MosysTimes",['ngRoute']).config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'start.html',
controller: 'WelcomeController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/'
});
});
angular.module('yourModule').config(['$routeProvider', function($routeProvider){
$routeProvider
.when() .....
}]);
You should declare $routeProvider into function. After that you can use this $routeProvider to access the loading template on your main page.
thanx to you all, after trying your hints I got it working and a bit of more understanding angular.. thx...
Hi below is my code for urlRouterProvider otherwise.
.config(function config($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/invalid');
$stateProvider.state('view', {
url: '/view?{businessId:^[0-9]{1,20}$}',
templateUrl: 'view/view.tpl.html',
controller: 'ViewCtrl',
controllerAs: 'vm'
})
.state('otherwise', {
url: '/invalid',
templateUrl: 'view/view.error.tpl.html'
});
})
This is what i am expecting:
1. if i go to view?businessId=12345 it should load the page without any issues
2. if i go to view?businessId=abcd it should re-direct it to the view.error.tpl.html
But instead, it does nothing if i enter the invalid url.
I reffered to this post for help but none of the options really work Otherwise on StateProvider
you can try this, without using the otherwise function:
$stateProvider.state('view', {
url: '/view?{businessId:^[0-9]{1,20}$}',
templateUrl: 'view/view.tpl.html',
controller: 'ViewCtrl',
controllerAs: 'vm'
})
.state('otherwise', {
url: '*path',
templateUrl: 'view/view.error.tpl.html'
});
Try this
.config(function ($urlRouterProvider, $stateProvider) {
$stateProvider.state('view', {
url: '/view?{businessId:^[0-9]{1,20}$}',
templateUrl: 'view/view.tpl.html',
controller: 'ViewCtrl',
controllerAs: 'vm'
})
.state('otherwise', {
url: '*path',
templateUrl: 'view/view.error.tpl.html'
});
})
just a quick question. Can named views in the ui-router for angular have routes and an url? And if so, how can I activate them?
I searched through the wiki, but can't find any info on that.
What I want is a app with three different child routes so only one can be active at a time, but they're supposed to be in different views, so I can nicely animate between them with an accordion effect.
Any help there?
Thanks!
EDIT: Here's some code of my routing so far:
function routeConfig($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
//templateUrl: 'app/main/main.html',
//controller: 'MainController',
//controllerAs: 'main',
views: {
'' : {
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
},
'contact': {
templateUrl: 'app/contact/contact.html',
controller: 'ContactController',
controllerAs: 'contact'
},
'profile': {
templateUrl: 'app/profile/profile.html',
controller: 'ProfileController',
controllerAs: 'profile'
},
'works': {
templateUrl: 'app/works/works.html',
controller: 'WorksController',
controllerAs: 'works'
}
}
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
}
I'd recommend just creating different states for each view. There's no reason you can't animate smoothly between different states.
So:
function routeConfig($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
})
.state('home.contact', {
templateUrl: 'app/contact/contact.html',
controller: 'ContactController',
controllerAs: 'contact'
})
.state('home.profile', {
templateUrl: 'app/profile/profile.html',
controller: 'ProfileController',
controllerAs: 'profile'
params: {
"user" : {}
}
})
.state('home.works', {
templateUrl: 'app/works/works.html',
controller: 'WorksController',
controllerAs: 'works'
})
}
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
}
In your ui-sref links, you can pass data to those views using parameters, like this: <a ui-sref="home.profile({user: contact.user}) along with the 'params' section in the state definition as I've included above.
Routing is serverside so if you call any address your serverside routing needs to launch proper html or javascripts which will let you render what you want.
For more accurate answer please respond with more details: what is your serverside engine, which version of angular you use etc.
I'm making a project in Angular 1.4, and i'm using ui-router, I have split my project in several sub-modules, there's one 'parent' module (not sure if i'm using the concept of parent and child right) and several 'child' modules.
The 'parent' has routes for the global login, and the two main menus of each group, the groups are: guides, projects; each one of them has it's own 'child' modules some of them are: guides[Web, Mobile, Desktop], projects[Business, Community]. Each module has it's own routes, and what i want is to be able to route the app though each module.
The main routes are:
/
/login
/guides
/guides/login
/guides/web
/guides/mobile
/guides/desktop
/projects
/projects/login
/projects/business
/projects/community
The site has somehow same login concept of SE, people can have a global account, or a single account on a specific module.
What i've tried so far if to make the routes as Doc says:
angular.module('main', ['main.guides', 'main.projects']).config(function ($stateProvider) {
$stateProvider.
state('main', {
url: '/',
templateUrl: './views/index.html',
controller: 'IndexCtrl'
}).
state('login', {
url: '/login',
templateUrl: './views/login.html',
controller: 'LoginCtrl'
}).
state('guides', {
url: '/guides',
templateUrl: './views/guides-menu.html',
controller: 'GuidesCtrl'
}).
state('projects', {
url: '/projects',
templateUrl: './views/projects-menu.html',
controller: 'ProjectsCtrl'
});
});
angular.module('main.guides', []).config(function ($stateProvider) {
$stateProvider.
state('main.guides-login', {
url: '/login',
templateUrl: './views/login.html',
controller: 'LoginCtrl'
}).
state('main.guides-menu', {
url: '/login',
templateUrl: './views/menu.html',
controller: 'LoginCtrl'
}).
state('main.guides-web', {
url: '/web',
templateUrl: './views/web/list.html',
controller: 'ListCtrl'
}).
state('main.guides-mobile', {
url: '/web',
templateUrl: './views/mobile/list.html',
controller: 'ListCtrl'
});
});
angular.module('main.projects', []).config(function ($stateProvider) {
$stateProvider.
state('main.projects-login', {
url: '/login',
templateUrl: './views/login.html',
controller: 'LoginCtrl'
}).
state('main.projects-business', {
url: '/business',
templateUrl: './views/business/list.html',
controller: 'ListCtrl'
}).
state('main.projects-menu', {
url: '/business',
templateUrl: './views/menu.html',
controller: 'ListCtrl'
}).
state('main.projects-community', {
url: '/business',
templateUrl: './views/community/list.html',
controller: 'ListCtrl'
})
});
But don't know how to access to those urls... also would like some opinion about this approach, would there be a better practice?
I created a plunkr to demo your states. I altered the code to use templates instead of templateUrl but that shouldn't change what you are trying to figure out. I made some assumptions about your layout based on the urls provided. If you pop it out into the external viewer you can see the urls being used. Find it here:
http://plnkr.co/edit/9lPQ3GlmH0AEqhzX7lj9?p=preview
Urls in the ui-router are used as part of what specifies the state. So when you want /projects/business you have a state that is a child of projects that has a url of /business. Something like:
state('projects.business', {
url: '/business',
template: '<div> projects business</div>',
controller: 'ListCtrl'
})
The dot notation in the state definition tells the ui router that this is child state of projects. The url value provided is added to the parent state url.
I think your module strategy is solid. You just need to wrap your head about the parent child relationships used in the ui.router.