ng-view nicht zu zeigen etwas in meinem angularJS app

Ich bin neu in Eckig. Ich habe eine einfache Winkel-app, und ich versuche, um zu sehen, wie das routing funktioniert in eckig. Ich habe drei links, die ich will Winkel die änderung der URL für mich und zeigen Sie die richtige Ansicht für jeden link, der in der gleichen single-page-Anwendung.
Das ist mein 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.';
    });

Die app zeigt nicht alles für ng-view. Was sollte ich ändern?
Ich folgte viele Beispiele, die online sind, aber nicht wissen, was mir fehlt.
[Ich habe gesehen, dass viele ähnliche Fragen hier, aber Sie hatte Ihre eigenen spezifischen problem (jquery Verwandte, browser-problem, ..).]

Dank,

  • hinzufügen Sie können jsfiddle oder plunker mit Ihrem code?
  • angular.module('AgentApp', [ngRoute]); sollte angular.module('AgentApp', ['ngRoute']); gibt es keine Fehler in der Konsole? Es sollte eins sein.
  • wo das controller-Skript-Dateien...
  • Sie hat nicht in index.html Datei
  • Danke für den Hinweis, aber funktioniert immer noch nicht. Zwar sehe ich ein weiteres problem jetzt. Eine andere app habe ich, die ist sehr ähnlich wie diese, öffnet sich in firefox, aber nicht korrekt angezeigt, in chrome(ohne ng-view Teil). So, jetzt denke ich, vielleicht ist es ein browser-Problem?!
  • Ich habe die "include" in meine original-index-Datei, die ich versehentlich nicht sagen, wenn ich klebte es hier. problem besteht immer noch obwohl.
  • Sie haben <script src="js/controllers.js"></script> vor, einschließlich eckig
  • ja! nicht zu beachten. Vielen Dank, aber ich habe immer noch das chrome-problem, Es zeigt nur korrekt in firefox!!!
  • Die createdPackagesController zweimal verwendet wird, mit ng-controller bei div.container und anderen über ng-view und $routeProvider. Bitte versuchen Sie, die ng-controller ersten.
  • kein Glück, auch ohne ng-controller

InformationsquelleAutor BizMoto | 2014-07-17
  1. 2

    Ihre controller.js muss aufgerufen werden, nachdem eckigen

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

    haben, und Sie haben zu erklären, das ngRoute wie diese

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

    Hier ist ein [plunker] (http://plnkr.co/edit/PBC3MWGbuHHn3IwH2cXw?p=preview)

    • danke für die Antwort. Ich glaube, ich habe um ein anderes Problem bezüglich der browser. Wie gesagt, firefox funktioniert, aber chrome nicht zeigen, alles für ng-view. [btw, die plunker-link funktioniert nicht!]
    • Plunker - plnkr.co - scheint leider nicht verfügbar zu sein jetzt. Das ist, warum der link nicht funktioniert.
    • Sie sollten es jetzt versuchen. Es funktioniert wieder - und es sieht OK für mich in Chrom.
    InformationsquelleAutor Edminsson
  2. 0

    müssen Sie include $route in den controller neben $scope
    AgentApp.controller('createdPackagesController', function($scope, $route)
    und tun Sie dies für jede controller und alles wird gut

    InformationsquelleAutor folken
Schreibe einen Kommentar