I'm following a tutorial on Thinkster to learn Angular and MEAN Stack, however I for some reason can't get my template to load inline with my loaded HTML. Can someone point out where I'm going wrong here? The code isn't coloring correctly, and the page doesn't render anything when loaded in a browser.
What am I not understanding about this? The template tags seem to not be matching?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flapper News</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.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>
<style>.glyphicon-thumbs-up {cursor:pointer}</style>
</head>
<body ng-app="flapperNews"><!--ng-controller="MainCtrl" style="margin-left:20px; margin-right:20px;"-->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<!-- Start template -->
<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}}
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.title}}">
{{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"
class="form-control"
placeholder="Title"
ng-model="title"></input>
</div>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Link"
ng-model="link"></input>
</div>
<button type='submit' class="btn btn-primary">Post</button>
</form>
</script>
<!-- end template -->
<!-- start template -->
<script type="text/ng-template" id="/posts.html">
<div class="page-header">
<h3>
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</h3>
</div>
<div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(comment)"></span>
{{comment.upvotes}} - by {{comment.author}}
<span style="font-size:20px; margin-left:10px;">
{{comment.body}}
</span>
</div>
</script>
<!-- end template -->
</body>
</html>
I'm getting this error:
Error: $injector:modulerr
Module Error
Here's my app.js
/*global angular*/
var app = angular.module('flapperNews', []);
angular.module('flapperNews', ['ui.router']);
app.factory('posts',[function(){
var o = {
posts: []
};
return o;
}]);
app.config([ '$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
app.controller('MainCtrl', ['$scope','posts', function($scope, posts) {
$scope.posts = posts.posts;
$scope.posts = [
{title: 'post 1', upvotes: 12},
{title: 'post 2', upvotes: 14},
{title: 'post 3', upvotes: 16},
{title: 'post 4', upvotes: 11},
{title: 'post 5', upvotes: 1}
];
$scope.addPost = function(){
if (!$scope.title || $scope.title === '') {return;}
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0,
comments: [
{author: 'Joe', body: 'Cool post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
]
});
$scope.title = '';
$scope.link = '';
}
$scope.incrementUpvotes = function(post){
post.upvotes += 1;
}
}]);
app.controller('PostsCtrl', [ '$scope', '$stateParams', 'posts',
function($scope, $stateParams, posts){
$scope.post = posts.posts[$stateParams.id];
}]);
Check your angular-ui-router.js library address it's cloudfare not cloudflare.
Remove the unnecessary ; from the home state
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
and remove the line angular.module('flapperNews', ['ui.router']);
add the ui.router to the first line var app = angular.module('flapperNews', ['ui.router']);
To working JS:
var app = angular.module('flapperNews', ["ui.router"]);
app.factory('posts',[function(){
var o = {
posts: []
};
return o;
}]);
app.config([ '$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
})
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
app.controller('MainCtrl', ['$scope','posts', function($scope, posts) {
$scope.posts = posts.posts;
$scope.posts = [
{title: 'post 1', upvotes: 12},
{title: 'post 2', upvotes: 14},
{title: 'post 3', upvotes: 16},
{title: 'post 4', upvotes: 11},
{title: 'post 5', upvotes: 1}
];
$scope.addPost = function(){
if (!$scope.title || $scope.title === '') {return;}
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0,
comments: [
{author: 'Joe', body: 'Cool post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
]
});
$scope.title = '';
$scope.link = '';
}
$scope.incrementUpvotes = function(post){
post.upvotes += 1;
}
}]);
app.controller('PostsCtrl', [ '$scope', '$stateParams', 'posts',
function($scope, $stateParams, posts){
$scope.post = posts.posts[$stateParams.id];
}]);
HTML: