json not working in Angular - javascript

I'm a beginner in Angular so I hope someone to help me!
This is my script.js
ar app = angular.module('computer', ['ngRoute'])
.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl : 'main.html',
controller : 'MainCtrl'
})
.when('/service', {
templateUrl : 'service.html',
controller : 'ServicesCtrl'
})
.otherwise({redirectTo:'/main'});
}])
.controller('MainCtrl', ['$scope', function($scope){
}])
.controller('ServicesCtrl', ['$scope','$http', function($scope,$http){
$http.get('serviceData.json').then(function(response){
console.log(response);
$scope.services = response.data;
});
}]);
and this is service.html
<div class="row">
<div class="col-md-12">
<h2>Services</h2>
<div ng-repeat="serv in services">
<div class="row service">
<div class="col-md-2">
<img src="computer-icon.png" class="img-responsive">
</div>
<div class="col-md-10">
<h3>{{ serv.id : serv.name }}</h3>
<p>{{serv.Description}}</p>
<button class="btn btn-primary">Read More…</button>
</div>
</div>
</div>
</div>
and serviceData.json
[{
"id": 1,
"name": "Reparation",
"Description": "Reparation of your hardware"
}, {
"id": 2,
"name": "Installation",
"Description": "Installation of your hardware"
}, {
"id": 3,
"name": "Reparation and Reset",
"Description": "Reparation and Reset of your hardware"
}]
But I have this error in console
angular.min.js:118 Error: [$parse:syntax] http://errors.angularjs.org/1.5.8/$parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=9&p3=serv.id%20%3A%20service.name&p4=%3A%20service.name
and anything display in screen.
Thank you for help !


You have to use the following line:
<h3>{{ serv.id : serv.name }}</h3>
like this:
<h3>{{ serv.id}} : {{serv.name }}</h3>

Related

Data does not show in view using AngularJS directives

I trying to use directives to show controller data in the my view but nothing displays and there are no errors in the console. I am able to log the data but the data will not show in view. Am I using directives the correct way? How do I show the data in the view? Thank you.
index.html
<body ng-app="GameboardApp">
<div class="header">
<h1 class="logo">GameBoard</h1>
</div>
<div class="main" ng-controller="ScoreController">
<div class="container">
<div class="row" >
<game ng-repeat="score in scores" info="score"></game>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/ScoreController.js"></script>
<!-- Directives -->
<script src="js/directives/game.js"></script>
App.js
var app = angular.module('GameboardApp', []);
Controllers
ScoreController:
app.controller('ScoreController', ['$scope', function($scope) {
$scope.scores = [
{
datetime: 1420848000000,
visitor_team: {
city: "Charlotte",
name: "Hornets"
},
home_team: {
city: "New York",
name: "Knicks"
},
period: "Final",
visitor_score: 110,
home_score: 82
},,
...
},
{
datetime: 1420848000000,
visitor_team: {
city: "Orlando",
name: "Magic"
},
home_team: {
city: "Portland",
name: "Trail Blazers"
},
period: "First Quarter",
visitor_score: 13,
home_score: 26
}
];
console.log($scope.scores);
}]);
directives
game.js
app.directive('game', function() {
return {
restrict: 'E',
score: {
info: '='
},
templateUrl: 'js/directives/game.html'
}
})
game.html
<div class="col-sm-4">
<div class="row scorecard">
<p class="period">{{info.period}}</p>
<div class="visitor col-xs-4">
<h2 class="visitor-score">{{info.visitor_score}}</h2>
<h3>
<span class="visitor-city">{{info.visitor_team.city}}</span><br/>
<span class="visitor-name">{{info.visitor_team.name}}</span>
</h3>
</div>
<div class="dash col-xs-3">
<h2>-</h2>
</div>
<div class="home col-xs-4">
<h2 class="home-score">{{info.home_score}}</h2>
<h3>
<span class="home-city">{{info.home_team.city}}</span><br/>
<span class="home-name">{{info.home_team.name}}</span>
</h3>
</div>
</div>

In game.js file, where you have created the directive, you have misspelled the field name. It should be scope not score.

Why won't my AngularJS Controller take control on state change

