In my app I've tried to set this up correctly per every blog post I've seen talking about it but I can't get the app to load at the / url. I built the app with yeoman's angular generator so it uses grunt to spin up a connect server. But going to localhost:9000 doesn't show the app anymore since trying to add $locationProvider and set the html5location to true.
angular.module('bidrAdminApp', ['sky','ui.router','ngSanitize'])
.config(function ($stateProvider,$urlRouterProvider,$locationProvider) {
$stateProvider
.state('Home',{
url: '',
templateUrl: 'views/index.html',
controller: 'ApplicationCtrl'
})
.state('Home.Events', {
url: '/events',
templateUrl: 'views/events/index.html',
controller: 'EventsCtrl'
})
.state('Home.Event',{
url: '/events/{eventId}',
templateUrl: 'views/events/event/index.html',
controller: 'EventCtrl'
})
.state('Home.Event.Overview',{
parent: 'Home.Event',
url: '/overview',
templateUrl: 'views/events/event/overview.html',
})
.state('Home.Event.Settings',{
parent: 'Home.Event',
url: '/',
templateUrl: 'views/events/event/settings.html',
});
$urlRouterProvider.otherwise('');
$locationProvider.html5Mode(true);
});
I have the <base href="/" /> in my head of the base index.html file as well.
If I change the Home state to url: '/admin' it works going to /admin but this isn't the desired outcome. Not sure if I'm missing a configuration.
Change this line:
$urlRouterProvider.otherwise('');
to this line:
$urlRouterProvider.otherwise('/');
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');
});
I have an angular 1.5 app with ui-router.
i have configured the router like this:
$stateProvider
.state('home', {
url: '/home',
controller: 'HomeController',
templateUrl: 'components/home/home.html',
controllerAs: 'vm'
})
.state('login', {
url: '/login',
controller: 'LoginController',
templateUrl: 'components/login/login.html',
controllerAs: 'vm'
})
.state('cb', {
url: '/cb',
controller: 'cbController',
templateUrl: 'components/cb/cb.html',
controllerAs: 'vm'
});
And added a default route:
$urlRouterProvider.otherwise('/home');
I have told to app to use html5 mode:
$locationProvider.html5Mode(true);
And added the base element in the head section of my index.html
<base href="/">
When i browse to http://localhost:5000/ the router works fine and navigate to home changing the url to http://localhost:5000/home.
But when i try to navigate directly to http://localhost:5000/home i'm getting 404.
The application is hosted in a visual studio web project in a folder (/app/index.html)
Any idea what i'm doing wrong ?
Thanks Gilad
I have used $stateProvider in my angular application for routing. Prob I'm facing here is, on logout I could navigate to login page,but the login controller is not getting reloaded as expected. Please find below the $stateProvider configured in my app
in controller.js
$location.url('/login');
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'loginController'
})
.state('charts', {
url: '/charts',
templateUrl: 'templates/chart-screen.html',
controller: 'ChartController'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
Controller is not reloaded because of caching, please refer below link:https://stackoverflow.com/a/31725101/6071335
I do not know which components that would make preventing forced browsing.
I have an Angular app with gulp and currently I can browse file from url.
ex: http://localhost/foldername/file.js
I would like to prevent this and let user only access routes that I setup with $stateProvider.
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index', {
url: '/',
templateUrl: 'home/home.html',
controller: 'HomeCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'login/login.html',
controller: 'LoginCtrl'
});
$locationProvider.html5Mode(true);
My gulp setting is
var connect = require('gulp-connect');
connect.server = {
livereload: true,
root: ['app'],
port: 8080
};
How can I prevent forced browsing ?
AngularJS: 1.4.9
gulp: 3.9.0
I started building ionic app, and I want to change the views, I am not using tag, I have separate file for every view.
The states look like this:
var route = angular.module('route', []);
route.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
abstract: true,
templateUrl: 'home.html',
})
.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('register', {
url: '/register',
templateUrl: 'register.html'
})
.state('manage-booking', {
url: '/manage-booking',
templateUrl: 'manage_booking.html'
})
.state('clinic-list', {
url: '/clinic-list',
templateUrl: 'clinic_list.html'
})
$urlRouterProvider.otherwise('/home');
});
When I run the app, the url defaults to '/#/home'
I am not able to figure out why is it not loading the home page. When I change the otherwise to point to '/#/login', everything works.
Remove the abstract: true property (source)