I was testing ui-router for my application and wanted to have a default state for my route.
For example, when I go to localhost:3000/r, I can load either /a or /b in the page given as,
app.config(function($stateProvider) {
$stateProvider.state('a', {
templateUrl : '/a',
url : '',
controller : 'mainController'
})
.state('b', {
templateUrl : '/b',
url : '',
controller : 'mainController'
});
});
What exactly is the significance or the url attribute? If i leave it blank it acts as a default state for my route localhost:3000/r and loads /a into the page?
You need to inject another provider to your config function, that will be used to set the default route
And you need to set urls for your current states (a,b)
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/a");
$stateProvider.state('a', {
templateUrl : '/a',
url : '/a',
controller : 'mainController'
})
.state('b', {
templateUrl : '/b',
url : '/b',
controller : 'mainController'
});
});
By doing this, your default route will be "/a"
Related
I have a project that I want to link views together from different controllers so my controllers are
Dashboard and Board
and my views are
Dashboard
Index (Main view with ng-app and ng-view)
Test page
Board
BoardIndex (A view I want loaded into /Dashboard/Index's ng-view)
In my main.js file I have:
angular.module('App', ['ngRoute', 'ngResource']);
angular.module('App').config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Dash',
title: 'Dashboard'
})
.when('/PageOne', {
templateUrl: 'PageOne',
title: 'Page One'
})
.when('/Board', {
templateUrl: 'Board',
title: 'Board'
})
.when('/Messenger', {
templateUrl: 'Messenger/Messenger',
title: 'Messenger'
})
.otherwise({redirectTo: '/'})
});
and my link to messenger looks like this: /Dashboard/#/Messenger
The link above will hit the Messenger controller ActionResult that routes to the BoardIndex view, but it doesn't actually show like I expect it to which would be the url being: URL/Dashboard/#/Messenger with the content of BoardIndex showing. Instead it goes to URL/Messenger with a blank page.
I need some help wiring this up.
Thanks!
here I have defined a name of the controller as dashboard and board . please verify the controller's name from your controllers. this might help you. let me know if you are expecting something else
angular.module('app')
.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$stateProvider
.state('dash',{
url : '/',
templateUrl : 'dash',
controller : 'dashboard'
})
.state('pageOne',{
url : '/pageOne',
templateUrl : 'pageOne',
controller : 'dashboard'
})
.state('board',{
url : '/board',
templateUrl : 'board',
controller : 'board'
})
.state('messenger',{
url : '/Messenger',
templateUrl : 'Messenger/Messenger',
controller : 'dashboard'
})
$urlRouterProvider.otherwise('dash');
}])
Here is my ui-router configuration:
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url : '/',
views : {
'' : {
templateUrl : 'partials/default.ejs',
controller : 'DefaultCtrl'
},
'defaultView#home' : {
templateUrl : 'partials/table.ejs',
controller : 'TenderAppCtrl'
},
'detailView#home' : {
templateUrl : 'templates/viewtender.ejs',
controller : 'TenderDetailCtrl'
}
}
})
.state('about', {
url : '/about',
templateUrl : 'partials/about.ejs',
controller : 'AboutCtrl'
})
.state('settings', {
url : '/settings',
templateUrl : 'partials/settings.ejs',
controller : 'SettingsCtrl'
})
//dummy state used for browser back button functionality only
.state('home.detail', {
url : ':id'
});
No matter where I refresh my browser, the page goes back to '/' state. For eg. if my current state is '/settings' and if I hit browser refresh, I expect the page to reload the state 'settings' but it jumps back to '/'. It seems like $urlRouterProvider.otherwise('/') is triggered eveytime I refresh the page. I tried setting HTMLmode to false but that didn't work either.
In this sample what I need is that in plnkr.co/edit/5FVrydtTPWqYMhhLj03e?p=preview, when I click the Contact Numbers button, It will redirect to the Contact Numbers page in the Contacts.
Im using Angular JS and I hope someone can help me.
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
Credits to https://scotch.io/tutorials/angular-routing-using-ui-router for I am forking their example
Your code shows a ng-route example but the link you provide is a ui-router example. ($routeProvider vs $stateProvider).
If you would be using the $stateProvider from angular-ui-router to define the states you'll be using throughout your application it would probabably be more like the following:
$stateProvider.state('home', {
controller: 'mainController',
url: '/',
templateUrl: 'pages/home.html'
});
$stateProvider.state('about', {
controller: 'aboutController',
url: '/about',
templateUrl: 'pages/about.html'
});
$stateProvider.state('contact', {
controller: 'contactController',
url: '/contact',
templateUrl: 'pages/contact.html'
});
You see that a definition of a state uses a string to identify itself with: e.g. :'home', 'contact' etc. You can use the $state service from ui-router and use the \[go(to, params, options)\] method to transition between states in combination with this identifier.
Convenience method for transitioning to a new state. $state.go calls
$state.transitionTo internally but automatically sets options to {
location: true, inherit: true, relative: $state.$current, notify: true
}. This allows you to easily use an absolute or relative to path and
specify only the parameters you'd like to update (while letting
unspecified parameters inherit from the currently active ancestor
states).
All you need to do is to couple this to the click event of you button in your maincontroller. That is: inject $state into your mainController and couple an ng-click within your button to a function that executes $state.go().
<button type="submit" ng-click="$state.go('contact')">Contact Numbers</button>
My AngularJS redirects look like this:
// create the module and name it asApp
var asApp = angular.module('asApp', ['ngRoute']);
// configure our routes
asApp.config(['$routeProvider', '$httpProvider', '$locationProvider', function($routeProvider, $httpProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
title: 'Home of PeppyBurro – Radical Spanish learning tips and tricks for the adventurous learner',
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
title: 'About PeppyBurro – Radical Spanish learning tips and tricks for the adventurous learner',
templateUrl : 'pages/about.html',
controller : 'mainController'
})
// route for the 404 page not found error
.when('/notfound', {
title: 'Page not found',
templateUrl : 'pages/404.html',
controller : 'mainController'
})
.otherwise('/notfound', {
title: 'Page not found',
templateUrl : 'pages/404.html',
controller : 'mainController'
})
}]);
What I need is for the script to route me to 404.html when an undefined slug is entered in the URL. So if the user enters mysite.com/#/about, it should show him the about.html page. This bit works fine. But when the user enters, say, mysite.com/#/abc, it should show him the 404.html page as I have defined in my .otherwise and .when('/notfound') directives. But although the .when('/notfound') bit is working, the .otherwise bit isn't. Is there something I'm missing?
I think you should modify same as:
.otherwise({
redirectTo: '/notfound'
}
Reference here
.when and .otherwise are two different things.
.when defines a route
.otherwise sets the default route when a route hasn't been created.
$routeProvider.otherwise source code
You have two options.
Take out the route path
$routeProvider
// ... other routes
.otherwise({
title: 'Page not found',
templateUrl : 'pages/404.html',
controller : 'mainController'
})
or define the 404 route using .when and pass the route path into .otherwise.
$routeProvider
// ... other routes
.when('/notfound', {
title: 'Page not found',
templateUrl : 'pages/404.html',
controller : 'mainController'
})
.otherwise('/notfound');
Hope this helps!
Let me know if you have any questions.
EDIT
// As of Angular 1.3
.otherwise('/notfound')
// is short hand for
.otherwise({redirectUrl: '/notfound'})
You can use redirectTo:
.otherwise({
redirectTo: '/notfound'
});
I am currently working on an Angular app and facing some issues with URLs.
Problem:
My application has the main page which has multiple sections and all sections fetch data from backend. There is an animated scroller on each section, e.g. If I am at section1 and select Section3, it scrolls me to Section3 in a nice animated way. I have few pages which also are fetched from backend but totally changes the view. This is the hierarchy of views:
Page1:
Section1, Section2, Section3, Section4, Section5 (Will be visible in whole application aka HEADER)
Section5:
Link1, Link2 (Each link is totally a separate view)
If I am on Link1 and click any of the Section, it appends # to the URL relatively and doesn't redirect me to the actual section.
Question(s):
I do not want to use # anywhere at all, how can I get rid of it?
I do not want to remove animation from my home page.
If I am on some other view and click on any section (HEADER), it should take me to that particular position, how can I achieve this?
This is my routes.js file:
var webApp = angular.module('webApp', ['ngRoute','ngSanitize']);
webApp.config(function($routeProvider, $locationProvider) {
if(window.history && window.history.pushState) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
$routeProvider
.when('/', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
//section2
.when('/section2', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section3', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section4', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section5', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section7', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section8', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/Link1', {
templateUrl : 'application/link1.jsp',
controller : 'link1Controller'
})
.when('/Link2', {
templateUrl : 'application/link2.jsp',
controller : 'link2Controller'
})
.when('/Link3', {
templateUrl : 'application/link3.jsp',
controller : 'link3Controller'
});
});
Any help will be greatly appreciated or if anything is missing or required, please do let me know.