AngularJS Routing not loadingビュー

合計角の新しいここに...AngularJS Routing not loadingビュー

ちょうど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'; 
    }); 
}]);

のApp

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

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

出典

2017-09-29 HisPowerLevelIsOver9000

エラーがrecentBandsコントローラである$ stateProvider

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

    $stateProvider 

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

を使用してみてください。最初の行を

に変更する

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

注入をしない場合は[]は必要ありません。それはモジュールの名前にすぎず、一般的なコントローラと同じでなければなりません。

出典

2017-09-29 13:52:50

回答をいただきありがとうございました。少なくとも、私の上にある私の上書きのdivはロードされていますが、内容はまだ完全に空です。 – HisPowerLevelIsOver9000

@ HisPowerLevelIsOver9000 index.htmlのng-viewタグを

の –

に変更しようとしても残念ですが、残念ながら – HisPowerLevelIsOver9000

AngularJS Routing not loadingビュー

答えて

関連する問題