Peter Peter - 1 year ago 83
AngularJS Question

Angular ng-view not displaying [leaning angular]

I'm learning Angular and I'm having problem on the routing. I've tried to solve it myself but have no idea what it can be.
Here's my script and a Plunker link of my script

var singleApp = angular.module('singleApp', ['ngRoute'])

.config([$routeProvider, $locationProvider, function($routeProvider, $locationProvider) {
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'

// Deletes # in URL with HTML History API

.controller('mainController', function($scope) {
$scope.message = 'This is the main page';

.controller('aboutController', function($scope) {
$scope.message = 'This is the about page';

.controller('contactController', function($scope) {
$scope.message = 'This is the message page';

I've imported the both angular and routing scripts in html.
The pages has just $message

Answer Source

The first issue is with your config. You're using a great practice by using an array for your injections but the first arguments must be strings. Change this:

.config([$routeProvider, $locationProvider, function($routeProvider, $locationProvider) {

to this

.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

Then... remove this line:


Here's information about HTML5 mode:$location/nobase

Enabling HTML 5 Mode in AngularJS 1.2

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download