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);
});
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 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
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 )
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 I reload the website from the root (ex: website.com), the refresh is fine. However, when I reload from anywhere else (website.com/about), only the partial html for the about page is loaded, leaving out all the template code such as headers, footers, script imports, etc. In addition, the browser insists on loading website.com/about/ , including an ending slash.
Here is the relevant source.
app.js
angular.module("myApp", ['ui.router'])
.run(function($state, $stateParams) {
})
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('home', {
url: "/",
templateUrl: "home/index.html"
})
.state('about', {
url: "/about",
templateUrl: "about/index.html"
})
.state('contact', {
url: "/contact",
templateUrl: "contact/index.html"
})
.state('news', {
url: "/news",
templateUrl: "news/index.html"
})
.state('vip', {
url: "/vip",
templateUrl: "vip/index.html"
});
$urlRouterProvider.otherwise('/');
});