2

私はAngularの初心者でプロジェクトに取り組んでいますが、2つの異なるページに情報を表示することに問題があります.

プロファイルを表示する閲覧ページがあります。また、閲覧ページのコンテンツとその他のさまざまな情報を表示するホームページもあります。そのために、コンポーネント（browsePage）を作成し、コンポーネントをhome.view.htmlに追加しました

<browse-page></browse-page>

しかし、プロファイルは表示されません。
ここに画像の説明を入力

私の閲覧ページでは、プロファイルが表示されます。 ここに画像の説明を入力

私のコード:

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

ブラウズ.コンポーネント.js

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

ブラウズ.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);
    });
}



閲覧.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>

index.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>

コンソールにエラーは表示されません。GET エラーは無視してかまいません。 ここに画像の説明を入力

問題を解決するにはどうすればよいですか? 私は考え始めています 高度に感謝します。

4

1 に答える 1