I'm in the very beginning stages of learning AngularJS. I have a couple of years of Webdev experience (JS, HTML, etc.) so JS is not new to me.
I'm going through the tutorial at https://thinkster.io/tutorials/mean-stack. I'm still on the front-end part. I haven't even reached the Node/Express/Mongodb topics yet! It's pretty great but the ability to see the full work-in-progress requires paying for a membership which I don't feel is necessary at this point. If I had that I might be able to see what's different about my code but, alas.
As I usually do, I've changed a few semantic details from the tutorial (e.g. "persons" instead of "posts") but they shouldn't alter the functionality of the page fundamentally.
The trouble is, I can't get my controller to "take control" as it were, in its various states. The tutorial uses ui-router. I'm under the impression there are other alternatives for routing (e.g. "ngrouter?") and that is all well and good but I would like to get this work just on principle.
Here is the code:
app.js
var moduleApp = angular.module('flapperNews', ["ui.router"]);
moduleApp.config([
"$stateProvider",
"$urlRouterProvider",
function($stateProvider, $urlRouterProvider)
{
$stateProvider
.state("home",
{
"url": "/home",
"templateUrl": "/home.html",
"controller": "MainCtrl"
});
$stateProvider
.state("friends",
{
"url": "/friends/{id}",
"templateUrl": "/friends.html",
"controller": "FriendsCtrl"
});
$urlRouterProvider.otherwise("home");
}
]);
moduleApp.factory("persons", [
function(){
return {
"persons": [
{
"name": "John",
"age": 31,
"friends": [
{"name": "Brynn", "relationship": "Wife"},
{"name": "Becca", "relationship": "Sister"}
],
"homePage": "http://www.google.com"
},
{
"name": "Brynn",
"age": 30,
"friends": [
{"name": "John", "relationship": "Husband"},
{"name": "Becca", "relationship": "Sister-in-Law"}
]
},
{
"name": "Becca",
"age": 26,
"friends": [
{"name": "John", "relationship": "Brother"},
{"name": "Becca", "relationship": "Sister-in-Law"}
]
}
]
};
}
]);
controllers.js
moduleApp.controller("MainCtrl", [
"$scope",
"persons",
function($scope, persons) {
the_scope = $scope;
$scope.test = 'Hello world!';
$scope.persons = persons.persons;
$scope.addPerson = function() {
if (typeof $scope.name !== "undefined" && $scope.name !== "" &&
typeof $scope.age !== "undefined" && $scope.age !== "" &&
!isNaN($scope.age))
{
$scope.persons.push({"name": $scope.name, "age": $scope.age, "homePage": $scope.homePage});
$scope.name = "";
$scope.age = "";
$scope.homePage = "";
}
};
$scope.getOlder = function(post) {
post.age++;
};
$scope.getYounger = function(post) {
post.age--;
};
}
]);
moduleApp.controller("FriendsCtrl", [
"$scope",
"$stateParams",
"persons",
function($scope, $stateParams, persons)
{
$scope.friends = persons.persons[$stateParams.id];
}
]);
index.html
<html>
<head>
<title>My Angular App!</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://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.3.2/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</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>
<div class="row">
<div class="col-md-6 col-md-offset-1">
<form ng-submit="addPerson();">
<label for="name">Name</label>
<input id="name" type="text" ng-model="name">
<br />
<label for="age">Age</label>
<input id="age" type="text" ng-model="age">
<br />
<label for="homePage">Home Page</label>
<input id="homePage" type="text" ng-model="homePage">
<br />
<button class="btn btn-primary" type="submit">Add Person</button>
</form>
<div>
{{ test }}
</div>
<div ng-repeat="person in persons | orderBy: '-age'">
<span ng-click="getYounger(person);">-</span>
<span ng-click="getOlder(person);">+</span>
<a ng-show="person.homePage" href="{{person.homePage}}">{{ person.name }}</a>
<span ng-hide="person.homePage">{{ person.name }}</span>
-
Age: {{ person.age }}
<span>
Friends
</span>
</div>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
</script>
<script type="text/ng-template" id="/friends.html">
<div class="page-header">
<h3>
<a ng-show="person.homePage" href="{{person.homePage}}">{{ person.name }}</a>
<span ng-hide="person.homePage">{{ person.name }}</span>
</h3>
</div>
<div ng-repeat="friend in person.friends | orderBy: '-age'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="getOlder"></span>
{{ friend.name }} - {{ friend.relationship }}
</div>
</script>
</body>
</html>
Here is a functional jsbin to peruse. When you click one of the "Friends" button it initiates a state change. Note the jsbin combines the two js files.
Even with the initial state ("/home") the controller is not working though. The tutorial specifically says you shouldn't need the "ng-controller" directive in "body" tag so that shouldn't be the problem. Incidentally, when I do have the "ng-controller" directive in the "body" tag the controller does appear to work which suggests the controller definition is sound.
I'm sure I'm missing some small crucial semantic error but I've been working on this for days (in what little time I've had outside of taking care of our infant) and can't figure it out. I'd really like to move on in the tutorial but I feel like I'm probably missing something important.
To pre-empt the community members who are fond of drinking the haterade:
I don't know anything.
I'm a terrible programmer.
I'm barely qualified to use a toaster.
Please ignore this post's pathetic usage of SO server storage.
Now that that's been said... anyone who is still reading and actually feels like throwing an Angular noob a bone please help.
Thanks!

