BizMoto BizMoto - 3 months ago 13
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:

index.html

<!DOCTYPE html>
<html>
<head>
<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">

</head>

<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>
</ul>

</div>

<div ng-view></div>

</div>

<script src="js/controllers.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>

</body>
</html>


controllers.js

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, ..).]

Thanks,

Answer

Your controller.js has to be called after angular

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></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] (http://plnkr.co/edit/PBC3MWGbuHHn3IwH2cXw?p=preview)

Comments