ng-view does not get the data from href? - javascript

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>

Related

angularJS how to get index value on every row in table using ui-bootstrap pagination?

I'm using ui-bootstrap pagination, I use $index value to add a comment on every row it is working fine but on 2nd page and 3rd and so on $index value starts from 0 again. how to read index value on 2nd 3rd ... pages,
why it is taking from 0th index again in page 2 and so on. i'm passing index value in in textarea as well.
I have give code below.
var myApp = angular.module('myApp', ['ui.bootstrap'])
.controller('employeeController', function ($scope) {
var employees = [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
}, {
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
}, {
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
}, {
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}];
$scope.employees=employees;
$scope.showHideAddNotes = function (vendorsId, $index) {
$scope.comments = vendorsId;
angular.forEach($scope.employees, function (vendr) {
if (vendr.VendID == $scope.comments) {
$scope.showComment = true;
}
})
}
$scope.pageSize = 10;
$scope.currentPage = 1;
$scope.itemsPerPage = $scope.pageSize;
$scope.maxSize = 5; //Number of pager buttons to show
$scope.totalItems = $scope.employees.length;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function () {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.setItemsPerPage = function (num) {
$scope.itemsPerPage = num;
$scope.currentPage = 1; //reset to first page
}
$scope.showHideAddNotes = function (index) {
alert(index);
$scope.employees[index].showComment = !$scope.employees[index].showComment;
}
$scope.addNote = function (vendkey, index) {
var notes = APService.SaveVendorComment($('#txtVendorNote' + index).val(), vendkey).responseJSON;
$scope.employees[index].showComment = !$scope.employees[index].showComment;
}
})
.textarea-container {
position: relative;
}
.textarea-container textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="myApp">
<div ng-controller="employeeController">
<div class="container" style="margin-top:40px;">
<div class="row">
<div style="text-align: center">
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
<div class="col-md-12">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="emp in employees.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) ">
<td>{{emp.Name}}<br>
<div>
<a href="#" ng-click="showHideAddNotes($index)">
<img src="http://icongal.com/gallery/image/43850/notes_add.png" />
</a>
</div>
<div class="textarea-container" ng-model="commentsArea" ng-show="emp.showComment">
<div style="margin-bottom:5px;">
<textarea id="txtVendorNote{{$index}}" ng-modal="inputvendor" name="foo" placeholder="Add comments here..."></textarea>
</div>
<button class="btn btn-danger btn-sm" style="padding:2px 10px 2px 10px" ng-click="addNote(vendor.VendKey,$index)">Save</button>
</div>
</td>
<td>{{emp.City}}</td>
<td>{{emp.Country}}</td>
</tr>
</tbody>
</table>
</div>
<div style="text-align: center">
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
</div>
</div>
</div>
</body>

The $index is actually the index of visible elements. You can get the real index like this.
index += ($scope.currentPage - 1) * $scope.itemsPerPage;
Working Snippet:
var myApp = angular.module('myApp', ['ui.bootstrap'])
.controller('employeeController', function($scope) {
var employees = [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
}, {
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
}, {
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
}, {
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}];
$scope.employees = employees;
$scope.showHideAddNotes = function(vendorsId, $index) {
$scope.comments = vendorsId;
angular.forEach($scope.employees, function(vendr) {
if (vendr.VendID == $scope.comments) {
$scope.showComment = true;
}
})
}
$scope.pageSize = 10;
$scope.currentPage = 1;
$scope.itemsPerPage = $scope.pageSize;
$scope.maxSize = 5; //Number of pager buttons to show
$scope.totalItems = $scope.employees.length;
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.setItemsPerPage = function(num) {
$scope.itemsPerPage = num;
$scope.currentPage = 1; //reset to first page
}
$scope.showHideAddNotes = function(index) {
index += ($scope.currentPage - 1) * $scope.itemsPerPage;
alert(index);
$scope.employees[index].showComment = !$scope.employees[index].showComment;
}
$scope.addNote = function(vendkey, index) {
var notes = APService.SaveVendorComment($('#txtVendorNote' + index).val(), vendkey).responseJSON;
$scope.employees[index].showComment = !$scope.employees[index].showComment;
}
})
.textarea-container {
position: relative;
}
.textarea-container textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="myApp">
<div ng-controller="employeeController">
<div class="container" style="margin-top:40px;">
<div class="row">
<div style="text-align: center">
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
<div class="col-md-12">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) ">
<td>{{emp.Name}}<br>
<div>
<a href="#" ng-click="showHideAddNotes($index)">
<img src="http://icongal.com/gallery/image/43850/notes_add.png" />
</a>
</div>
<div class="textarea-container" ng-model="commentsArea" ng-show="emp.showComment">
<div style="margin-bottom:5px;">
<textarea id="txtVendorNote{{$index}}" ng-modal="inputvendor" name="foo" placeholder="Add comments here..."></textarea>
</div>
<button class="btn btn-danger btn-sm" style="padding:2px 10px 2px 10px" ng-click="addNote(vendor.VendKey,$index)">Save</button>
</div>
</td>
<td>{{emp.City}}</td>
<td>{{emp.Country}}</td>
</tr>
</tbody>
</table>
</div>
<div style="text-align: center">
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
</div>
</div>
</div>
</body>

