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

Question 1

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

angularjs controller ng-view

BizMoto · Jul 17, 2014 · Viewed 8k times · Source

Answer

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)

Question 2

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,

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

Answer

Related questions