Question

今天开始玩角。所以完全没有问题。我发现了很多类似的问题，但似乎没有任何帮助，所以我决定尝试自己的问题。

我的问题在于路由。我有两个观点（或部分）。当我浏览到我的页面时，我的第一个视图（默认）加载得很好。当单击应该打开我的第二个视图的链接时，URL会发生变化，但没有任何反应。如果我按下浏览器刷新按钮，视图就会加载。

索引页

    <!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>  
    <script src="js/angular_route.js"></script>  
    <script src="js/angular_animate.js"></script>
    <script src="js/angular_cookies.js"></script>
    <script src="js/app.js"></script>
    </head>
<body style="padding:10px;" ng-app="rispa">
    <div ng-view></div>
</body>
</html>

app.js

var rispa = angular.module("rispa", ['ngRoute', 'ngAnimate']);
rispa.config(function ($routeProvider) {
    $routeProvider
        .when('/welcome', 
            {
                controller: 'rispaController', 
                templateUrl: 'partials/welcome.html' 
            })
        .when('/accounts', 
            {
                controller: 'rispaController', 
                templateUrl: 'partials/accounts.html' 
            })
        .otherwise({ redirectTo: '/welcome' })
});
rispa.controller('rispaController', function($scope) {
    $scope.title = "Home Page";
});

欢迎观点（默认）

<div class="container">
   <h1>Welcome!!!</h1>
    <a href="#/accounts">get accounts</a>
</div>

帐户视图

<div class="container">
    <h1>accounts</h1>
    <a href="#/welcome">back to welcome</a>
</div>

我在运行应用程序的Windows 10上安装了WAMP服务器。我也尝试发布到azure webapp但是视图也没有在那里刷新。我不得不点击浏览器刷新按钮，因此它不应该是Web服务器问题......

Answer 1

Working Plunker：http://plnkr.co/edit/aCpOumYzy94ATMXiA5KR?p=preview

路由已正确设置，但您没有为视图添加对控制器的引用。此外，您还需要主视图中ngAnimate的依赖项文件。

<div data-ng-view="" data-ng-controller="rispaController" ></div>

AngularJS路由视图未加载

1 个答案: