Ben Clarke Ben Clarke - 1 month ago 4
AngularJS Question

unable to get my RouteProvider working as well as the controllers


I will split the issue into two different parts. Firstly, I am trying to create a one page application with the main html page being index.html.

In this page I have:

<!DOCTYPE html>
<html ng-app="aceTracker">

<script src="scripts/jquery-2.2.0.min.js"></script>
<script src="scripts/angular/angular.min.js"></script>
<script src="scripts/bootstrap/bootstrap.min.js"></script>
<script src="scripts/app/app.js"></script>
<script src="scripts/controller/controller.js"></script>
<script src="scripts/angular/angular-route.min.js"></script>
<script src="scripts/angular/angular-animate.min.js"></script>

<link href="styles/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="styles/bootstrap/bootstrap-theme.css" rel="stylesheet" />
<link href="styles/default.css" rel="stylesheet" />

<meta charset="utf-8" />
<body ng-controller="loginController">
<div ng-view></div>

Then i have created a partial page that looks like:

<div class="container-fluid" id="login" ng-controller="loginController">
<div class="row">
<form ng-animate="{enter: 'animate-enter'}" name="loginForm" ng-submit="" autocomplete="off" class="text-center col-lg-4 col-lg-offset-4" style="padding: 300px 50px 0px 50px ;">
<div class="col-lg-12">
<img src="../images/473d5e6a.canvs_logo_white.svg" style="padding-bottom:30px;" />
<div class="col-lg-12">
<input id="email" name="email" type="email" ng-model="" placeholder="Email" class="login">
<div class="col-lg-12">
<input id="password" type="password" ng-model="" placeholder="Password" class="login">
<div class="col-lg-12">
<button type="submit" class="login-button" ng-click="Login()">


Now in the Javascript i have a file called app.js which looks like:

var app = angular.module('aceTracker', ['ngAnimate','ngRoute']);

app.config(function ($routeProvider) {

// route for the home page
.when('/index.html', { templateUrl: 'partials/login.html', controller: 'loginController'})

// route for the about page
.when('/about.htmll', { templateUrl: 'pages/about.html', controller: 'aboutController' })


When i load up my index.html page the partial that i want to load is login.html this does not seem to be working?

Any ideas?


I think, what your app doing is the following. If you load, then you load your application with route '/'.

To go to your index.html route the url would be something like:

So, to make it work, just change '/index.html' route to '/' route


// route for the home page
.when('/', { templateUrl: 'partials/login.html', controller: 'loginController'})

// route for the about page
.when('/about', { templateUrl: 'partials/about.html', controller: 'aboutController' })

You may also add a default route, so that nobody will get to the partially-rendered view by mistake. I'd suggest you to look at this example of how routes are defined:

Also, I'd recommend looking at the following alternative, whenever you will fill that angular native routing is not enough for your needs: