how to go to state with stateProvider? - angularjs

Playing around with angular stateProvider, this is my route:
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state("start", {
url: "/",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}]);
On bootstrapping I would like to go to state 'test':
app.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$state.go('test');
console.log('app.run');
}]);
These are the controllers:
app.controller('StartCtrl', function($scope) {
console.log('start');
});
app.controller('TestCtrl', function($scope) {
console.log('test');
});
Why is the application routing to the 'start' state ? I would like to go to the 'test' state?
Code reference:http://plnkr.co/edit/FCcL4M?p=preview

You need to change the url for either the test or the start "state", right now they are both the same. I changed the test state url to "/test" and it loaded correctly.
http://plnkr.co/edit/2esV4dbd4ptNSEmwD3g4?p=preview
app.config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state("start", {
url: "/",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/test",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}
]);

Just need to add to previous answer : both start and test need to be corrected
to follow standards.
http://plnkr.co/edit/TjDzyL?p=preview
pp.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state("start", {
url: "/start",
templateUrl: 'start.html',
controller: 'StartCtrl'
})
.state("test", {
url: "/test",
templateUrl: 'test.html',
controller: 'TestCtrl'
});
}]);

Related

How to add Dynamic templateUrl

I have web application where I need to load a template with different parameters like.
.when('/form/:ProjectID/:FormID', {
templateUrl: 'partials/Form.ashx?fid=' + FormID,
controller: 'FormController'
})
I am not able to get the above code working. Can someone tell me how I can fix this issue? I am new to AngularJS and not an expert.
This is the full code.
var app = angular.module('MyApp', ['ui.grid', 'ngSanitize', 'angularTrix', 'ui.codemirror', 'ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'partials/Home.ashx',
controller: 'HomeController'
})
.when('/project/:ProjectID', {
templateUrl: 'partials/Projects.ashx',
controller: 'ProjectController'
})
.when('/form/:ProjectID/:FormID', {
templateUrl: 'partials/Form.ashx?fid=1',
controller: 'FormController'
})
.otherwise({ redirectTo: '/home' });
});
We can use $stateParams and templateProvider to load dynamic templateurl
.state('general', {
url: '/{type}',
//templateUrl: 'pages/home.html',
templateProvider: ['$stateParams', '$templateRequest',
function($stateParams, $templateRequest)
{
var tplName = "pages/" + $stateParams.type + ".html";
return $templateRequest(tplName);
}
],
// general controller instead of home
//controller: 'homeController',
controller: 'generalController',
controllerAs: 'ctrl'

URL doesn't change after changing ui-router state

I have followed the documentation and online tutorials to create my ui-router states however when I enter my state, the URL doesn't update. Same happens when I do $state.go('main.about-me'); for example. The state changes but not the URL. Is there something wrong with my config that I can't see clearly?
Will be thankful for any tips. Thanks.
'use strict';
angular
.module('myApp.config', ['ui.router'])
.config(routes)
.run(['$rootScope', '$location', '$stateParams', '$state', appRun]);
function routes($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: 'main',
abstract: true,
views: {
'': {
templateUrl: 'main/main.tpl.html',
controller: 'mainController as vm'
},
'nav-bar#main': {
templateUrl: 'main/nav-bar/nav-bar.tpl.html',
controller: 'navigationBarController as vm'
}
}
})
.state('main.home', {
url: '/home',
views: {
'content': {
templateUrl: 'home/home.tpl.html',
controller: 'homeController as vm'
}
}
})
.state('main.about-me', {
url: '/about-me',
views: {
'content': {
templateUrl: 'about-me/about-me.tpl.html',
controller: 'aboutMeController as vm'
}
}
})
.state('main.contact-me', {
url: '/contact-me',
views: {
'content': {
templateUrl: 'contact-me/contact-me.tpl.html',
controller: 'contactMeController as vm'
}
}
});
$urlRouterProvider.otherwise('');
}
function appRun($rootScope, $location, $stateParams, $state) {
console.log('run the app');
console.log('$location', $location);
console.log('$rootScope', $rootScope);
console.log('$stateParams', $stateParams);
$state.go('main.home');
}
Inside my body I have this
<div ng-cloak>
<div ui-view class="content-container"></div>
</div>

$state.go does not change url but redirect to that particular page

I am unable to change my Url using $state.go but i am getting that page for which i have requested in $state.go , I have also used route.js
angular.module("myApp")
.controller('myController', ['$scope','$state', function ($scope, $state) {
$scope.showDetails = function(data){
if(some true condition){
$state.go("create.preemp");
}
else if(some true condition){
$state.go("create.prepolicy");
}
}
}])
angular.module("myApp")
.config(function ($stateProvider, $routeProvider, $urlRouterProvider) {
$stateProvider
.state('signin', {
url: '/',
templateUrl: 'signin/signin.html',
controller: 'signinController'
})
.state('create.preemp', {
url: '/create.preemp',
templateUrl: 'preemp.html',
controller: 'preempController'
})
.state('create.prepolicy', {
url: '/create.prepolicy',
templateUrl: 'prepolicy.html',
controller: 'prepolicyController'
})
$urlRouterProvider.otherwise('/');
})
??

angularjs ui-router templateURL not loading on plunker

my plunk http://plnkr.co/edit/3WRDCv?p=preview
app.js
'use strict';
var app = angular.module('txtbinge', ['ionic', 'firebase']);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
controller: 'ContentController',
templateUrl: 'applayout.html'
})
.state('app.home', {
url: '/home',
views: {
'centerContent' :{
templateUrl: 'home.html'
}
}
})
//test plunker to see if stateParams are causing issues
.state('crop', {
url: '/crop',
//template: 'test',
templateUrl: 'applayout.html',
controller: 'CropController'
})
.state('crop-image', {
url: '/crop-image/:imageURI',
//template: 'test',
templateUrl: 'menu.html',
controller: 'CropController'
});
$urlRouterProvider.otherwise('/crop');
});
try loading a templateURL from crop or crop-image states. It doesn't seem to work. Which is very odd considering app.home does load. Any ideas?
Well, templateUrl is case sensitive...

AngularJS: route provider doesn't work when on root

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.

Resources