var app = angular.module("myApp", ["ui.bootstrap"]);
app.controller("MainCtrl", function($scope) {
var allData =
[your data goes here];
$scope.totalItems = allData.length;
$scope.currentPage = 1;
$scope.itemsPerPage = 5;
$scope.$watch("currentPage", function() {
setPagingData($scope.currentPage);
});
function setPagingData(page) {
var pagedData = allData.slice(
(page - 1) * $scope.itemsPerPage,
page * $scope.itemsPerPage
);
$scope.aCandidates = pagedData;
}
});
<link data-require="bootstrap-css#*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<table id="mytable" class="table table-striped">
<thead>
<tr class="table-head">
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in aCandidates">
<th>
<div>{{person}}</div>
</th>
</tr>
</tbody>
</table>
<uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></uib-pagination>
</div>
</div>

Angular-ui router nested sub sub state

Using angular-ui router with lazyload on Angular 1.5:
My JS code is like:
$stateProvider
.state('app', {
url: "/",
views: {
'#': {
templateUrl: 'layout.html',
controller: 'AppCtrl'
},
'sidebar#app': { templateUrl: 'app/modules/sidebar/views/sidebar.html' },
'header#app': { templateUrl: 'app/modules/header/views/header.html' },
'main#app': { templateUrl: 'app/modules/home/views/home.html' },
'footer#app': { templateUrl: 'app/modules/footer/views/footer.html' }
},
resolve: {
trans: ['RequireTranslations',
function(RequireTranslations) {
RequireTranslations('general');
RequireTranslations('sidebar');
RequireTranslations('home');
RequireTranslations('footer');
RequireTranslations('header');
}
],
dep: ['trans', '$ocLazyLoad',
function(trans, $ocLazyLoad) {
return $ocLazyLoad.load(['ui-bootstrap']).then(
function() {
return $ocLazyLoad.load(['app/shared/controllers/AppCtrl.js']);
}
);
}
]
}
})
.state('app.shares', {
url: "shares",
views: {
'main#app': {
controller: 'ShareCtrl',
templateUrl: "app/modules/shares/views/shares.html",
},
},
resolve: {
trans: ['RequireTranslations',
function(RequireTranslations) {
RequireTranslations('shares');
}
],
dep: ['trans', '$ocLazyLoad',
function(trans, $ocLazyLoad) {
return $ocLazyLoad.load(['app/modules/shares/controllers/ShareCtrl.js']);
}
]
}
})
.state('app.portfolio', {
url: "portfolio",
views: {
'main#app': {
controller: 'PortfCtrl',
templateUrl: "app/modules/portfolio/views/portfolio.html",
},
'tabs#app.portfolio': {
controller: 'TitleCtrl',
templateUrl: "app/modules/titlegraph/views/title.html",
}
},
resolve: {
trans: ['RequireTranslations',
function(RequireTranslations) {
RequireTranslations('portfolio');
}
],
dep: ['trans', '$ocLazyLoad',
function(trans, $ocLazyLoad) {
return $ocLazyLoad.load(['app/modules/portfolio/controllers/PortfCtrl.js', 'app/modules/titlegraph/controllers/TitleCtrl.js']);
}
]
}
})
index.html:
<body id="mainbody" lang="{{currentLanguage}}">
<div class="text-center preloader" ng-show="loader">
<span>Loading...</span>
</div>
<!-- <div class="text-center preloader" ng-show="transLoader">
<span>Initialize language...</span>
</div> -->
<div ui-view></div>
<!-- end #container -->
<!-- <script id="ft-script" src="assets/js/dist.js"></script> -->
</body>
layout.html:
<div id="wrapper" ng-class="wrapper" class="wrapper">
<div ui-view="sidebar"></div>
<div id="page-content-wrapper">
<div ui-view="header"></div>
<!-- main app content ui-view include -->
<div ui-view="main"></div>
<div ui-view="footer"></div>
</div>
</div>
portfolio.html:
<div class="portfolio">
<uib-tabset>
<div class="container">
<div class="row">
<div class="col-xs-6">
<h2>{{'pwc.st.portfolio.title' | translate}}</h2>
<button ui-sref="app.shares" class="orange-btn prt-btn">{{'pwc.st.portfolio.btn' | translate}}</button>
</div>
<div class="col-xs-6">
<!-- {{'pwc.st.portfolio.tab.title1' | translate}} -->
<div ui-view="tabs"></div>
</div>
</div>
</div>
</uib-tabset>
</div>
The problem is I can't get the title html, being render inside portfolio.html. what possibly I'm doing wrong?
Tnks for the help.

