Trying to learn Angular/Rails basics, and I am on this page of this AngularJS web-app tutorial: https://thinkster.io/tutorials/angular-rails/creating-the-single-post-view
I'm encountering a problem I have spent countless hours pouring over, but since my JavaScript knowledge is limited and my Angular experience is none, I'm coming to the conclusion that I will never figure out what I've done wrong.
My main view/controller works fine, but when I click the Comments on a post, it can never pull the data correctly. You can see a demo of it not working here: http://joshmccord.com/demo/webapp/#/home - just click Comments and see it broken.
Here's the code for app.js:
angular.module('flapperNews', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
// Make sure only last state has ending semicolon
.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() {
// Service Body
var o = {
posts: []
};
return o;
// End Service Body
}])
// Make sure only last controller has ending semicolon
.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
// Bind $scope.posts to factory/services 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,
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.post.comments.push({
body: $scope.body,
author: 'user',
upvotes: 0
});
$scope.body = '';
};
}]);
And finally here is the index.html:
<html>
<head>
<title>My Angular App!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css">
<link rel="stylesheet" href="app.css">
<script src="https://use.fontawesome.com/e1c22672d7.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script> <!-- http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js -->
<script src="app.js"></script>
</head>
<body ng-app="flapperNews">
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Flapper News</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>Home</li>
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
<div class="row mainView">
<div class="medium-6 medium-offset-3 columns">
<ui-view/>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div ng-repeat="post in posts | orderBy: '-upvotes'" class="postList">
<span class="fa fa-thumbs-up" ng-click="incrementUpvotes(post)"></span>
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
<span>
Comments
</span>
- Upvotes: {{post.upvotes}}
</div>
<form ng-submit="addPost()" class="addPost">
<h4>Add A Post</h4>
<input type="text" placeholder="Title" ng-model="title">
<input type="text" placeholder="Link" ng-model="link">
<button type="submit" class="button expanded">Post</button>
</form>
</script>
<script type="text/ng-template" id="/posts.html">
<h3>
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</h3>
<div ng-repeat="comment in posts.comments | orderBy:'-upvotes'">
<span class="fa fa-thumbs-up" ng-click="incrementalUpvotes(comment)"></span>
{{comment.upvotes}} - by {{coment.author}}
<span style="font-size: 20px; margin-left: 10px;">
{{comment.body}}
</span>
</div>
<form ng-submit="addComment()" class="addComment">
<h4>Add A Comment</h4>
<input type="text" placeholder="Comment" ng-model="body">
<button type="submit" class="button expanded">Post</button>
</form>
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
</body>
</html>
Related
So just to explain, a little bit closer.
I have 3 controllers, each has a different purpose, in ng-route.
But when I ng-include file in the template file, the second controller's ng-repeat is not working,
on the #/footer with a route. But on the #/nemke everything is working fine.
I know it's confusing. Thanks in advance.
#/footer template
<div class="container fluid bigCont" >
<div id="muster">
<span id="left"></span>
<span id="right"></span>
<ul class="slide">
<li id="{{image.id}}" class="slides" ng-repeat="image in images" ng-style="{'background-image': 'url(images/' + image.image + ')'}" >
<div class="absolute">
<h2 class="duka">{{image.text}}</h2>
<p>{{image.text2}}</p>
<button class="main-but" >More</button>
</div>
<span class="closer">X</span>
<span ng-click ="editor()" class="glyphicon glyphicon glyphicon-pencil pencer" aria-hidden="true"></span>
</li>
</ul>
</div>
<div ng-include="'good.html'"></div> the controller for this tempalte doesen't work goodCtrl
#/nemke template
<h1>{{name}}</h1>
<h1 id="number" ng-click="getNumber(1)">0</h1>
<form name="myForm" ng-if="bool" ng-model="formModel">
<input type="text" ng-model="formModel.text" id="text" name="text" required/>
<button ng-disabled="myForm.$invalid" ng-click="addNew()">Add new text</button>
</form>
<button ng-click="boolke=true">Fade in</button>
<button ng-click="boolke=false">Fade Out</button>
<p ng-if="boolke" ng-click="deletRec($event)" class="del_id sade" id="{{user.id}}" ng-repeat = "user in users">{{user.text}}</p>
<p>{{name}}</p>
controller for nemke template
app.controller('goodCtrl', ['$scope','$http','$controller', 'images', function($scope,$http,$controller, images){
$controller('getCtrl',{$scope:$scope});
$scope.name = "Nikson";
document.getElementById('title').style.display = "none";
images.success(function(data){
$scope.users = data;
});
$scope.formModel = {};
$scope.addNew = function() {
$scope.users.push($scope.formModel);
/*$http.post('post.php', $scope.formModel).
success(function(data){
console.log("ok")
}).error(function(data){
console.log("err");
}); */
$scope.formModel = {};
};
$scope.deletRec = function(event) {
var id = event.target.id;
$http({
method: 'DELETE',
url: 'delete.php',
data: {
id: id
},
headers: {
'Content-type': 'application/json;charset=utf-8'
}
})
.then(function(response) {
console.log(response.data);
}, function(rejection) {
console.log(rejection.data);
});
event.target.style.display = "none";
}
$scope.care = [
{
name:"Nemke",
age:12,
},
{
name:"Uros",
age:13,
}
]
}]);
routing js
app.config(function($routeProvider) {
$routeProvider
.when("/",{
controller:"newCtrl",
templateUrl:"main.html",
})
.when("/footer",{
controller: "getCtrl",
templateUrl : "red.html",
})
.when("/nemke",{
controller: "goodCtrl",
templateUrl:"good.html",
})
.otherwise({
redirectTo:"/"
})
});
main js
app.controller('getCtrl',['$scope', '$http', '$routeParams', 'images', function($scope, $http, $routeParams, images) {
images.success(function(data){
console.log(data);
}]);
I have been working on this tutorial (https://thinkster.io/mean-stack-tutorial) and once I switched to Adding Angular Services incrementUpvotes stopped working and I can't seem to find the reason. I am very new to Angular services and I cannot tell if I have instantiated correctly or if there is some other problem.
Any help is appreciated!!!
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="app.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.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 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>
</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'
});
$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.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.c = function(post) {
post.upvotes += 1;
};
}]);
Few things.
First, here you are importing data from your service, then immediately overwriting it:
$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}
];
But to answer your direct question, you have your ng-click pointed at a function called incrementUpVotes(post) so it's looking for a function on your controller defined as $scope.incrementUpVotes. It seems you wrote that function but called it $scope.c so just rename that to $scope.incrementUpVotes and you should be good.
$scope.incrementUpVotes = function(post) {
post.upvotes += 1;
};
I am following a tutorial to create a hackernews/reddit clone and seem to be stuck for some reason the app is not working.
In my browser console I get the following errors:
Uncaught SyntaxError: Unexpected token . app.js:46
Uncaught Error: [$injector:modulerr] angular.js:3857 http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=flapperNews&p1=Err…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.19%2Fangular.min.js%3A18%3A139)
What is happening here? Sorry I am not to familiar with this issue.
I have in 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.incrementUpvotes = function(post){
post.upvotes += 1;
}
$scope.addPost = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0
});
$scope.title = '';
$scope.link = '';
};
}]);
.controller('PostsCtrl', [
'$scope',
'$stateParams',
'$posts',
function($scope, $stateParams, posts) {
$scope.posts.push({
titile: $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.post = posts.posts[$stateParams.id];
}]);
index.html looks like this:
<html>
<head>
<title>My Angular App!</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/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-templates" id="/home.html">
<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>
</script>
<script type="text/ng-templates" 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>
</script>
</body>
</html>
When I remove the ; from line 46 I get the following weird thing in my console. It's seems like its stuck in a loop with continuous error messages.
angular.js:9959 Error: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///Users/Javier/codez/flapper_news/index.html#/home' cannot be created in a document with origin 'null' and URL 'file:///Users/Javier/codez/flapper_news/index.html'.
at Error (native)
at te.k.url (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:39:227)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:91:187
at k.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:112:319)
at k.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:109:392)
at k.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:113:100)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:18:239
at Object.d [as invoke] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:35:36)
at c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:18:147)
at cc (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:18:356)(anonymous function) # angular.js:9959(anonymous function) # angular.js:7298k.$digest # angular.js:12410k.$apply # angular.js:12699(anonymous function) # angular.js:1418d # angular.js:3917c # angular.js:1416cc # angular.js:1430Xc # angular.js:1343(anonymous function) # angular.js:21773a # angular.js:2549(anonymous function) # angular.js:2822q # angular.js:325c # angular.js:2821
angular.js:8467 XMLHttpRequest cannot load file:///home.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Remove the ; just above your PostsCtrl controller definition:
}]) //here
.controller('PostsCtrl'
The ; is interfering with the chaining of the controller.
Try to open your application under a server, IIS or Apache, don't just open the index.html in your browser
I was working on developing a comment page based on https://thinkster.io/mean-stack-tutorial. But the page does not appear at all. Here is the code:
In index.ejs in views directory:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/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="/javascripts/ang.js"></script>
</head>
<body ng-app="peopleComments">
<script type="text/ng-template" id="/home.html">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="page-header">
<h2>Learn. Share. Popularize.</h2>
</div>
<p>Share here to let the world know.</p>
<hr/>
<div ng-repeat="comment in comments|orderBy:'-upvotes'" style="line-height:25px">
{{comment.username}} - {{comment.contents}}
<br>
{{comment.upvotes}}
<span class="glyphicon glyphicon-triangle-top" ng-click="increaseUpvotes(comment)" style="color:green"></span>
{{comment.downvotes}}
<span class="glyphicon glyphicon-triangle-bottom" ng-click="increaseDownvotes(comment)" style="color:red"></span>
<hr/>
</div>
<form ng-submit="addComment()">
<div class="col-xs-2">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name" ng-model="username"></input>
</div>
</div>
<div class="col-xs-8">
<div class="form-group">
<input type="text" class="form-control" placeholder="What would you like to share?" ng-model="contents"></input>
</div>
</div>
<button class="btn btn-info" type="submit">Add My Entry</button>
</form>
</div>
</div>
</div>
</script>
</body>
</html>
In comments.js in models directory:
var mongoose = require('mongoose');
var CommentSchema = new mongoose.Schema({
username: String,
contents: String,
upvotes: {type: Number, default: 0},
downvotes:{type:Number, default:0}
});
CommentSchema.methods.upvote=function(cb){
this.upvotes+=1;
this.save(cb);
};
mongoose.model('Comment', CommentSchema);
In ang.js in public/javascripts directory:
var app=angular.module('peopleComments',['ui.router']);
app.factory('comments',['$http', function($http){
var c={
comments:[]
};
//loading all existing comments with getAll()
c.getAll=function(){
return $http.get('/comments').success(function(data){
angular.copy(data, c.comments);
});
};
//function which creates the new comments for updating in the database
c.create = function(comment) {
return $http.post('/comments', comment).success(function(data){
c.comments.push(data);
});
};
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
//setting up a home state
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'Base',
resolve: {
comment: ['comments', function(comments){ //using resolve property of ui-router - not rendering???
return comments.getAll();
}]
}
});
$urlRouterProvider.otherwise('home');
}]);
app.controller('Base',[
'$scope','comments',function($scope,comments){
$scope.addComment=function(){ //add new comments to the server/display existing ones
$scope.comments=comments.comments;
if(!$scope.username||$scope.username=='') {$scope.username='Anonymous';}
if(!$scope.contents||$scope.contents==''){return;}
comments.create({
username: $scope.username,
contents: $scope.contents,
}); $scope.comments.push({username:$scope.username,contents:$scope.contents,upvotes:0,downvotes:0});
$scope.username='';
$scope.contents='';
}
$scope.comments = [
{username: 'Diana', contents:'In either a quantum world or in a higher dimension, the past, present and future co-exist!', upvotes: 5, downvotes:0},
{username: 'Cindy', contents:'Never wash strawberries or any berry unless you intend to eat them right away or they will mold.', upvotes: 7, downvotes:0}
];
}]);
The comments given above should appear.. But they aren't.. Why??
I think your problem is that you've created a template, but you're not using the template.
I'm not 100% sure you need a template but try:
<div ng-include src="home.html"></div>
See this example of switching templates dynamically JSFiddle
It looks like the Controller will not wait for comment to load because it doesn't depend on it. Making the controller depend on the comment promise as well as the comments service should make the dependency clear to Angular.
app.controller('Base',[
'$scope','comments', 'comment', function($scope,comments,_comment){
// ...
}]);
The mistake was that I had to add
<ui-view></ui-view>
where I needed my template to load as per the ui-router syntax.
The page of this app just loads blank. I i searched the problem for hours and still can't find the problem. Angular is 1.3.5 and Angular-route is v1.2.28.
This is index.html:
<html ng-app="myApp">
<head>
<script src="js/angulark.min.js"></script>
<script src="js/angular-routek.js"></script>
<script>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'MainController',
templateUrl: 'views/nameView.html';
})
.when('/cityView',
{
controller: 'MainController',
templateUrl: 'views/cityView.html';
})
.otherwise({ redirectTo: '/' });
});
myApp.controller('MainController', ['$scope', function($scope) {
$scope.customers = [
{ name: 'Andre Queiroz', city: 'Rio de Janeiro' },
{ name: 'Fulano', city: 'Sao Paulo'},
{ name: 'Beltrano', city: 'Curitiba' }
];
$scope.addCustomer() = function () {
$scope.customers.push(
{ name: $scope.newCustomer.name, city: $scope.newCustomer.city }
);
};
}]);
</script>
<title>Meu Aplicativo</title>
</head>
<body>
<div>
<!-- Placeholder for views -->
<div ng-view> </div>
</div>
</body>
</html>
This is nameView.html
<div class="container">
<div ng-controller="MainController">
<div>
<h2>View 1</h2>
Name: <input type="text" ng-model="filter.name"/>
</div>
<br />
<ul>
<li ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div
<div>
<p>Customer name:</p>
<input type="text" ng-model="newCustomer.name" />
<p>Customer city:</p>
<input type="text" ng-model="newCustomer.city" />
<button ng-click="addCustomer()">Add customer </button>
View 2
</div>
</div>
</div>
The cityView.html is the same but with no addCustomer stuff. I was dividing into module file and so on, but i put it in one file to see if it worked.
There is a mistake in index.html javascript.
Inside MainController change your code
$scope.addCustomer() = function () {
$scope.customers.push(
{ name: $scope.newCustomer.name, city: $scope.newCustomer.city }
);
};
to
$scope.addCustomer= function () {
$scope.customers.push(
{ name: $scope.newCustomer.name, city: $scope.newCustomer.city }
);
};
it should $scope.addCustomer= instead of $scope.addCustomer()=
You're actually doing well. Most of erros are syntax.
Error 1: Remove ; from templateUrl inside $routeProvider.when()
Eq. templateUrl: 'views/cityView.html'
Error 2: Can't have parentheses to create a method with this sintaxe
$scope: Eq. $scope.newfunction = function() {...}
<html ng-app="myApp">
<head>
<script src="js/angulark.min.js"></script>
<script src="js/angular-routek.js"></script>
<script>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'MainController',
templateUrl: 'views/nameView.html'
})
.when('/cityView',
{
controller: 'MainController',
templateUrl: 'views/cityView.html'
})
.otherwise({ redirectTo: '/' });
});
myApp.controller('MainController', ['$scope', function($scope) {
$scope.customers = [
{ name: 'Andre Queiroz', city: 'Rio de Janeiro' },
{ name: 'Fulano', city: 'Sao Paulo'},
{ name: 'Beltrano', city: 'Curitiba' }
];
$scope.addCustomer = function () {
$scope.customers.push(
{ name: $scope.newCustomer.name, city: $scope.newCustomer.city }
);
};
}]);
</script>
<title>Meu Aplicativo</title>
</head>
<body>
<div>
<!-- Placeholder for views -->
<div ng-view> </div>
</div>
</body>
</html>
There're some HTML errors in your view. Make sure to validate your HTML.
Error: In the line 11, you must fix from </div to </div>
Also, you don't need to add a controller. You already added on your config:
Remove it from your view: From <div
ng-controller="MainController"> to <div>
Not required, but best practice
On your last line, there's a spare </div>, get rid of it:
<div class="container">
<div ng-controller="MainController">
<div>
<h2>View 1</h2>
Name: <input type="text" ng-model="filter.name"/>
</div>
<br />
<ul>
<li ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
<div>
<p>Customer name:</p>
<input type="text" ng-model="newCustomer.name" />
<p>Customer city:</p>
<input type="text" ng-model="newCustomer.city" />
<button ng-click="addCustomer()">Add customer </button>
View 2
</div>
</div>
PS: Make sure you check your syntax errors. Using jshint, jslint or even Chrome dev tools / Firebug will help with that. You can set your editor(Sublimelinter for Sublime for example) to use jshint. Or use a IDE like Webstorm which comes with.