I recently started the tutorial AngularJS Tutorial: Learn to Build Modern Web Apps with Angular and Rails by Thinkster, but encountered a problem.
After creating an inline template, I ended up with a blank page and an error message $injector:modulerr with the following details:
Failed to instantiate module flapperNews due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=...)
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:6:450
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:34:97
at Array.forEach (native)
at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:7:280)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:33:207)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:33:284
at Array.forEach (native)
at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:7:280)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:33:207
Here is the code that caused the issue:
Module:
# app.js
var app = angular.module('flapperNews', ['ui-router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
View:
# index.html
<!DOCTYPE html>
<html>
<head>
<title>Thinkster's AngularJS Tutorial</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="app.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in posts | orderBy: '-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click='incrementUpvotes(post)'></span>
- {{post.upvotes}} upvotes
<span style="font-size: 20px; margin-left: 10px;">
<a ng-href="post.link" ng-show='post.link'>{{post.title}}</a>
<span ng-hide="{{post.link}}">{{post.title}}</span>
</span>
</div>
<form ng-submit="addPost()" style="margin-top: 30px">
<h3>Add a new post</h3>
<div class="form-group">
<input type="text" placeholder="Title" class="form-control" ng-model="title">
</div>
<div class="form-group">
<input type="text" placeholder="Link" class="form-control" ng-model="link">
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
</body>
</html>