BizMoto BizMoto - 1 year ago 80
AngularJS Question

ng-view doesn't show anything in my angularJS app

I'm new in Angular. I have a simple angular app and I try to see how routing works in angular. I have three links which I want angular to change the URL for me and show the right view for each link in the same single page application.
This is my code:


<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Agent Portal</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/justified-nav.css" rel="stylesheet">


<body ng-app="AgentApp">

<div class="container" ng-controller="createdPackagesController">

<div class="masthead">
<h3 class="text-muted">Project name</h3>

<ul class="nav nav-justified">
<li ><a href="#/createdPackages">Created Packages</a></li>
<li ><a href="#/reservedPackages">Reserved Packages</a></li>
<li ><a href="#/publishedPackages">Published Packages</a></li>


<div ng-view></div>


<script src="js/controllers.js"></script>
<script src=""></script>
<script src=""></script>



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

AgentApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
controller: 'createdPackagesController',
templateUrl: 'views/createdpackages.html'

.when("/reservedPackages", {
controller: "reservedPackagesController",
templateUrl: "views/reservedpackages.html"

.when("/publishedPackages", {
controller: "publishedPackagesController",
templateUrl: "views/publishedpackages.html"
}).otherwise({ redirectTo: '/'});

// create the controller and inject Angular's $scope
AgentApp.controller('createdPackagesController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';

AgentApp.controller('reservedPackagesController', function($scope) {
$scope.message = 'Look! I am an about page.';

AgentApp.controller('publishedPackagesController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';

The app doesn't show anything for ng-view. What should I change?
I followed many examples that are online, but don't know what I'm missing.
[I have seen many similar questions here, but they had their own specific problem (jquery related, browser problem, ..).]


Answer Source

Your controller.js has to be called after angular

<script src=""></script>
<script src=""></script>
<script src="controller.js"></script>

and you have to declare the ngRoute like this

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

Here is a [plunker] (

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