ng-view does not get the data from href?

I tried one product page using AngularJS. This the first time i am creating the page using AngularJS.
ng-view is not working when i click the add to cart page. It does not show any respond.
I am verified the code with all the tutorials. It seems correct.
Can anyone please tell what i did wrong.
Below i mentioned the code. Sorry, cant able to put the code in jsfiddle. It does not bind the normal date.
Code:
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/red', {
templateUrl: 'dashboard.html',
controller: 'myCtrl',
})
.when('/green', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/yellow', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/black', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/grey', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/blue', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
app.controller("myCtrl", function($scope) {
$scope.records = [{
"Name": "Alfreds Futterkiste",
"Country": "Germany",
"Dollar": "$21.00",
"URL": "red"
}, {
"Name": "Berglunds snabbköp",
"Country": "Sweden",
"Dollar": "$21.00",
"URL": "green"
}, {
"Name": "Centro comercial Moctezuma",
"Country": "Mexico",
"Dollar": "$21.00",
"URL": "yellow"
}, {
"Name": "Ernst Handel",
"Country": "Austria",
"Dollar": "$21.00",
"URL": "black"
}, {
"Name": "Ernst Jubilie",
"Country": "Canada",
"Dollar": "$21.00",
"URL": "grey"
}, {
"Name": "Idris_09090",
"Country": "India",
"Dollar": "$43.00",
"URL": "blue"
}]
});
li.list-group-item {
position: relative;
display: inline-block;
margin-bottom: -1px;
background-color: #D38585;
border: 1px solid #ddd;
width: 25%;
height: 210px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<body ng-app="myApp" style="background-color: #2a2326;" ng-controller="myCtrl">
<div class="container">
<div class="well well-sm" style="background-color:#2a2326; color:white; text-align:center; font-size:30px;">
<h4><strong>Water Products</strong></h4>
</div>
<div class="item col-xs-12 col-lg-4" ng-repeat="x in records">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
{{x.Name}}</h4>
<p class="group inner list-group-item-text">
{{x.Country}}</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
{{x.Dollar}}</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" ng-href="#{{x.URL}}">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div ng-view></div>
</div>
Please help on this.

remove
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
change your url to
<a class="btn btn-success" ng-href="#/{{x.URL}}">Add to cart</a>
demo:
https://plnkr.co/edit/5odGEUq0eK8tGR8IxohW?p=preview

Change href to ng-href
<a class="btn btn-success" href ng-href="#{{x.URL}}">Add to cart</a>

Can you please try this ? , as i can't judge is your app is getting load or not, but your href issue will solved from this.
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/red', {
templateUrl: 'dashboard.html',
controller: 'myCtrl',
})
.when('/green', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/yellow', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/black', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/grey', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/blue', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
app.controller("myCtrl", function($scope) {
$scope.records = [{
"Name": "Alfreds Futterkiste",
"Country": "Germany",
"Dollar": "$21.00",
"URL": "red"
}, {
"Name": "Berglunds snabbköp",
"Country": "Sweden",
"Dollar": "$21.00",
"URL": "green"
}, {
"Name": "Centro comercial Moctezuma",
"Country": "Mexico",
"Dollar": "$21.00",
"URL": "yellow"
}, {
"Name": "Ernst Handel",
"Country": "Austria",
"Dollar": "$21.00",
"URL": "black"
}, {
"Name": "Ernst Jubilie",
"Country": "Canada",
"Dollar": "$21.00",
"URL": "grey"
}, {
"Name": "Idris_09090",
"Country": "India",
"Dollar": "$43.00",
"URL": "blue"
}]
});
li.list-group-item {
position: relative;
display: inline-block;
margin-bottom: -1px;
background-color: #D38585;
border: 1px solid #ddd;
width: 25%;
height: 210px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<body ng-app="myApp" style="background-color: #2a2326;" ng-controller="myCtrl">
<div class="container">
<div class="well well-sm" style="background-color:#2a2326; color:white; text-align:center; font-size:30px;">
<h4><strong>Water Products</strong></h4>
</div>
<div class="item col-xs-12 col-lg-4" ng-repeat="x in records">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
{{x.Name}}</h4>
<p class="group inner list-group-item-text">
{{x.Country}}</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
{{x.Dollar}}</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" ng-href="#/{{x.URL}}">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div ng-view></div>
</div>

Working with Angular Material

This is a small project just for learning purposes.
The objective is that when I click in the + button in front of the name of the game, the AngularJS material popup show up. Its working, but I want it to work for the different games. With a different HTML template correspondent to the game I click.
Here is my project.
https://github.com/hseleiro/myApp
index.html
<div ng-view>
</div>
assets/js/mainApp.js
var stuffApp = angular.module('myApp', ['ngAnimate','ngRoute','ngMaterial','ui.bootstrap.tpls','ui.bootstrap']);
stuffApp.config(function ($routeProvider) {
$routeProvider
// route for the home page
.when('/',
{
templateUrl: 'pages/home.html',
controller: 'mainController',
})
.when('/games',
{
templateUrl: 'pages/games.html',
controller: 'mainController'
})
})
stuffApp.controller('mainController', function ($scope,$mdDialog){
$scope.query = {}
$scope.queryBy = '$'
$scope.games = [
{
"name" : "BloodBorne",
"consola" : "Playstation 4"
},
{
"name" : "Mass Efect 3",
"consola" : "Xbox 360"
},
{
"name" : "Pro Evolution Soccer 6",
"consola" : "Xbox 360"
}
];
$scope.showAdvanced = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'pages/dialog1.tmpl.html',
targetEvent: ev,
clickOutsideToClose:true
})
};
function DialogController($scope, $mdDialog) {
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
}
});
pages/games.html
<div class="container">
<div class="row">
<div class="titulo">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<h1><i class="fa fa-gamepad fa-4x"></i></h1>
</div>
<div class="col-sm-4"></div>
</div>
</div>
<div class="row">
<div class="col-sm-1">
<div class="search_icon">
<h4><i class="fa fa-search fa-4x"></i></h4>
</div>
</div>
<div class="col-sm-11">
<div class="search_bar">
<div><input class="form-control" ng-model="query[queryBy]" /></div>
</div>
</div>
</div>
<hr>
<div>
<table class="table">
<tr>
<th>Nome</th>
<th>Consola</th>
</tr>
<tr ng-repeat="game in games | filter:query">
<td>{{game.name}}<md-button class="md-primary" ng-click="showAdvanced($event)">
<i class="fa fa-plus"></i>
</md-button></td>
<td>{{game.consola}}</td>
</tr>
</table>
</div>
</div>
pages/dialog1.tmpl.html
<md-dialog aria-label="">
<form>
<md-dialog-content class="sticky-container">
<md-subheader class="md-sticky-no-effect"></md-subheader>
<div>
<p>
Test
</p>
<img style="margin: auto; max-width: 100%;" alt="Lush mango tree" src="assets/img/bloodborne.jpg">
<p>
Test
</p>
<p>
Test
</p>
</div>
</md-dialog-content>
<div class="md-actions" layout="row">
<span flex></span>
<md-button ng-click="answer('useful')" class="md-primary">
Close
</md-button>
</div>
</form>
</md-dialog>
Could some one help me ? Thanks

Sounds like you need to parameterize the controller and template you pass to $mdDialog.
For example:
$scope.showAdvanced = function(ev, popupIdentifier) {
$mdDialog.show({
controller: popupIdentifier + 'Controller',
templateUrl: 'pages/' + popupIdentifier + '.tmpl.html',
targetEvent: ev,
clickOutsideToClose:true
})
};
and then simply call the function with whatever popup content you need:
$scope.showAdvanced($event, 'Game1');

ng-repeat doesn't display anything

<div ng-controller="Ctrl">
<div class="" ng-repeat="data in mydata">
{{data.b.three}}
</div>
function Ctrl($scope) {
$scope.mydata = [{
"a":"",
"b":[{
"one":"",
"two": "",
"three": "1"
}]
}]
}
I expect it will return '1' but it didn't, also there is no error message in my console.

Html :
<div ng-app="print" ng-controller="Ctrl ">
<div ng-repeat="data in mydata">
{{data.b[0].three}}
</div>
JS :
angular.module('print', []).
controller('Ctrl',function ($scope) {
$scope.mydata = [{
"a":"",
"b":[{
"one":"",
"two": "",
"three": "1"
}]
}]
});
You can find all here : https://jsfiddle.net/k0tx4qzv/

Categories