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
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> {{appTitle}}
</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/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: "GroceryListItemsController"
})
.when("/addItem",{
templateUrl: "views/addItem.html",
controller: "GroceryListItemsController"
})
// .otherwise({
// redirectTo: "/"
//})
});
app.controller("HomeController", ["$scope", function($scope) {
$scope.appTitle = "Grocery List";
}]);
app.controller("GroceryListItemsController", ["$scope", function($scope) {
$scope.groceryItems = [{
completed: true,
itemName: 'milk',
date: '2017-10-01'
},
{
completed: true,
itemName: 'cookies',
date: '2017-10-02'
},
{
completed: true,
itemName: 'ice cream',
date: '2017-10-03'
},
{
completed: true,
itemName: 'potatoes',
date: '2017-10-04'
},
{
completed: true,
itemName: 'cereal',
date: '2017-10-05'
},
{
completed: true,
itemName: 'bread',
date: '2017-10-06'
},
{
completed: true,
itemName: 'eggs',
date: '2017-10-07'
},
{
completed: true,
itemName: 'tortillas',
date: '2017-10-08'
}
]
}]);
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>
</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">
</div>
<div class="form-group">
<a href="#/" class="btn btn-success btn lg btn-block">
<span class="glyphicon glyphicon-pushpin"></span>
Save
</a>
</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>
The output is showing the Add Grocery Item button along with the grocery items. However when clicking the add grocery item button ,its not redirecting to any page. This is an extension to Angular Module Routing not working
Thanks for you help.
I ran your code locally and the problem seems to be related to route's hashPrefix.
It seems that the default prefix is #!/, so your URLs should start with it:
<a href="#!/addItem" ...>
<a href="#!/" ...>
Instead of:
<a href="#/addItem" ...>
<a href="#/" ...>
This will require that you change every herf in the website. Though the more elegant solution would be to get rid of the ! mark all together using:
app.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider...
// Register routes...
});
This will change the default prefix and make it #/ instead of #!/.
By doing so, all your website URLs will work without the need to change anything else.
Here's my code:
app.js
var app = angular.module('groceryListApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/groceryList.html"
controller: "GroceryListItemsController"
})
});
app.controller("HomeController", ["$scope", function($scope) {
$scope.appTitle = "Grocery List";
}]);
app.controller("GroceryListItemsController", ["$scope", function($scope) {
$scope.groceryItems = [{
completed: true,
itemName: 'milk',
date: '2017-10-01'
},
{
completed: true,
itemName: 'cookies',
date: '2017-10-02'
},
{
completed: true,
itemName: 'ice cream',
date: '2017-10-03'
},
{
completed: true,
itemName: 'potatoes',
date: '2017-10-04'
},
{
completed: true,
itemName: 'cereal',
date: '2017-10-05'
},
{
completed: true,
itemName: 'bread',
date: '2017-10-06'
},
{
completed: true,
itemName: 'eggs',
date: '2017-10-07'
},
{
completed: true,
itemName: 'tortillas',
date: '2017-10-08'
}
]
}]);
and index.html is
<!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="css/bootstrap.min.css" rel="stylesheet">
<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> {{appTitle}}
</a>
</div>
</div>
</nav>
<div class="container" ng-view>
</div>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
groceryList.html is
<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>
</li>
</ul>
</div>
When running index.html in chrome the output is {{appTitle}}. I assume the ngRoute isn't being recognized here. Please help.
All the lib files are correctly in place too.
The grocery list is supposed to be visible. It had worked without the routing mechanism
Thanks
Change your order angular.min.js should be loaded ahead of lib/angular-route.min.js
<script src="lib/angular.min.js"></script>
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="js/app.js"></script>
The issue is definitely with the sequence of the scripts. So here's what I did.
var app = angular.module('groceryListApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "../views/groceryList.html",
controller: "GroceryListItemsController"
})
});
app.controller("HomeController", ["$scope", function($scope) {
$scope.appTitle = "Grocery List";
}]);
app.controller("GroceryListItemsController", ["$scope", function($scope) {
$scope.groceryItems = [{
completed: true,
itemName: 'milk',
date: '2017-10-01'
},
{
completed: true,
itemName: 'cookies',
date: '2017-10-02'
},
{
completed: true,
itemName: 'ice cream',
date: '2017-10-03'
},
{
completed: true,
itemName: 'potatoes',
date: '2017-10-04'
},
{
completed: true,
itemName: 'cereal',
date: '2017-10-05'
},
{
completed: true,
itemName: 'bread',
date: '2017-10-06'
},
{
completed: true,
itemName: 'eggs',
date: '2017-10-07'
},
{
completed: true,
itemName: 'tortillas',
date: '2017-10-08'
}
]
}]);
<!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> {{appTitle}}
</a>
</div>
</div>
</nav>
<div class="container" ng-view>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="./js/app.js"></script>
</body>
</html>
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>
</li>
</ul>
</div>
Since I didn't have most of the code, I just created this bare minimum project from the code that you supplied and served it using this Web Server
And it works at my end:
I did use relative paths instead of absolute paths though.
Hope this helps.
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 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>
Hi i tried to make ngRoute works but found post about ui-route. I follow this example here but i can't get anything working, tho i have no error message in the console.
I'm trying with pure text partials atm.
index.html :
<!DOCTYPE html>
<html lang="fr" ng-app="todoList">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<!-- <script src="js/jquery.js"></script>
<script src="js/angular-route.js"></script>-->
<script src="js/angular.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="js/todolist.js"></script>
<script src="js/controller.js"></script>
<!-- App Script -->
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid" >
<div class="navbar-header">
<a class="navbar-brand" ui-sref="index">Pense-bête</a>
</div>
<div class="navbar navbar-right" id="myNavbar" >
<ul class="nav navbar-nav">
<li><button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button></li>
<li><button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
</button></li>
<li><button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button></li>
</ul>
</div>
</div>
</nav>
<div class="row">
</div>
<div class="row" id="menu" ng-controller='navCtrl'>
<div class="col-sm-3 cold-md-2" id="left-menu">
<ul class="nav nav-pills nav-stacked">
<li ng-class="{active: menu=='inbox'}"><a ui-sref="inbox" ng-click="menu='inbox'"><span class="glyphicon glyphicon-inbox">
</span> Boite de réception</a></li>
<li ng-class="{active: menu=='today'}"><a ui-sref="today" ng-click="menu='today'"><span class="glyphicon glyphicon-calendar"></span> Aujourd'hui</a></li>
<li><span class="glyphicon glyphicon-calendar"></span> Cette semaine</li>
<li><i class="glyphicon glyphicon-pushpin"></i> Important </li>
<li><a href="#profile" data-toggle="tab"><span class="glyphicon glyphicon-cutlery"></span>
Repas</a></li>
<li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-shopping-cart"></span>
Courses</a></li>
<li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-list"></span>
Perso</a></li>
<li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-plus"></span>
Nouvelle liste</a></li>
</ul>
</div>
<div class="col-sm-9 cold-md-10" id='main-view'>
<div ui-view>
</div>
</div>
</div>
</body>
</html>
todolist.js :
var todoList = angular.module('todoList', ["ui.router"])
todoList.config(function($stateProvider){
$urlRouterProvider.otherwise("/inbox");
$stateProvider
.state('inbox', {
url: "/inbox",
templateUrl: "partials/inbox.html"
})
.state('today', {
url: "/today",
templateUrl: "partials/today.html"
})
})
controller.js :
var todoListController= angular.module('todoList', []);
todoListController.controller('todoCtrl',['$scope',
function ($scope) {
var todos = $scope.todos = [];
$scope.addTodo = function () {
var newTodo = $scope.newTodo.trim();
if (!newTodo.length) {
return;
}
todos.push({
title: newTodo,
completed: false
});
$scope.newTodo = '';
};
$scope.removeTodo = function (todo) {
todos.splice(todos.indexOf(todo), 1);
};
$scope.markAll = function (completed) {
todos.forEach(function (todo) {
todo.completed = !completed;
});
};
$scope.clearCompletedTodos = function () {
$scope.todos = todos = todos.filter(function (todo) {
return !todo.completed;
});
};
}]);
todoListController.controller('todayCtrl', function($scope) {
$scope.message = 'Everyone come and see how good I look!';
});
todoListController.controller('navCtrl', function($scope) {
$scope.menu = 'inbox';
});
I updated the plunk. The following were corrected.
moved angularjs script as the first script.
include angular-ui-router.min.js followed by angularjs
the controller has a different variable todoListController. Not todoList
The $urlRouterProvider not mentioned in script.js
script.js
var todoList = angular.module('todoList', ["ui.router"])
todoList.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/inbox");
$stateProvider
.state('inbox', {
url: "/inbox",
templateUrl: "inbox.html"
})
.state('today', {
url: "/today",
templateUrl: "today.html"
})
})
index.html
<!DOCTYPE html>
<html lang="fr" ng-app="todoList">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="index">Pense-bête</a>
</div>
<div class="navbar navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li>
<button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</li>
<li>
<button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
</button>
</li>
<li>
<button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="row"></div>
<div class="row" id="menu" ng-controller="navCtrl">
<div class="col-sm-3 cold-md-2" id="left-menu">
<ul class="nav nav-pills nav-stacked">
<li ng-class="{active: menu=='inbox'}">
<a ui-sref="inbox" ng-click="menu='inbox'">
<span class="glyphicon glyphicon-inbox"></span>
Boite de réception</a>
</li>
<li ng-class="{active: menu=='today'}">
<a ui-sref="today" ng-click="menu='today'">
<span class="glyphicon glyphicon-calendar"></span>
Aujourd'hui</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-calendar"></span>
Cette semaine</a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-pushpin"></i>
Important </a>
</li>
<li>
<a href="#profile" data-toggle="tab">
<span class="glyphicon glyphicon-cutlery"></span>
Repas</a>
</li>
<li>
<a href="#messages" data-toggle="tab">
<span class="glyphicon glyphicon-shopping-cart"></span>
Courses</a>
</li>
<li>
<a href="#messages" data-toggle="tab">
<span class="glyphicon glyphicon-list"></span>
Perso</a>
</li>
<li>
<a href="#messages" data-toggle="tab">
<span class="glyphicon glyphicon-plus"></span>
Nouvelle liste</a>
</li>
</ul>
</div>
<div class="col-sm-9 cold-md-10" id="main-view">
<div ui-view></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="script.js"></script>
<script src="controller.js"></script>
</body>
</html>
controller.js
todoList.controller('todoCtrl',['$scope',
function ($scope) {
var todos = $scope.todos = [];
$scope.addTodo = function () {
var newTodo = $scope.newTodo.trim();
if (!newTodo.length) {
return;
}
todos.push({
title: newTodo,
completed: false
});
$scope.newTodo = '';
};
$scope.removeTodo = function (todo) {
todos.splice(todos.indexOf(todo), 1);
};
$scope.markAll = function (completed) {
todos.forEach(function (todo) {
todo.completed = !completed;
});
};
$scope.clearCompletedTodos = function () {
$scope.todos = todos = todos.filter(function (todo) {
return !todo.completed;
});
};
}]);
todoList.controller('todayCtrl', function($scope) {
$scope.message = 'Everyone come and see how good I look!';
});
todoList.controller('navCtrl', function($scope) {
$scope.menu = 'inbox';
});