HoosierCoder HoosierCoder - 11 months ago 54
AngularJS Question

Angular.js basic routing

I have been following the tutorial:


I have not done any rails integration yet, the question is specifically to angular.

When I do the hello worlds from the MainCtrl without using the router, everything works. When I use the router, I cannot get the inline angular template to display in my html page. Where is the error here?


angular.module('flapperNews', ['ui.router'])
function($stateProvider, $urlRouterProvider) {

.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'


angular.module('flapperNews', [])
.controller('MainCtrl', [
$scope.test = 'Hello world';



<title>My Angular App</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>

<body ng-app="flapperNews">

<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view> <!-- this is supposed to display the template below but it shows nothing -->

<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>


Answer Source

Your controller is recreating the module instead of referencing it. Change it like so:

.controller('MainCtrl', [
  $scope.test = 'Hello world';