Question

此处有一个角色newb ...

刚刚通过一个Lynda课程，我已经完成了所有工作，直到我们开始路由。当所有应用程序逻辑都在控制器中时，一切正常。但是现在无论出于什么原因，我的页面加载完全空白，因为我已将路由添加到混合中。

我有一个index.html文件，我正试图从list.html传入一个视图。

到目前为止，这是我的文件夹结构。

Angular |
        |-angular.js
        |-angular-route.min.js
        |-index.html

        js |
           |-app.js
           |-controllers.js
           |-data.json

        partials |
                 |-list.html

JS和Partials文件夹都在Angular文件夹中。

到目前为止，这是我的代码......

索引

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Angular/Bootstrap Tests</title>  
    <link rel="stylesheet" href="bootstrap4/css/bootstrap.css">
    <link rel="stylesheet" href="css/bands.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="bootstrap4/js/bootstrap.js"></script>
    <script src="angular.js"></script>
    <script src="angular-route.min.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/app.js"></script>
</head>
<body>
    <!-- Recent Listens Section -->
    <div id="recent-listens-wrapper" ng-view>       
    </div>
    <!-- End of Recent Listens Section -->

</body>
</html>

列表

<div class="container">
        <div class="row">
                <div class="col-sm-12" id="search">
                    <h2>Band Directory</h2>                 
                    <input class="search-bar" ng-model="query" placeholder="Search for bands" type="text" autofocus>
                    <label class="search-labels">Sort By:
                        <select ng-model="bandSort">
                            <option value="name" selected="selected">Name</option>
                            <option value="genre">Genre</option>
                            <option value="year">Year</option>
                        </select>
                    </label>                    
                    <label class="search-labels">
                        Ascending:
                        <input type="radio" ng-model="direction" name="direction" checked>
                    </label>
                    <label class="search-labels">
                        Descending:
                        <input type="radio" ng-model="direction" name="direction" value="reverse">
                    </label>
                </div>
                <div class="col-sm-12">
                    <h1 class="recent-listens">Recent Listens</h1>
                </div>
                <div class="col-md-2" ng-repeat="item in bands | filter:query | orderBy:bandSort:direction">
                    <div class="album-preview">
                        <img class="img-responsive" ng-src="images/bands/{{item.shortname}}_tn.jpg" alt="Photo of {{item.shortname}}"/>
                        <h3>{{item.album}}</h3>
                        <p>{{item.name}}</p>                        
                    </div>
                </div>              
        </div>
    </div>

控制器

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

bandControllers.controller('RecentBands', ['$scope','$http', function RecentBands($scope, $http) {
    $http.get('js/data1.json').then(function(bands) {   
        $scope.bands =  bands.data;
        $scope.bandSort = 'name';
    });
}]);

应用

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

myApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/list', {
        templateUrl: 'partials/list.html',  
        controller: 'RecentBands'   
    }).
    otherwise({
        redriectTo:'/list'
    });
}]);

Answer 1

尝试使用$ stateProvider

myApp.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/list");

    $stateProvider

    .state('list', {
        url: "/list",
        templateUrl: 'partials/list.html',
        controller:"RecentBands"
    })
});

错误发生在您的recentBands控制器中。改变

的第一行

var app = angular.module('myApp');

如果您不使用任何注射，则无需[]。它只是模块的名称，它必须与通用控制器相同。

AngularJS路由未加载视图

1 个答案: