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
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');
});
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'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('/');
});
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'
})