I would like to ask some help. I was doing this tutorial and by the end of the Angular part my <h1> tag does not appear. I get everything right and working except the title. Can you help me figure it out?
<html>
<head>
<meta charset="UTF-8">
<title>My Angular App!</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">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ul-view></ul-view>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
</script>
<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="font-size:20px; margin-left:10px;"></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">
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
<div ng-repeat ="post in posts | orderBy: '-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="upvote(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>
Comments
</span>
</span>
</div>
<form ng-submit="addPost()" style="margin-top:30px;">
<h3>Add new post</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title" ng-model="title">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Link" ng-model="link">
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</div>
</div>
</body>
</html>
This is how my app.js file looks like:
var app = angular.module('flapperNews', ['ui.router']);
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.factory('posts', [function(){
//service body
var o = {
posts: []
};
return o;
}]);
app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
$scope.test = 'Hello World';
$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,
comments: [
{author: 'Joe', body: 'Cool post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
]
});
$scope.title = '';
$scope.link = '';
};
/* The function that increments upvotes */
$scope.incrementUpvotes = function(post) {
post.upvotes += 1;
};
}]);
app.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
});
$scope.body = '';
};
}
]);
I think <ul-view></ul-view> is the mistake. It is supposed to be
<ui-view></ui-view>
Related
Here is my code:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body ng-controller="HomeController">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-apple" style="color: #5bdb46">
</span>
Grocery List
</a>
</div>
</div>
</nav>
<div class="container" ng-view>
</div>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js
var app = angular.module('groceryListApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/groceryList.html",
controller: "HomeController"
})
.when("/addItem",{
templateUrl: "views/addItem.html",
controller: "GroceryListItemController"
})
.when("/addItem/edit/:id",{
templateUrl: "views/addItem.html",
controller: "GroceryListItemController"
})
.otherwise({
redirectTo: "/"
})
});
app.service("GroceryService",function(){
var groceryService = {};
groceryService.groceryItems = [
{
id:1,
completed: true,
itemName: 'milk',
date: '2017-10-01'
},
{
id:2,
completed: true,
itemName: 'cookies',
date: '2017-10-02'
},
{
id:3,
completed: true,
itemName: 'ice cream',
date: '2017-10-03'
},
{
id:4,
completed: true,
itemName: 'potatoes',
date: '2017-10-04'
},
{
id:5,
completed: true,
itemName: 'cereal',
date: '2017-10-05'
},
{
id:6,
completed: true,
itemName: 'bread',
date: '2017-10-06'
},
{
id:7,
completed: true,
itemName: 'eggs',
date: '2017-10-07'
},
{
id:8,
completed: true,
itemName: 'tortillas',
date: '2017-10-08'
}
];
groceryService.findById = function(id){
for( var item in groceryService.groceryItems){
if(groceryService.groceryItems[item].id === id) {
console.log(groceryService.groceryItems[item]);
return groceryService.groceryItems[item];
}
}
};
groceryService.getNewId = function(){
if(groceryService.newId){
groceryService.newId++;
return groceryService.newId;
}else{
var maxId = _.max(groceryService.groceryItems,function(entry){return entry.id;})
groceryService.newId = maxId.id + 1;
return groceryService.newId;
}
};
groceryService.save = function(entry){
entry.id = groceryService.getNewId();
groceryService.groceryItems.push(entry);
};
return groceryService;
});
app.controller("HomeController", ["$scope","GroceryService", function"($scope, GroceryService) {
$scope.groceryItems = GroceryService.groceryItems;
}]);
app.controller("GroceryListItemController", ["$scope","$routeParams","$location","GroceryService", function($scope,$routeParams,$location,GroceryService) {
if(!$routeParams.id){
$scope.groceryItem = { id:0, completed:false, itemName: "", date: new Date() };
}else{
$scope.groceryItem = GroceryService.findById(parseInt($routeParams.Id));
}
//$scope.groceryItems = GroceryService.groceryItems;
//$scope.rp ="Route Parameter Values:" + $routeParams.id;
// $scope.groceryItem ={ id:7,completed:true, itemName: "cheese",date: new Date() }
$scope.save = function(){
GroceryService.save( $scope.groceryItem );
$location.path("/");
};
//console.log($scope.groceryItems);
}]);
groceryList.html
<div class="col-xs-12">
<a href="#!/addItem" style="margin-bottom: 10px:" class="btn btn-primary btn-lg btn-block">
<span class="glyphicon glyphicon-plus"></span> Add Grocery Item </a>
<ul class="list-group">
<li ng-repeat="item in groceryItems | orderBy: 'date'" class="list-group-item text-center clearfix">
<span style="font-weight: bold">{{item.itemName | uppercase}}</span>
<a href="#!/addItem/edit/{{item.id}}" class="btn btn-nm btn-default pull-right">
<span class="glyphicon glyphicon-pencil"></span>
</a>
</li>
</ul>
</div>
addItem.html
<div class="col-xs-12">
<div class="jumbotron text-center">
<h1>Add Item Below</h1>
</div>
<form name="groceryForm">
<div class="form-group">
<input type="text" class="form-control" placeholder ="Grocery Item" ng-model="groceryItem.itemName">
</div>
<div class="form-group">
<button type="button" class="btn btn-success btn lg btn-block" ng-click="save()">
<span class="glyphicon glyphicon-pushpin"></span>
Save
</button>
</div>
<div class="form-group">
<a href="#/" class="btn btn-default btn lg btn-block">
<span class="glyphicon glyphicon-remove"></span>
Cancel
</a>
</div>
</form>
</div>
After running index.html on a web server, the output in the browser is :
Grocery List
However, the list of grocery items are not displayed along with "Grocery List"
The various items are supposed to be displayed on the same page.
Are the brackets and all correct?
Please help!!!
Thank You!!
You need a state to be defined for listing out the grocery as
.when("/grocery", {
templateUrl: "groceryList.html",
controller: "HomeController"
})
and change the template as
<a class="navbar-brand" href="#grocery">
<span class="glyphicon glyphicon-apple" style="color: #5bdb46">
</span> Grocery List
</a>
DEMO
I want to get the check item from a list withing a ng-repeat in angular. Once the item is checked I want to put that checked item to another list.Here is my code so far.
<div class="col-lg-12" data-ng-repeat="user in users track by $index">
<div class="col-lg-12">
<div class="col-lg-3"> {{user.name}} </div>
<div class="col-lg-3">
<input type="checkbox" data-ng-checked="selectUser(user)" data-ng-model="user.isSelected" />
</div>
</div>
</div>
<div class="col-lg-12" data-ng-repeat="selectedUser in selectedUsers track by $index">
<div class="col-lg-12">
<div class="col-lg-3"> {{selectedUser.name}} </div>
<div class="col-lg-3">
</div>
</div>
</div>
This is my controller function to get the checked users.
$scope.selectUser = function(user){
if (user.isSelected) {
if ($scope.selectedUsers.indexOf(user.id) === -1) {
$scope.selectedUsers.push(user);
}
}else {
var index = $scope.selectedUsers.indexOf(user.id);
if ($scope.selectedUsers.indexOf(user.id) != -1) {
$scope.selectedUsers.splice(index, 1);
}
}
When I check a checkbox, all the users value will be passed to selectUsers() function. And it will give incorrect result. I want only to get the selected users. How can I do this?
Some mistakes you made here
You are using ng-check in wrong way.
Try this
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.allUsers = [{
id:0,
name:'john',
age:26,
selectedUser:true
},{
id:1,
name:'isha',
age:23,
selectedUser:false
},{
id:2,
name:'scott',
age:34,
selectedUser:true
},{
id:3,
name:'riya',
age:26,
selectedUser:false
},{
id:4,
name:'Adam',
age:5,
selectedUser:true
},{
id:5,
name:'doe',
age:56,
selectedUser:true
},{
id:6,
name:'Jack',
age:22,
selectedUser:true
},{
id:7,
name:'robin',
age:11,
selectedUser:true
}];
$scope.selectedUsers = [];
$scope.selectUser = function(user){
if (user.isSelected) {
$scope.selectedUsers.push(user);
}else {
for (var i = 0; i < $scope.selectedUsers.length; i++) {
if ($scope.selectedUsers[i].id == user.id) {
$scope.selectedUsers.splice(i, 1);
}
}
}
}
})
</script>
</head>
<body style="margin-top: 100px" ng-app="myApp" ng-controller="myCtrl">
<div class="col-lg-12" data-ng-repeat="user in allUsers track by $index">
<div class="col-lg-12">
<div class="col-lg-3"> {{user.name}} </div>
<div class="col-lg-3">
<input type="checkbox" ng-change="selectUser(user)" data-ng-model="user.isSelected" />
</div>
</div>
</div>
selected users
<div class="col-lg-12" data-ng-repeat="user in selectedUsers track by $index">
<div class="col-lg-12">
<div class="col-lg-3"> {{user.name}} </div>
<div class="col-lg-3">
</div>
</div>
</div>
</body>
</html>
Try this I think u need like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $window) {
$scope.Fruits = [{
FruitId: 1,
Name: 'Apple',
Selected: false
}, {
FruitId: 2,
Name: 'Mango',
Selected: false
}, {
FruitId: 3,
Name: 'Orange',
Selected: false
}];
$scope.GetValue = function () {
var message = "";
for (var i = 0; i < $scope.Fruits.length; i++) {
if ($scope.Fruits[i].Selected) {
var fruitId = $scope.Fruits[i].FruitId;
var fruitName = $scope.Fruits[i].Name;
message += "Value: " + fruitId + " Text: " + fruitName + "\n";
}
}
$window.alert(message);
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<div ng-repeat="fruit in Fruits">
<label for="chkCustomer_{{fruit.FruitId}}">
<input id="chkCustomer_{{fruit.FruitId}}" type="checkbox" ng-model="fruit.Selected" />
{{fruit.Name}}
</label>
</div>
<br />
<br />
<input type="button" value="Get" ng-click="GetValue()" />
</div>
</body>
</html>
I'm following through this tutorial: https://thinkster.io/mean-stack-tutorial#introduction.
when i'm coming to the end of Beginning Node section, i'm running the command : npm start, but i'm getting error Not found when i'm opening the localhost:3000.
here's the code:
angularApp.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'
});
$stateProvider.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
app.factory('posts',[function(){
var o = {
posts: []
};
return o;
}]);
app.controller('MainCtrl', ['$scope','posts',
function($scope,posts){
$scope.title = '';
$scope.test = 'Hello world!';
$scope.posts = posts.posts;
$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];
$scope.addComment = function(){
if($scope.body === '') { return; }
$scope.post.comments.push({
body: $scope.body,
author: 'user',
upvotes: 0
});
$scope.body = '';
};
}
]);
index.ejs
<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.5.5/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script>
<script src="/javascripts/angularApp.js"></script>
<script type="text/ng-template" id="/home.ejs">
<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.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
<span>
Comments
</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>
<script type="text/ng-template" id="/posts.ejs">
<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>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
</body>
</html>
Thanks a lot!
I am working on thinkster 'Learn to Build Modern Web Apps with MEAN' tutorial. The tutorial worked well till the ui-router part. After coding the ui-router and using the inline template, my index.html is blank. googled quite a bit but I am not able to find anything helpful. Here's my code.
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.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">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<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.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"
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>
</script>
</body>
</html>
app.js
angular.module('flapperNews', ['ui.router'])
var app = angular.module('flapperNews', []);
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.factory('posts', [function(){
var o = {
posts: []
};
return o;
}]);
app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
$scope.test = 'Hello world!';
$scope.posts = posts.posts;
$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){
}]);
I have been working on this tutorial: Thinkster MEAN tutorial
It was working out pretty well until I did the routing and created the "posts page". I forgot to test out the code I wrote during the proces and when I did test it - nothing was showing at all :-( I have been trying and trying to figure out what could be wrong, but I can´t find anything, that would make the HTML not show anything at all.
I have these 2 files. Please help me understand, why nothing at all is showing.
index.html:
<html>
<head>
<title>Cortrium 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">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Cortrium 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.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
<span>
Comments
</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>
<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>
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'
});
.state('posts',
{
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
app.factory('posts', [function(){
var o = {
posts: []
};
return o;
}])
app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
$scope.test = 'Hello world!';
$scope.posts = posts.posts;
$scope.addPost = function (){
if ($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;
}
}])
.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts){
$scope.post = posts.posts[$stateParams.id];
$scope.addComment = function (){
if ($scope.body === '') {return};
$scope.posts.comments.push({
body: $scope.body,
author: 'user',
upvotes: 0,
});
$scope.body = '';
}
}]);
One semicolon to much at section:
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
}) // ; remove semicolon as you want to chain many methods to $stateProvider
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl'
});
var app = angular.module('flapperNews', ['ui.router']);
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.factory('posts', [
function() {
var o = {
posts: []
};
return o;
}
])
app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts) {
$scope.test = 'Hello world!';
$scope.posts = posts.posts;
$scope.addPost = function() {
if ($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;
}
}
])
.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts) {
$scope.post = posts.posts[$stateParams.id];
$scope.addComment = function() {
if ($scope.body === '') {
return
};
$scope.posts.comments.push({
body: $scope.body,
author: 'user',
upvotes: 0,
});
$scope.body = '';
}
}
]);
<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>
<div ng-app="flapperNews" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Cortrium 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.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
<span>
Comments
</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>
<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>
</div>