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('/');
});
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);
});
What am I missing? Why would the Home template NOT load via .otherwise('/')? If I link to href="/#/" or ui-sref="home" everything works fine. However the Home template does NOT load if I try $urlRouterProvider.otherwise is working. The console does not show any errors.
Another interesting point is the URL is never modified when the first page loads. My other apps usually redirect from http://www.domain.com to http://www.domain.com/#/. This app is not showing the updated URL.
I have tried this in multiple browsers. No extensions or plugins are active.
Here are my routes:
(function () {
'use strict';
angular
.module('myapp')
.config(configRoutes);
configRoutes.$inject = ['$stateProvider', '$urlRouterProvider'];
function configRoutes ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/partials/home.html'
})
.state('login', {
url: '/login',
templateUrl: 'app/partials/login.html',
})
.state('signup', {
url: '/signup',
templateUrl: 'app/partials/signup.html',
})
.state('logout', {
url: '/logout',
template: null,
controller: 'LogoutCtrl'
})
.state('profile', {
url: '/profile',
templateUrl: 'app/partials/profile.html',
});
}
})();
I have set up within angular 1.5 the Ui-router as follows:
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('blank', { url:'/blank', templateUrl: 'home/blank.html' })
`enter code here` .state('verify', { url:'/verify/:type', templateUrl : 'update/verify.html', controller: function($scope, $stateParams, general) { general.verifyemail($stateParams.type);} })
.state('home', { url:'/', templateUrl: 'home/home.html' })
.state('about', { url:'/about', templateUrl: 'about/about.html' })
.state('faq', { url:'/faq', templateUrl: 'faq/faq.html' })
.state('exercise', { url:'/exercise', templateUrl: 'practice/exercise.html' })
.state('levels', { url:'/levels', templateUrl: 'practice/level.html' })
}]);
the router works when the app is already started but if you extend the url to include the path i.e. myapp/about and paste the url into a new browser window, the browser will open the app but go to the home page. If you paste the same url into the page already loaded, it goes to the right state.
I've obviously set it up wrong but I can't figure out why.
Have you tried to use # before route name?
Like: myapp/#/about
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('/');
})
Let's say I have a page with URL http://example.com/blogs/lorem-ipsum
If user is signed in and owner of the post, they have the inline option to edit SLUG(or name which is generating the slug).
Question is, if they do edit the SLUG, how can I dynamically update the lorem-ipsum in the URL?
Below is the Route code, I am using UI Router
app.config([
"$stateProvider", "$urlRouterProvider", "$locationProvider", function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise("/");
$stateProvider.state("root", {
url: "/",
templateUrl: "root.html"
}).state("root.blogs", {
url: "^/blogs",
views: {
'content#root': {
templateUrl: "blogs/index.html",
controller: "BlogsController"
}
}
}).state("root.blogs.show", {
url: "^/blogs/:slug",
views: {
'content#root': {
templateUrl: "blogs/show.html",
controller: "BlogsController"
}
}
});
}
]);