4

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,

BizMoto
  • 147
  • 3
  • 7
  • 14
  • can you add jsfiddle or plunker with your code? – Liad Livnat Jul 17 '14 at 06:13
  • 1
    `angular.module('AgentApp', [ngRoute]);` should be `angular.module('AgentApp', ['ngRoute']);` Is there no errors in the console? There should be one. – ivarni Jul 17 '14 at 06:14
  • where the controller script files... – parthicool05 Jul 17 '14 at 06:19
  • You didn't include it in index.html file – parthicool05 Jul 17 '14 at 06:19
  • Thanks for pointing that out, but still doesn't work. Although I see another problem now. Another app I have, which is very similar to this one, opens in firefox but doesn't open correctly in chrome(without ng-view part). So now I think maybe it's a browser issue?! – BizMoto Jul 17 '14 at 06:21
  • I have the 'include' in my original index file, I mistakenly didn't put it when I pasted it here. problem still exists though. – BizMoto Jul 17 '14 at 06:29
  • You've included before including angular – major-mann Jul 17 '14 at 06:30
  • yes! didn't pay attention to that. Thanks but I still have the chrome problem, It only shows correctly in firefox! – BizMoto Jul 17 '14 at 06:35
  • The `createdPackagesController` is used twice, one with `ng-controller `at `div.container` and another via ng-view and $routeProvider. Please try removing the `ng-controller` first. – runTarm Jul 17 '14 at 06:39
  • no luck, even without ng-controller – BizMoto Jul 17 '14 at 07:47

2 Answers2

2

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)

Edminsson
  • 2,426
  • 20
  • 25
  • thanks for the answer. I think I have to open another issue regarding the browser. As I said, firefox works, but chrome doesn't show anything for ng-view. [btw, the plunker link doesn't work!] – BizMoto Jul 17 '14 at 07:48
  • Plunker - http://plnkr.co/ - seems unfortunately to be unavailable right now. Thats why the link doesnt work. – Edminsson Jul 17 '14 at 09:09
  • You should try it now. It's working again - and it looks OK for me in Chrome. – Edminsson Jul 17 '14 at 10:11
0

you have to include $route into your controller next to $scope AgentApp.controller('createdPackagesController', function($scope, $route) and do so for evey controller and everything will be fine

folken
  • 1