4

我是 Angular 的新手。我有一个简单的角度应用程序，我尝试查看路由如何以角度工作。我有三个链接，我希望 Angular 为我更改 URL 并为同一单页应用程序中的每个链接显示正确的视图。这是我的代码：

索引.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>

控制器.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相关，浏览器问题，..）。]

谢谢，

4

2 回答 2

2

你的 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 )

于 2014-07-17T07:05:14.533 回答
0

您必须将 $route 包含在 $scope 旁边的 控制器中AgentApp.controller('createdPackagesController', function($scope, $route) ，并为每个控制器执行此操作，一切都会好起来的

于 2015-10-07T04:02:35.360 回答