2

私はAngularの初心者でプロジェクトに取り組んでいますが、2つの異なるページに情報を表示する際に問題があります。AngularJS:ページコンテンツをホームページに表示しない

プロファイルを表示するブラウズページがあります ブラウズページの内容とその他の情報を表示したいホームページもあります。私はコンポーネント(browsePage) を作成したことを行うには それから私はhome.view.html

<browse-page></browse-page> 

にコンポーネントを追加しましたが、プロファイルは表示されません。
enter image description here

私のブラウズページにプロファイルが表示されます。 enter image description here

マイコード:

app.config.js

$routeProvider 
     .when('/home', { 
      RouteData: { 
       bodyStyle: { 
        //'background': 'url(../images/bg-7.jpg)repeat' 
        'background-color': 'white' 
       } 
      }, 
      controller: 'HomeController', 
      templateUrl: 'home/home.view.html', 
      controllerAs: 'vm' 
     }) 
     .when('/browse', { 
      RouteData: { 
       bodyStyle: { 
        //'background': 'url(../images/bg-10.jpg)repeat' 
        'background-color': 'white' 
       } 
      }, 
      controller: 'BrowseController', 
      templateUrl: 'browse/browse.view.html', 
      controllerAs: 'vm' 
     }) 

home.controller.js

angular.module("mango").controller("HomeController", HomeController); 

function HomeController() { 

} 



angular.module('mango').controller('ExampleController', ['$cookies', function($cookies) { 


}]); 

home.view.html

This is the home page<br> 
Miscellaneous info goes here 


<browse-page></browse-page> 


Miscellaneous info goes here<br> 
end of home page 

ブラウズ。 component.jsindex.htmlを

<!doctype html> 
<html lang="en" ng-app="mango"> 
<head> 
<meta charset="utf-8"> 
<title>Mango</title> 
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 
<link rel="stylesheet" href="css/style.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

<script src="bower_components/angular/angular.js"></script> 
<script src="bower_components/angular-route/angular-route.js"></script> 
<script src="bower_components/angular-resource/angular-resource.js"></script> 
<script src="bower_components/angular-cookies/angular-cookies.js"></script> 

<script src="app.config.js"></script> 
<script src="login/route-data.js"></script> 
<script src="navigation_menu/navigation_menu.config.js"></script> 

<script src="browse/browse.controller.js"></script> 
<script src="browse/browse.component.js"></script> 


<script src="home/home.controller.js"></script> 
<script src="profile/profile.controller.js"></script> 
<script src="settings/settings.controller.js"></script> 


<script src="login/login.controller.js"></script> 
<script src="login/app-services/authentication.service.js"></script> 
<script src="login/app-services/flash.service.js"></script> 
<script src="login/app-services/user.service.local-storage.js"></script> 


</head> 
<body ng-style="RouteData.get('bodyStyle')" ng-cloak> 
<navigationmenu ng-if="location.path() !== '/login'"></navigationmenu> 
<ng-view autoscroll></ng-view> 

</body> 
</html> 
console.log("In browse.component.js"); 
angular.module("mango").component("browsePage",{ 
     templateUrl:"browse/browse.view.html", 
     controller:BrowseController 
}); 

browse.controller.js

angular.module("mango").controller("BrowseController", BrowseController); 
BrowseController.$inject = ["$rootScope","$location","AuthenticationService","$http"]; 

function BrowseController($rootScope, $location, AuthenticationService, $http){ 
    var vm = this; 
    $http.get('browse_profiles.json').success(function(data){ 
     vm.data = data; 
     console.log("data==>"); 
     console.log(data); 
    }); 
} 



browse.view.html

<br><br> 
<!-- Page Content --> 
<div class="container"> 

    <!-- Jumbotron Header --> 
    <header class="jumbotron hero-spacer" > 

     <form ng-submit="submit()" ng-controller="ExampleController"> 
      Enter text and hit enter: 
      <input type="text" ng-model="text" name="text" /> 
      <input type="submit" id="submit" value="Submit" /> 

      </form> 

    </header> 

    <hr> 


    <!-- Page Features --> 
    <div class="row text-center"> 

    <img id="mySpinner" src="/images/loader.gif" ng-show="loading" /> 
     {{alpine}} 
     <div class="col-md-3 col-sm-6 hero-feature" ng-repeat="profile in vm.data"> 

      <div class="thumbnail"> 
       <img src="{{profile.thumbnail}}" alt=""> 
       <div class="caption"> 

        <div class="username-status"> 
        <span class="username pull-left"><a ng-href="#/profile/{{profile.username}}">{{profile.username}}</a></span> 
        <p ng-class-odd="'circle odd'" ng-class-even="'circle even'"></p> 
        </div> 
       </div> 

      </div> 
     </div> 


    </div> 
    <!-- /.row --> 

    <hr> 

    <!-- Footer --> 
    <footer> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <p>Copyright &copy; Your Website 2014</p> 
      </div> 
     </div> 
    </footer> 

</div> 

End of browse view. 
<br><br> 

コンソールにエラーが表示されません.GETエラーは無視できます。 enter image description here

問題を解決するには何が必要ですか? 私は考え始めている ありがとうございました。

私はあなたが後藤 /ブラウズ、あなたの browseView.htmlはVM としてコントローラのインスタンスを取得しているときが、browseView.htmlがロードされたとき、あなたのコンポーネントには、あなたは、controllerAsを指定していないと思います
+0

コードの画像ではなく、簡単に読み取って回答にコピーできる実際のコードを投稿してください。 – charlietfl

+0

@charlietfl done。 – altoids

+0

作業中のブラウズHTMLとフォルダ構造を追加できますか? – batmaniac7

答えて

1

のコンポーネントを介してコントローラインスタンスが取得されていません。コントローラインスタンスは、実行されたようにインスタンス化されていません。routeProviderです。

ホープ、この問題を解決し、やって

angular.module("mango").component("browsePage",{ 
    templateUrl:"browse/browse.view.html", 
    controller:BrowseController, 
    controllerAs: 'vm' 
}); 

を試してみてください。

+0

ありがとう、1週間以上これで苦労しました! – altoids

関連する問題