Develop Reference

AngularJS html5mode URL not working

I have a simple AngularJS application with no code related to nodeJS in it. I'm facing problem in removing # from url. I've used ui-routes for routing.
'use strict';
var app = angular.module('myapp', ['ui-router']).
config(['$stateProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider.
state('home', {
url: '/',
templateUrl: 'views/index.html'
})
.state('where-am-i', {
url: '/where-am-i',
templateUrl: 'views/where_am_i.html',
controller: 'mainCtrl'
})
.state('audience', {
url: '/audience',
templateUrl: 'views/audience.html',
controller: 'mainCtrl'
});
}]);
Also added base tag to the head section of my index.html.
<base href='/' />
Also tried require no base but still not able to get it working.
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Adding base tag shows 404 for all the assets I've included in index.html file.
Need a quick and simple solution for this.
Thank you in advance!

add a line after $locationProvider.html5Mode(true); as below:
$locationProvider.hashPrefix('');
hope it works.

How to change/set the main view using Yeoman with Angular Fullstack

I created a project using Yeoman (angular-fullstack). And now I would like to know how the change/set the main view to login.html. So normally when you start the application you first get the main view where you can chose to login or register. What I want is when the application start the page starts direct on the login.html

in your app.js file located at client\app\app.js, in the angular config add the following:
$stateProvider
.run(function ($state) {
$state.go('login');
});
So it should look like:
.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$urlRouterProvider
.otherwise('/');
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('authInterceptor');
$stateProvider
.run(function ($state) {
$state.go('login');
});
})

I realize this has been out here for a while and you likely already have a good solution, but I was recently looking at this myself and see a couple options.
One, inside app.js you could add the following code snippet under $urlRouterProvider:
.when('/', '/login')
Making your full method be something like:
.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$urlRouterProvider
.when('/', '/login')
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('authInterceptor');
})
This would force anyone going to your base page url directly to login, unless they provide the full route to another page. However, if you intend to still use the main.html, you will then need to go into client/app/main/main.js and change the default route to:
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl'
});
So main is reachable by appending /main to the url.
Which brings me to option 2: Go into the main.js file and switch it's url to '/main' and go into login.js and switch it's url to '/'. Then anyone navigating to your base page automatically goes to the login screen but the url is viewed as just your domain without any sub page.
So client/app/main/main.js becomes:
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl'
});
And client/app/account/account.js now contains:
.state('login', {
url: '/',
templateUrl: 'app/account/login/login.html',
controller: 'LoginCtrl'
})

How to use angularjs routeProvider with MVC plugins

I'm working on an plugin-based MVC application and I want to use angularjs as route provider. (I'm newbie in angular.) I have specified the necessary information in my app.js and it's working properly for those views, which are in the same project (i.e. /home):
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'Home/Index',
controller: 'mainController'
})
.when('/about', {
templateUrl: 'Plugin.App/Home/About',
controller: 'aboutController'
})
.otherwise({
redirectTo: 'Home/SomeLocation'
});
});
app.controller('mainController', mainController);
app.controller('aboutController', aboutController);
But, when I tried to locate any partial view from my plugin, I got 404. Do you have any suggestion to solve this situation?
Thanks for any help in advance!
Craig85

Redirecting outside of ng-view in Angular using ngRoute

I'm on an Angular project and I'm using the default ngRoute for routing.
angular.module('myApp', ['ngRoute'])
.config(function ($routeProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl: 'main',
controller: 'mainController'
})
.when('/login', {
templateUrl: 'account/login',
controller: "loginController"
})
.otherwise({
redirectTo: '/'
});
});
When I redirect to the login page, the login page appears as a partial view within my index.html page. However, I want the login form to appear within its own html page (without the headers and footers that exist on the other pages). Is it possible to achieve this using ngRoute, or do I need to switch to using ui-router?

AngularJS Routes with Rails

I'm trying to use angularjs routing within a Rails application but I'm having some difficulty. I've split up my page into partials (called _events.html.erb, _categories.html.erb, and _times.html.erb) and I'm set up my routing in my js file like so:
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/meetups/new/categories', {
templateUrl: '??',
controller: 'MeetupDataCtrl'
}).
when('/meetups/new/times', {
templateUrl: '??',
controller: 'MeetupDataCtrl'
}).
when('/meetups/new/events', {
templateUrl: '??',
controller: 'MeetupDataCtrl'
}).
otherwise({
redirectTo: '??'
});
}]);
My only problem is that I can't figure out what I should put as the template URLs since I can't seem to access the files from a URL in any way.
Any ideas how to make this work? Or better yet, some best practices around the issue