index.html
```
<!DOCTYPE html> <head> <title>Suggestion Box</title> <meta charset="utf-8">
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js";
type="text/javascript"></script> <meta name="viewport"
content="width=device-width, initial-scale=1"> <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css";
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous"> <!--<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css";
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous">--> <link
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css";
rel="stylesheet"> </head> <body ng-app="SuggestionBox"
ng-controller="HomeController"> <div class="container"> <div ng-view></div>
</div> <!--Modules--> <script type="text/javascript"
src="js/app.js"></script> <!--Controllers--> <script type="text/javascript"
src="js/controllers/HomeController.js"></script> <script
type="text/javascript"
src="js/controllers/SuggestionController.js"></script> <!--Services-->
<script type= "text/javascript" src="js/services/suggestions.js"></script>
</body> </html>
```
HomeController.js
```
app.controller("HomeController", ["$scope", "suggestions", function($scope,
suggestions){ $scope.posts = suggestions.posts; $scope.addSuggestion =
function(){ if(!$scope.title || $scope.title === ""){ return; }
$scope.posts.push({ title: $scope.title, upvotes: 0, comments: [], //id:
$scope.posts.length }); $scope.title = ""; }; $scope.upVote =
function(post){ post.upvotes += 1; }; }]);
```
app.js
```
var app = angular.module("SuggestionBox", ["ngRoute"]); app.config(function
($routeProvider){ $routeProvider .when('/home', { controller:
"HomeController", templateUrl: "views/home.html" })
.when('/suggestion/:id', { controller: "SuggestionController", templateUrl:
"views/suggestion.html" }) .otherwise({ redirectTo: "/home" }) })
```
SuggestionController.js
```
app.controller("SuggestionController", ["$scope", "$routeParams",
"suggestions", function($scope, $routeParams, suggestions){ $scope.post =
suggestions.posts[$routeParams.id]; $scope.addComment = function(){
if(!$scope.comment || $scope.comment === ""){ return; }
$scope.comments.push({ body: $scope.comment, upvotes: 0 }); $scope.comment
= ""; }//addComment() $scope.upVote = function(comment){ comment.upvotes +=
1; }; }]);
```
suggestion.html
```
<div class="main"> <div class="container"> <div ng-repeat="comment in
comments | orderBy: '-upvotes'"> <h1>{{comment.body}}</h1> <p><span
class="glyphicon glyphicon-plus-sign" ng-click="upVote(comment,
$index)"></span> Upvotes: {{comment.upvotes}}</p> </div> <form
ng-submit="addComment()" style="margin-top: 50px"> <h3> Submit Your Comment
</h3> <div class="form-group"> <input type="text" class="form-control"
placeholder="Write a comment" ng-model="comment"></input> </div> <button
type="submit" class="btn btn-primary">Comment here</button> </form> </div>
</div>
```
home.html
```
<div class="main"> <div class="container"> <div ng-repeat="post in posts |
orderBy: '-upvotes'"> <h1>{{post.title}}</h1> <p><span class="glyphicon
glyphicon-plus-sign" ng-click="upVote(post)"></span> Upvotes:
{{post.upvotes}}</p> <a href="#/suggestion/{{$index}}">Comments</a> </div>
<form ng-submit="addSuggestion()" style="margin-top: 50px"> <h3> Submit
Your Suggestion </h3> <div class="form-group"> <input type="text"
class="form-control" placeholder="Great ideas here"
ng-model="title"></input> </div> <button type="submit" class="btn
btn-primary">Suggest</button> </form> </div> </div>
```
suggestions,js
```
app.factory('suggestions', [function(){ var demoSuggestions = { posts: [ {
title: 'Free pizza at club meetings', upvotes: 15, comments: [], }, {
title: 'End all club emails with Laffy Taffy jokes', upvotes: 9, comments:
[], }, { title: 'Retrofit water fountain with Gatorade', upvotes: 7,
comments: [], }, { title: 'Sing Bon Jovi\'s "Living on a Prayer" halfway
through meetings,', upvotes: 3, comments: [], }, ] }; return
demoSuggestions; }]);
```
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
