javascriptangularjsangular-controllerangular-component-router

AngularJS: Browse page content not being displayed in Homepage

I'm a newbie to Angular and working on a project but I'm having an issue with displaying info in two different pages.

I have a "browse" page that displays profiles. I also have a homepage where I want to display the contents of the browse page plus other miscellaneous information. To do that I created a component (browsePage). Then I added the component to the home.view.html.

<browse-page></browse-page>

But the profiles don't show up.

enter image description here

In my browse page the profiles do show up.

enter image description here

My code:

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

browse.component.js

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>

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>

I'm not getting any errors in the console. You can ignore the GET error.

enter image description here

What do I need to do to fix my problem?

Solution

  • I think in your component, you haven't specified controllerAs, when you goto /browse, your browseView.html is getting the controller instance as vm, but when browseView.html is loaded through component,it is not getting the controller instance, as it is not getting instantiated like it is done, in routeProvider.

    Try doing,

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

    Hope, this solves the issue.