json not working in Angular

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>

Having trouble getting json data into angular app

I'm working on a project that requires JSON data to be rendered to a page via client side technology. I currently have the grid of card layouts that I want to display the data in however, I'm having trouble getting the data onto the page with out breaking the app.
Here is my current App.js File Lines 33-35 are where I am experiencing my errors.
'use strict';
/**
* #ngdoc overview
* #name peapodTestApp
* #description
* # peapodTestApp
*
* Main module of the application.
*/
angular
.module('peapodTestApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
resolve: {
users:['$http',function($http){
return $http.get('/api/users.json').then(function(response){
return response.data;
});
}];
}
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.otherwise({
redirectTo: '/'
});
});
Here is the main.js file for the app
'use strict';
/**
* #ngdoc function
* #name peapodTestApp.controller:MainCtrl
* #description
* # MainCtrl
* Controller of the peapodTestApp
*/
angular.module('peapodTestApp')
.controller('MainCtrl', function () {
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma',
'ngMaterial'
];
});
And the main.html file for the app
<header class="header">
<h3 class="text-center">User Directory</h3>
</header>
<div class="container">
<div class="row">
<div class="col-md-6">
<flippy
class="fancy"
flip="['click']"
flip-back="['click']"
duration="800"
timing-function="ease-in-out">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card with image</span>
<span class="md-subhead">Small</span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-sm card-media"></div>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<button ng-click="bool=true">Button</button>
</md-card-actions>
</md-card>
</div>
</flippy>
<div class="col-md-6">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card with image</span>
<span class="md-subhead">Small</span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-sm card-media"></div>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
</md-card-actions>
</md-card>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card with image</span>
<span class="md-subhead">Small</span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-sm card-media"></div>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
</md-card-actions>
</md-card>
</div>
<div class="col-md-6">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card with image</span>
<span class="md-subhead">Small</span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-sm card-media"></div>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
</md-card-actions>
</md-card>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card with image</span>
<span class="md-subhead">Small</span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-sm card-media"></div>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
</md-card-actions>
</md-card>
</div>
<div class="col-md-6">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card with image</span>
<span class="md-subhead">Small</span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-sm card-media"></div>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
</md-card-actions>
</md-card>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card with image</span>
<span class="md-subhead">Small</span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-sm card-media"></div>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
</md-card-actions>
</md-card>
</div>
<div class="col-md-6">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card with image</span>
<span class="md-subhead">Small</span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-sm card-media"></div>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
</md-card-actions>
</md-card>
</div>
</div>
</div>
</div>
</div>
<div class="row marketing">
<h4>HTML5 Boilerplate</h4>
<p>
HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
</p>
<h4>Angular</h4>
<p>
AngularJS is a toolset for building the framework most suited to your application development.
</p>
<h4>Karma</h4>
<p>Spectacular Test Runner for JavaScript.</p>
</div>
To make the picture a bit clearer as to what I'm experiencing, here are some screen shots of the project.
The first is what happens when the lines from App.js 33-35 are not present
The second displays what happens after placing lines 33-35 in App.js Along with the errors from the console.
Please bear in mind that used the Yeoman scaffolding tool to build the boilerplate for the app, so if there are other files needed to help gather information about the problem please kindly let me know.
Thanks
Update I now only receive a
angular.js:11630 GET http://localhost:9000/api/users.json 404 (Not
Found)
Since removing a semicolon from from the end of the array
Update I've gotten all of the data in, it shows on the screen, I now wish to add a modal to the project. I currently have a button with a listener that produces an alert when pressed (This was just a test to make sure it works.) I'm having trouble understanding where to add the modal code though...each time I do, it breaks the app.
Here is the mainCtrl (main.js) portion of the project
'use strict';
/**
* #ngdoc function
* #name peapodTestApp.controller:MainCtrl
* #description
* # MainCtrl
* Controller of the peapodTestApp
*/
angular.module('peapodTestApp')
.controller('MainCtrl', function ($scope,UserService,$uibModal) {
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma',
'ngMaterial'
];
$scope.users = UserService;
$scope.animationsEnabled = true;
$scope.open = function(size){
var modalInstance = $uibModal.open({
animation:$scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller:'modalInstanceCtrl',
size:size,
resolve:{
items: function(){
return $scope.users;
}
}
});
modalInstance.result.then(function(selectedUser){
$scope.selected = selectedUser;
})
}
})
.service('UserService',function(){
var user = [{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere#april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998­3874",
"geo": {
"lat": "­37.3159",
"lng": "81.1496"
}
},
"phone": "",
"website": "hildegard.org",
"company": {
"name": "Romaguera­Crona",
"catchPhrase": "Multi­layered client­server neural­net",
"bs": "harness real­time e­markets"
}
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna#melissa.tv",
"address": {
"street": "Victor Plains",
"suite": "Suite 879",
"city": "Wisokyburgh",
"zipcode": "90566­7771",
"geo": {
"lat": "­43.9509",
"lng": "­34.4618"
}
},
"phone": "010­692­6593 x09125",
"website": "anastasia.net",
"company": {
"name": "Deckow­Crist",
"catchPhrase": "Proactive didactic contingency",
"bs": "synergize scalable supply­chains"
}
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan#yesenia.net",
"address": {
"street": "Douglas Extension",
"suite": "Suite 847",
"city": "McKenziehaven",
"zipcode": "59590­4157",
"geo": {
"lat": "­68.6102",
"lng": "­47.0653"
}
},
"phone": "",
"website": "ramiro.info",
"company": {
"name": "Romaguera­Jacobson",
"catchPhrase": "Face to face bifurcated interface",
"bs": "e­enable strategic applications"
}
},
{
"id": 4,
"name": "Patricia Lebsack",
"username": "Karianne",
"email": "Julianne.OConner#kory.org",
"address": {
"street": "Hoeger Mall",
"suite": "Apt. 692",
"city": "South Elvis",
"zipcode": "53919­4257",
"geo": {
"lat": "29.4572",
"lng": "­164.2990"
}
},
"phone": "493­170­9623 x156",
"website": "kale.biz",
"company": {
"name": "Robel­Corkery",
"catchPhrase": "Multi­tiered zero tolerance productivity",
"bs": "transition cutting­edge web services"
}
},
{
"id": 5,
"name": "Chelsey Dietrich",
"username": "Kamren",
"email": "Lucio_Hettinger#annie.ca",
"address": {
"street": "Skiles Walks",
"suite": "Suite 351",
"city": "Roscoeview",
"zipcode": "33263",
"geo": {
"lat": "­31.8129",
"lng": "62.5342"
}
},
"phone": "(254)954­1289",
"website": "demarco.info",
"company": {
"name": "Keebler LLC",
"catchPhrase": "User­centric fault­tolerant solution",
"bs": "revolutionize end­to­end systems"
}
},
{
"id": 6,
"name": "Mrs. Dennis Schulist",
"username": "Leopoldo_Corkery",
"email": "Karley_Dach#jasper.info",
"address": {
"street": "Norberto Crossing",
"suite": "Apt. 950",
"city": "South Christy",
"zipcode": "23505­1337",
"geo": {
"lat": "­71.4197",
"lng": "71.7478"
}
},
"phone": "",
"website": "ola.org",
"company": {
"name": "Considine­Lockman",
"catchPhrase": "Synchronised bottom­line interface",
"bs": "e­enable innovative applications"
}
},
{
"id": 7,
"name": "Kurtis Weissnat",
"username": "Elwyn.Skiles",
"email": "Telly.Hoeger#billy.biz",
"address": {
"street": "Rex Trail",
"suite": "Suite 280",
"city": "Howemouth",
"zipcode": "58804­1099",
"geo": {
"lat": "24.8918",
"lng": "21.8984"
}
},
"phone": "210.067.6132",
"website": "elvis.io",
"company": {
"name": "Johns Group",
"catchPhrase": "Configurable multimedia task­force",
"bs": "generate enterprise e­tailers"
}
},
{
"id": 8,
"name": "Nicholas Runolfsdottir V",
"username": "Maxime_Nienow",
"email": "Sherwood#rosamond.me",
"address": {
"street": "Ellsworth Summit",
"suite": "Suite 729",
"city": "Aliyaview",
"zipcode": "45169",
"geo": {
"lat": "­14.3990",
"lng": "­120.7677"
}
},
"phone": "586.493.6943 x140",
"website": "jacynthe.com",
"company": {
"name": "Abernathy Group",
"catchPhrase": "Implemented secondary concept",
"bs": "e­enable extensible e­tailers"
}
},
{
"id": 9,
"name": "Glenna Reichert",
"username": "Delphine",
"email": "Chaim_McDermott#dana.io",
"address": {
"street": "Dayna Park",
"suite": "Suite 449",
"city": "Bartholomebury",
"zipcode": "76495­3109",
"geo": {
"lat": "24.6463",
"lng": "­168.8889"
}
},
"phone": "(775)976­6794 x41206",
"website": "conrad.com",
"company": {
"name": "Yost and Sons",
"catchPhrase": "Switchable contextually­based project",
"bs": "aggregate real­time technologies"
}
}
];
return user;
})
And here is the view for that controller which uses an ng-click to get the open().
<md-scroll-shrink><header layout="row" layout-xs="column" class="header">
<h3 class="text-center">User Directory</h3>
</header>
</md-scroll-shrink>
<div layout="row" layout-md="column">
<div flex>
<md-card id="card" ng-repeat="user in users">
<md-card-title>
<md-card-title-text>
<span class="md-headline">{{user.username}}</span>
<span class="md-subhead">{{user.email}}</span>
</md-card-title-text>
<md-card-title-media>
<span ngclass="glyphicon glyphicon-earphone"></span>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<button ng-click="open()" class="btn btn-success">More Info</button>
</md-card-actions>
</md-card>
</div>
</div>
Again, thanks for any help that is given.

You aren't using the user data anywhere so you don't need that resolve code. Normally it would go inside of you .when function.
'use strict';
/**
* #ngdoc overview
* #name peapodTestApp
* #description
* # peapodTestApp
*
* Main module of the application.
*/
angular
.module('peapodTestApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.otherwise({
redirectTo: '/'
});
});

I have done similar work before. You can check. That might help.
app.config(function ($routeProvider) {
$routeProvider
.when('/landingpage', {
templateUrl: 'app/views/landingPage.html',
controller: 'landingCtrl'
})
.when('/home', {
templateUrl: 'app/views/homePage.html',
controller: 'homeCtrl',
resolve: {
app: function ($q, $location, $localStorage) {
var defer = $q.defer();
if ($localStorage.cbToken == undefined) {
$location.path('/landingpage');
}
defer.resolve();
return defer.promise;
}
}
})
.otherwise({
redirectTo: '/landingpage'
});
})

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');

Categories