Question

我是Angular的新人。我有一个简单的角应用程序，我试着看看路由如何工作角度。我有三个链接，我想要更改我的URL，并在同一单页面应用程序中显示每个链接的正确视图。这是我的代码：

的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.';
    });

该应用不会显示任何针对ng-view的内容。我应该改变什么？我跟踪了很多在线的例子，但不知道我错过了什么。 [我在这里看到了很多类似的问题，但是他们有自己的具体问题（jquery相关，浏览器问题，......）。]

谢谢，

Answer 1

你的controller.js必须在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>

你必须像这样声明ngRoute

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

这是[plunker]（http://plnkr.co/edit/PBC3MWGbuHHn3IwH2cXw?p=preview）

Answer 2

你必须将$ route包含在$ scope旁边的控制器中 AgentApp.controller('createdPackagesController', function($scope, $route) 并为evey控制器这样做，一切都会很好

ng-view在我的angularJS应用程序中没有显示任何内容

2 个答案: