AngularJS Routing not loading view

Question

Total Angular newb here...

Just going through a Lynda course and I've got everything working until we get to routing. When all the app logic was in the controller things worked fine. But now for whatever reason my page loads completely blank now that I've added routing into the mix.

I've got an index.html file and I'm trying to pass in a view from list.html.

This is my folder structure so far.

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

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

        partials |
                 |-list.html

The JS and Partials folders are both within the Angular folder.

This is my code so far...

Index

<!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>

List

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

Controllers

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'
    });
}]);

Nathan Barreto · Accepted Answer · 2017-09-29 14:11:53Z

0

Try using $stateProvider

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

    $stateProvider

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

The error is in your recentBands controller. Change the first line for

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

There is no need of [] if you don't use any injections. It was just the name of the module, it has to be the same as the general controller.

edited Sep 29, 2017 at 14:11

answered Sep 29, 2017 at 13:52

Nathan Barreto

3752 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user4759415 Over a year ago

Thanks for the response, gave it a go and now at least my over arching div is loading but its still completely empty of content.

Nathan Barreto Over a year ago

@HisPowerLevelIsOver9000 try changing the ng-view tag on the index.html for <div ui-view></div>

Nathan Barreto Over a year ago

If you check the chrome console, does it show any error ?

user4759415 Over a year ago

Nope the console is completely empty of errors...which is the most annoying part. If there was an error at least I'd know where to start debugging

user4759415 Over a year ago

I got it - no idea what was wrong but i copied the source files from the lesson and it worked. It might have been a typo or something along the way. Thanks for your help and trying to solve it with me!

Collectives™ on Stack Overflow

AngularJS Routing not loading view

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related