Issue
I am playing with angularjs, and I cannot find the reason why ng-view does not work. What am I doing wrong?
var app = angular.module('Demo', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('#/about', {
templateUrl: 'about.html',
controller: 'homeController'
});
$routeProvider.when('#/contacts', {
template: 'contacts.html',
controller: 'contactsController'
});
});
app.controller('homeController', function ($scope) {
alert('homeController');
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src=""//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js""></script>
<body ng-app>
<div class="menu">
<ul>
<li><a href="#/about">About</a></li>
<li><a href="#/contacts">Contacts</a></li>
</ul>
</div>
<div class="MainContent">
<div ng-view></div>
</div>
<template id="about.html">
about
</template>
<template id="contacts.html">
contacts
</template>
</body>Solution
There were a few issues here:
- Your script source for angular-route was incorrect in the HTML portion.
- Your $routeProvider.when lines do not need '#', so I removed them.
- One of your templates used templateUrl, which was not correct. It should only be template: as you are not calling a URL.
Here is a working plunker: https://plnkr.co/edit/GSoJ4sAxM8joH6zmrxjf?p=preview
var app = angular.module('demo', ['ngRoute'])
// URLs should not have # in them
.config(function ($routeProvider) {
$routeProvider.when('/about', {
template: 'about.html',
controller: 'homeController'
});
$routeProvider.when('/contacts', {
template: 'contacts.html',
controller: 'contactsController'
});
});
app.controller('homeController', function ($scope) {
alert('homeController');
});
app.controller('contactsController', function ($scope) {
alert('contactsController');
});
Answered By - Brian
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.