I am doing a tutorial on Thinkster.io which involves coding a simple News app with Angular JS. My code works fine when I reference the controller(MainCtrl) through ng-controller = "MainCtrl" but the tutorial says that I should be able to do this within my config function. Here is my code. Thanks in advance
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: '/app/views/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}
]);
app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts) {
$scope.posts = posts.posts;
$scope.addPost = function() {
console.log("adding post");
if (!$scope.title || $scope.title === "") {
return;
}
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0
});
$scope.title = "";
$scope.link = "";
}
$scope.incrementVotes = function(post) {
post.upvotes += 1;
}
$scope.decrementVotes = function(post) {
post.upvotes -= 1;
}
}
]);<!DOCTYPE html>
<html>
<head>
<title>Flapper News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="../../public/css/style.css" rel="stylesheet" />
<script type="text/javascript" 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 type="text/javascript" src="../../app.js"></script>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-5 col-md-offset-3">
<ui-view></ui-view>
<div id="container">
<div id="posts" ng-repeat="post in posts | orderBy: '-upvotes'">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
<span id="up" class="glyphicon glyphicon-thumbs-up" ng-click="incrementVotes(post)"></span>
{{post.upvotes}}
<span class="glyphicon glyphicon-thumbs-down" ng-click="decrementVotes(post)"></span>
</div>
</div>
<div id="form">
<form id="form-items" ng-submit="addPost()">
<input type="text" placeholder="Title" ng-model="title"></input>
</br>
<input type="text" placeholder="Link" ng-model="link"></input>
</br>
<button class="btn btn-lg btn-primary" type="submit">Post</button>
</form>
</div>
</div>
</div>
<script type="text/ng-template" id="/app/views/home.html">
<div class="page-header">
<h1>People News</h1>
</div>
<!-- rest of template -->
</script>
</body>
</html>
