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.

Angular JS - UI-router not working

router working within my Angular JS app. My code is:
Script:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
HTML:
<div ui-view></div>
app.js:
var myApp = angular.module('myApp', ['ui-router','mainControl','ui.bootstrap', 'ngSanitize']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/splash');
//
// Now set up the states
$stateProvider
.state('splash', {
url: '/splash',
templateUrl: 'partials/splash2.html',
controller: 'MainControl'
})
.state('advice', {
url: '/advice',
templateUrl: 'partials/advice.html',
controller: 'MainControl'
})
.state('main', {
url: '/main',
templateUrl: 'partials/main.html',
controller: 'MainControl'
})
});
I was has successfully integrated ngRoute into my project, but for some reason the routing was not working in Safari and IE, So this is why I am now trying to integrate the UI-router into my project so that I can successfully get the routing working within my Application.
Any help would be appreciated.

You are having typo, module name should be ui.router instead of ui-router while creating myApp module for your app.

Besides ui.router, you should add the js file for ngSanitize (<script src="angular-sanitize.js">)

routing with angular js and expressjs

I am trying to start a project with express and angularjs. I was following this guide.
On first go i.e running localhost:3000, I am loading my index.jade file inside views directory successfully.
index.jade
extends layout
block content
div
ng-view
include footerjs
footerjs.jade
script(src="/javascripts/angular.min.js")
script(src="/javascripts/angular-route.js")
script(src="/javascripts/angular-resource.js")
script(src="/javascripts/app.js")
script(src="/javascripts/task.js")
views directory has a folder called partials. inside this folder I have added two templates. "task.jade" and "landing.jade".
my app.js
var mainApp = angular.module('mainApp', ['ngRoute', 'taskApp', "ngResource", 'ui.router' ]);
mainApp.config(['$routeProvider', '$locationProvider',function(routeProvider, locationProvider) {
locationProvider.html5Mode(true);
routeProvider
.when('/', {
templateUrl: 'partials/landing',
controller: 'taskController'
}).
when('/task', {
templateUrl: 'partials/task',
controller: 'taskController'
}).
otherwise({redirectTo: '/'});
}]);
and I have made an express route as:
router.get('/partials/:urlName', function(req, res) {
res.render('partials/'+req.params.urlName);
});
I am not able to route any partials. I am stuck at my layout at initial and an error 404 on trying to route /task. any help would be greatly appreciated.

You should include the file extension in templateUrl:
routeProvider
.when('/', {
templateUrl: 'partials/landing.jade',
controller: 'taskController'
}).
when('/task', {
templateUrl: 'partials/task.jade',
controller: 'taskController'
}).
otherwise({redirectTo: '/'});

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