AngularJS templates not loading/rendering

Question

So I'm trying to run an Angular app with a Rails API on Chrome.

I'm trying to render very simple views from their respective controllers.

My users.js controller:

'use strict';

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

rantlyApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/users', {
      templateUrl: '/views/users.html',
      controller: 'UsersCtrl'
    });
}])
.controller('UsersCtrl', ['$scope', '$http', function ($scope, $http) {
  $http.get('http://localhost:3000/api/users/').success(function(data) {
    $scope.users = data.users;
  });

  $scope.foos = ['foo', 'bar', 'baz'];
}]);

users.html view:

<div ng-controller='UsersCtrl'>
  <h1>Users</h1>

  <ul ng-repeat="user in users">
    <li>{{user.first_name}}</li>
  </ul>

  <ul ng-repeat="foo in foos">
    <li>{{foo}}</li>
  </ul>
</div>

The users page renders fine, and I get all the data I want. But when I try to load my main page, I get nothing. No errors, just a blank screen (though the navbar and everything else I have in my index.html loads properly).

My main.js controller:

'use strict';

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

rantlyApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/views/main.html',
      controller: 'MainCtrl'
    });
}])
.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.awesomeThings = [
    'foo',
    'bar',
    'baz'
  ];

  $scope.addThing = function() {
    $scope.awesomeThings.push($scope.newThing);
    $scope.newThing = '';
  };

}]);

main.html view:

<div ng-controller="MainCtrl">
  <form ng-submit='addThing()'>
    <div class="form-horizontal">
      <input type="text" ng-model="newThing">
      <input type="submit" value="Add Thing">
    </div>
  </form>
  <li ng-repeat='thing in awesomeThings'>
    {{thing}}
  </li>
  <h4>Awesome things: {{awesomeThings}}</h4>
  <h4>Cool things: {{coolThings}}</h4>
</div>

When I look at the inspector in the Network tab for the "/users" route, it loads users.html. This doesn't happen for the "/" route. I expect it to load main.html, but I get nothing.

The strange thing is, when I copy all of my code from my main.js and just throw it into my users.js, everything works fine. This told me maybe I wasn't loading it properly into the index.html page, but it seems to me that I am.

index.html: (scripts are at the bottom)

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="styles/main.css">
  </head>

  <body ng-app="rantlyApp">

    <header class='nav-header' role='navigation'>
      <div class='content'>
        <a class="navbar-brand" href="#/">Rantly</a>
        <nav>
          <a href="#/">Rants</a>
          <a href="#/users">Users</a>
          <a href="#/styleguide">Styleguide</a>
          <a href="#/signup">Sign Up</a>
        </nav>
      </div>
    </header>

    <div class="container">
      <div ng-view=""></div>
    </div>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
    <script>
    !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
      (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
      r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
    }(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-XXXXX-X');
    ga('send', 'pageview');
    </script>

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/services.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/controllers/users.js"></script>
    <script src="scripts/controllers/about.js"></script>

  </body>
</html>

I'm extremely new to Angular so it's quite possible I'm missing a fundamental step in setting up the controllers. Since my code works based purely off of which file I have it in, I have a feeling I'm not configuring something properly in Angular.

Any help is greatly appreciated. Thanks!

eladcon · Accepted Answer · 2015-03-18 19:01:28Z

1

When you write

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

You are creating a new module called rantlyApp and removing any old module with the same name. So when the users.js script runs it overwrites what you defined in main.js. Instead define your module once, and retrieve it with:

var rantlyApp = angular.module('rantlyApp');

Check the documentation.

answered Mar 18, 2015 at 19:01

eladcon

5,8251 gold badge18 silver badges19 bronze badges

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

1 Comment

Doug Over a year ago

Ah, yes. It hadn't occurred to me that I was creating new modules with new dependencies each time in my controllers. I had the angular module defined in my app.js initially with a long list of dependencies, and thought I was referencing that each time in each of my controllers. Thanks!

Collectives™ on Stack Overflow

AngularJS templates not loading/rendering

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related