/app.js Secret

## app.js
angular.module('flapperNews', ['ui.router'])
    .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');
    }])
    .factory('posts', [function(){
    	var o ={
            posts: []
    	};
    	return o;
    }])
    .controller('MainCtrl', [
        '$scope',
        'posts',
        function($scope, posts){
        	$scope.posts = posts.posts;
            //$scope.posts = [
            //    {title: 'post 1', upvotes: 5},
            //    {title: 'post 2', upvotes: 2},
            //    {title: 'post 3', upvotes: 15},
            //    {title: 'post 4', upvotes: 9},
            //    {title: 'post 5', upvotes: 4}];

            $scope.addPost = function(){

            	if(!$scope.title || $scope.title === ''){return;}
                $scope.posts.push({
                	title: $scope.title,
                	link: $scope.link,
                	upvotes: 0
                });
                $scope.title = '';
                $scope.link = '';
            };

            $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.incrementUpvotes = function(post){
                post.upvotes += 1;
            };
        }])
    .controller('PostsCtrl', [
        '$scope',
        '$stateParams',
        'posts',
        function($scope, $stateParams, posts){
        	$scope.post = posts.posts[$stateParams.id];

            $scope.addComment = function(){
              if($scope.body === ''){return;}
              $scope.post.comments.push({
                body: $scope.body,
                author: 'user',
                upvotes: 0
              });
            };

    }]);

## index.html
<html>
<head>
  <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.2.19/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">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <ui-view></ui-view>
      <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.link}}">
            {{post.title}}
          </a>
          <span ng-hide="post.link">
            {{post.title}}
          </span>
        </span>
        <span>
          <a href="#/posts/{{$index}}">Comments</a>
        </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>

    </div>
  </div>


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

  <!--Post-->
  <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>

    <form ng-submit="addComment()"
      style="margin-top:30px;">
      <h3>Add a new comment</h3>

      <div class="form-group">
        <input type="text"
          class="form-control"
          placeholder="Comment"
          ng-model="body">
        </input>
      </div>
      <button type="submit" class="btn btn-primary">Post</button>

    </form>
  </script>


</body>


</html>
	angular.module('flapperNews', ['ui.router'])
	.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');
	}])
	.factory('posts', [function(){
	var o ={
	posts: []
	};
	return o;
	}])
	.controller('MainCtrl', [
	'$scope',
	'posts',
	function($scope, posts){
	$scope.posts = posts.posts;
	//$scope.posts = [
	// {title: 'post 1', upvotes: 5},
	// {title: 'post 2', upvotes: 2},
	// {title: 'post 3', upvotes: 15},
	// {title: 'post 4', upvotes: 9},
	// {title: 'post 5', upvotes: 4}];

	$scope.addPost = function(){

	if(!$scope.title \|\| $scope.title === ''){return;}
	$scope.posts.push({
	title: $scope.title,
	link: $scope.link,
	upvotes: 0
	});
	$scope.title = '';
	$scope.link = '';
	};

	$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.incrementUpvotes = function(post){
	post.upvotes += 1;
	};
	}])
	.controller('PostsCtrl', [
	'$scope',
	'$stateParams',
	'posts',
	function($scope, $stateParams, posts){
	$scope.post = posts.posts[$stateParams.id];

	$scope.addComment = function(){
	if($scope.body === ''){return;}
	$scope.post.comments.push({
	body: $scope.body,
	author: 'user',
	upvotes: 0
	});
	};

	}]);
	<html>
	<head>
	<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.2.19/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">
	<div class="row">
	<div class="col-md-6 col-md-offset-3">
	<ui-view></ui-view>
	<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.link}}">
	{{post.title}}
	</a>
	<span ng-hide="post.link">
	{{post.title}}
	</span>
	</span>
	<span>
	<a href="#/posts/{{$index}}">Comments</a>
	</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>

	</div>
	</div>


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

	<!--Post-->
	<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>

	<form ng-submit="addComment()"
	style="margin-top:30px;">
	<h3>Add a new comment</h3>

	<div class="form-group">
	<input type="text"
	class="form-control"
	placeholder="Comment"
	ng-model="body">
	</input>
	</div>
	<button type="submit" class="btn btn-primary">Post</button>

	</form>
	</script>


	</body>


	</html>