var mysite = angular.module('myApp', ['ui.router','ui.bootstrap']);
mysite.config(function($stateProvider, $urlRouterProvider, $locationProvider ) {
$urlRouterProvider.otherwise('/portfolio');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('portfolio', {
url: '/portfolio',
templateUrl: 'portfolio/portfolio.html',
controller: 'MainController'
})
.state('about', {
url: '/about',
templateUrl: 'about/about.html',
controller: 'MainController'
})
.state('contact', {
url: '/contact',
templateUrl: 'contact/contact.html',
controller: 'MainController'
})
});
I am getting Unknown provider: $locationProvider from ui.router.router error while running the page .
Please help if i am missing something in the code .
use
mysite.config(function($stateProvider, $urlRouterProvider)
instead of
mysite.config(function($stateProvider, $urlRouterProvider, $locationProvider )
Related
I have the problem that whenever I refresh the page, a slash is being added to the url. Im being automatically (with timeout) directed to the state 'home' from the state 'intro'.When I go to home, instead of /home, I see /home/ which leads to: Cannot GET /home/.
Ive seen a suggestion somewhere in this forum to add $urlMatcherFactoryProvider.strictMode(false); to fix that, however that doesn't work as well as nothing else I tried. Any ideas?Thanks!
app.config(function ($stateProvider) {
$stateProvider.state('intro', {
url: '/',
templateUrl: 'intro/intro.html',
controller: 'introCtrl'
});
});
app.config(function ($stateProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: 'home/home.html',
controller: 'homeCtrl'
});
});
my app.js file:
var app=angular.module('myApp', ['ui.router', 'ui.materialize']);
app.config(function ($urlRouterProvider, $locationProvider,$urlMatcherFactoryProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
});
use this code
var app=angular.module('myApp', ['ui.router', 'ui.materialize']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('app.intro', {
url: '/',
templateUrl: '/intro/intro.html',
controller: "introCtrl"
})
.state('app.home', {
url: '/home',
templateUrl: '/home/home.html',
controller: "homeCtrl"
})
$locationProvider.html5Mode(true);
});
I have a problem with my $urlRouterProvider.otherwise();
When emulated on android, the app launches on the artists state and not the welcome.
I don't see where the problem might come from.
app.config(['$stateProvider', '$urlRouterProvider', '$ionicConfigProvider', '$sceDelegateProvider', function($stateProvider, $urlRouterProvider, $ionicConfigProvider, $sceDelegateProvider){
$stateProvider.state('welcome', {
url: '/welcome',
templateUrl: 'templates/welcome.html',
controller: 'WelcomeCtrl'
})
.state('user',{
url:'/user',
templateUrl: 'templates/user.html',
controller: 'UserCtrl'
})
.state('settings',{
url:'/settings',
templateUrl: 'templates/settings.html'
// controller: 'SettingsCtrl'
})
.state('artists',{
url:'/artists',
templateUrl: 'templates/artists.html',
controller: 'ArtistsCtrl'
})
.state('artist',{
url:'/artists/:artistId',
templateUrl: 'templates/artist.html',
controller: 'ArtistCtrl'
})
.state('search',{
url:'/search',
templateUrl: 'templates/search.html',
controller: 'SearchCtrl'
});
$urlRouterProvider.otherwise('/welcome');
}]);
thanks for any help !
try using
$stateProvider
.state("welcome", { url : '/welcome'})
I have a main view and a submain view. In submain, I agian have some subviews but these are suppose to be loaded dynamically i.e Round1,Round2,Round3.... is coming from dynamic value It may have 5 rounds or 4 or 3... How can I load those states dynamically ?
angular
.module('myApp', ['ngResource', 'ngRoute', 'ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'views/mainView.html',
controller: 'mainCtrl'
})
.state('main.submain', {
url: '/sub_main',
templateUrl: 'views/subMainView.html',
controller: 'subMainCtrl'
})
.state('main.submain.Round1', {
url: '/Round_One',
templateUrl: 'views/subView.html',
})
.state('main.submain.Round2', {
url: '/Round_Two',
templateUrl: 'views/subView.html'
})
.state('main.submain.Round3', {
url: '/Round_Three',
templateUrl: 'views/subView.html'
})
.state('main.submain.Round4', {
url: '/Round_Four',
templateUrl: 'views/subView.html'
})
.state('main.submain.Round5', {
url: '/Overall_Feedback',
templateUrl: 'views/Round5View.html'
})
$urlRouterProvider.otherwise('/login');
});
Please refer to the this Stack overflow question. This way you can add state to your $stateprovider dynamically
here's my ui-router sample code:
http://plnkr.co/edit/jXTA0uU47JAcw7SNb2tj?p=preview
This app is using ui-router, I want to transfer this into ng-route because my project is using ng-route already. I cant find any solution for using both ui-router & ngRoute in one angular config.
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'home.html'
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
url: '/about',
templateUrl: 'about.html'
});
});
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html'
})
.when('/about', {
templateUrl: 'about.html',
})
.otherwise({
redirectTo: '/home'
});
$locationProvider.html5Mode(true);
});
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.