angularjs - my json file does not load in angular js? -
i have basic project in angular js, files
index.html
<div class="portfolio" ng-controller="portfolio-controller"> <h3>latest works</h3> <div class="col-md-6" ng-repeat="prt in portlist"> <div class="box-portfolio"> <div class="ps"> <div class="lp"><a href="#/{{ prt.id }}"><i class="fa fa-chevron-down"></i></a></div> </div> <div class="box-descrip"> <h4>{{prt.title}}</h4> <p>{{ prt.id }}</p> <p>{{prt.descrip}}</p> </div> <div class="back-sw"></div> <img ng-src="images/misc/{{prt.img}}" alt=""> </div> </div> </div>
controler.js --
var appstart = angular.module('apps', ['ngroute']) appstart.controller('portfolio-controller', function ($scope, $http){ $http.get('app/portfolio.json').success(function(data) { $scope.portlist = data; }); });
portfolio.json --
[ { id: "project_1", title: "project1", img: "work1.jpg", descrip: "lorem ipsum dolor sit amet, consectetur adipisicing elit. ipsam earu" }, { id: "project_2", title: "project2", img: "work2.jpg", descrip: "lorem ipsum dolor sit amet, consectetur adipisicing elit. ipsam earu" }, { id: "project_3", title: "project3", img: "work3.jpg", descrip: "lorem ipsum dolor sit amet, consectetur adipisicing elit. ipsam earu" }, { id: "project_4", title: "project4", img: "work4.jpg", descrip: "lorem ipsum dolor sit amet, consectetur adipisicing elit. ipsam earu" }, { id: "project_5", title: "project5", img: "work5.jpg", descrip: "lorem ipsum dolor sit amet, consectetur adipisicing elit. ipsam earu" }, { id: "project_6", title: "project6", img: "work6.jpg", descrip: "lorem ipsum dolor sit amet, consectetur adipisicing elit. ipsam earu" }
]
the issue angular not load json file in index.html, code in controller.js work fine
optional code
appstart.controller( 'portfolio-controller', ['$scope', function($scope){ $scope.portlist = [ { id: "project_1", title: "project1", img: "work1.jpg", descrip: "lorem ipsum dolor sit amet, consectetur adipisicing elit. ipsam earu" }, { id: "project_2", title: "project2", img: "work2.jpg", descrip: "lorem ipsum dolor sit amet, consectetur adipisicing elit. ipsam earu" }, { id: "project_3", title: "project3", img: "work3.jpg", descrip: "lorem ipsum dolor sit amet, consectetur adipisicing elit. ipsam earu" }, { id: "project_4", title: "project4", img: "work4.jpg", descrip: "lorem ipsum dolor sit amet, consectetur adipisicing elit. ipsam earu" }, { id: "project_5", title: "project5", img: "work5.jpg", descrip: "lorem ipsum dolor sit amet, consectetur adipisicing elit. ipsam earu" }, { id: "project_6", title: "project6", img: "work6.jpg", descrip: "lorem ipsum dolor sit amet, consectetur adipisicing elit. ipsam earu" } ] }] )
i don't know happened, use yeoman , gruntjs
you have misspelled name of file in $http call:
$http.get('app/ortfolio.json').success(function(data) {
should be:
$http.get('app/portfolio.json').success(function(data) {
if typo in question, please amend question , provide output of console log messages/errors, , confirm see request being made in network tab in chrome/firefox/etc.
Comments
Post a Comment