I have used $stateProvider in my angular application for routing. Prob I'm facing here is, on logout I could navigate to login page,but the login controller is not getting reloaded as expected. Please find below the $stateProvider configured in my app
in controller.js
$location.url('/login');
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'loginController'
})
.state('charts', {
url: '/charts',
templateUrl: 'templates/chart-screen.html',
controller: 'ChartController'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
Controller is not reloaded because of caching, please refer below link:https://stackoverflow.com/a/31725101/6071335
Related
App.js
var myApp=angular.module('sampleApp', ['ui.router','MainCtrl', 'NerdCtrl',
'NerdService', 'GeekCtrl', 'GeekService','ngMaterial']);
myApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html'
})
.state('nerd', {
url: '/nerd',
templateUrl: 'views/nerd.html',
//controller: NerdController
})
.state('geek', {
url: '/geek',
templateUrl: 'views/geek.html'
});
$urlRouterProvider.otherwise('/login');
});
I started with an AngularJs boilerplate and tried to use UI Router with it and, I've been stuck on this for a while. When I comment out the line of code shown above, it works fine and no errors come up. However when I add the controller, I get this module error in the console with "ReferenceError: NerdController is not defined" . I've defined the controller and added the controller dependency and I'm not sure what I need to do. It seems like a simple error that I'm overseeing. Thanks for the help!
Here is the controller file:
angular.module('NerdCtrl', []).controller('NerdController', function($scope)
{
$scope.tagline = 'Nothing beats a pocket protector!';
});
Could it be something wrong with my directory structure?
Change to : controller: "NerdController"
var myApp=angular.module('sampleApp', ['ui.router','MainCtrl', 'NerdCtrl',
'NerdService', 'GeekCtrl', 'GeekService','ngMaterial']);
myApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html'
})
.state('nerd', {
url: '/nerd',
templateUrl: 'views/nerd.html',
controller: "NerdController"
})
.state('geek', {
url: '/geek',
templateUrl: 'views/geek.html'
});
$urlRouterProvider.otherwise('/login');
});
How will I redirect my URL with a hah along.. Let us say I entered in the URL..
example.com/register
It should be redirected to
example.com/#/register
Is this possible?
AngularJs by default provides the routing functionality using $routeprovider or $stateProvider. You can use these providers in your config.
angular.config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state('dashboard', {
url:'/dashboard',
abstract:true,
templateUrl: 'views/main.html'
})
.state('dashboard.home',{
url:'/home',
templateUrl:'views/home.html'
})
$urlRouterProvider.otherwise('/');
});
I'm unable to load the template url for otherwise state but,able to redirect to specified url.I had tried using urlRouterProvider but of no use.
Can anyone please help me out regarding this issue ...
My js:
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: 'abc/home',
templateUrl: 'views/main.html'
})
.state('about',{
url:'abc/about',
controller:'KPIAnalyzeCtrl',
templateUrl:'views/about.html'
})
.state('otherwise', {
url: 'abc/home',
templateUrl: 'views/main.html'
});
// $urlRouterProvider.otherwise('abc/home');
});
Otherwise does not work with any templates, it's not a state. It's a "redirect" url. So if you type non-existing url, it will "redirect" to that one, so it should be a valid state (or a server response if you don't want it to be within SPA)
So e.g. if you do abc/blahblah, then it will go to abc/home. In your example it seems that you need to remove the otherwise state and then it should work redirecting you to the home state.
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: 'abc/home',
templateUrl: 'views/main.html'
})
.state('about',{
url:'abc/about',
controller:'KPIAnalyzeCtrl',
templateUrl:'views/about.html'
});
$urlRouterProvider.otherwise('abc/home');
});
Try the below code. You need to point to the state in urlRouterProvider
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: 'abc/home',
templateUrl: 'views/main.html'
})
.state('about',{
url:'abc/about',
controller:'KPIAnalyzeCtrl',
templateUrl:'views/about.html'
})
.state('otherwise', {
url: '/otherwise',
templateUrl: 'views/main.html'
});
$urlRouterProvider.otherwise('/otherwise');
});
As you want to load home state on Page load, use the below code or change the home state from below code.
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/main.html'
})
.state('about',{
url:'abc/about',
controller:'KPIAnalyzeCtrl',
templateUrl:'views/about.html'
})
.state('otherwise', {
url: '/otherwise',
templateUrl: 'views/main.html'
});
$urlRouterProvider.otherwise('/');
})
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.when("/user/:username",{
templateUrl: "user.html",
controller: "UserController"
})
.otherwise({redirectTo:"/main"});
In User.html i have a button which open a ng-dialog and it has some data from main.html but if the user directly navigated to /user/:username i am not able to render the data from main.html in my ng-dialog.
As per ngRoute, these routes do not have any relation between them. When you move to the route /user/:username, MainController is destroyed and UserController is activated.
If you want to have parent child relationship i.e. activate MainController on activation of /user/:username route, use UI Router.
Code in UI Router would look like:
function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/main',
templateUrl: 'main.html',
controller: 'MainController'
})
.state('home.user', {
url: 'user/:username',
templateUrl: 'user.html',
controller: 'UserController'
});
};
Pretty simple thing I'm trying to do. Fairly new to angular.
I just want to set the initial page that loads to be something other than the main that it is set to out of box when I generate an application
In your config (presumably app.js with your scaffold), change the templateUrl to be the template/view that you desire.
eg:
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/someOtherTemplate.html',
controller: 'MainCtrl'
})
...
});
If you're using ui-router then it's similar:
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/someOtherTemplate.html'
})
});
If you're using the angular router then it'll be something like this:
angular.module('yourMainAppModule').config(function($routeProvider) {
$routeProvider.when("/", {
templateUrl: "youTemplate.html",
controller: "YourHomeController"
})
});
You can read more about setting up your app's routes by looking at when() in the Angular Docs.
Above methods where not working for me, giving the url field an empty value worked great with ui-router :
$stateProvider
.state('home', {
url: '',
templateUrl: 'views/homepage.html',
controller: 'AppCtrl'
})