Here is my front-end code:
<div class="wrapper wrapper-content animated fadeIn text-center" ng-controller="ProjectCtrl">
<div class="row row-centered">
<div ng-repeat="project in _projects">
<div class="project-container col-lg-3 col-md-4 col-sm-6 col-centered text-center">
<div class="project-thumb-container">
<div class="project-thumb" style="background-image: url('img/project{{project.projectid}}.jpg');">
<div class="inner-arrow" ui-sref="portal.dashboard({ projectid: {{project.projectid}} })">
<span class="icon-arrow-right fa-5x"></span>
</div>
<div class="project-settings like-link">
<span class="fa fa-gear fa-2x" ng-click="open('test')"></span>
</div>
<div class="project-share like-link">
<span class="fa fa-users fa-2x" ng-click="open('test')"></span>
</div>
</div>
</div>
<h2>{{project.title}}</h2>
</div>
</div>
<div class="project-container col-lg-3 col-md-4 col-sm-6 col-centered text-center">
<div class="project-thumb-container">
<div class="project-thumb thumb-new">
<div class="plus-icon-container">
<span class="fa fa-plus fa-5x"></span>
</div>
</div>
</div>
<h4><i>Add Project</i></h4>
</div>
</div>
</div>
And here is my controller:
'use strict';
angular.module('controllers', ['Projects']).controller('ProjectCtrl', function($scope, Projects) {
var _self = this;
_self.error = null;
_self.processing = true;
Projects.getProjectList().then(function(data){
$scope._projects = data;
}).catch(function(err) {
_self.error = true;
_self.processing = false;
});
});
Here is my route:
.state('root.projects', {
url: "/projects",
controller: "ProjectCtrl as ProjectCtrl",
templateUrl: "views/projects.html",
})
When that code is ran on the front-end, I keep getting this error: Error: [ng:areq] Argument 'ProjectCtrl' is not a function, got undefined
Related
Is anyone help me, when I start to code to show data in blade with angularJS, data not showing in the page, even the data exists in the console. This following code in my app.js
// app.js
$scope.view_tab = 'shop1';
$scope.changeTab = function(tab) {
$scope.view_tab = tab;
}
// List product
$scope.loadProduct = function () {
$http.get('/getproduct').then(function success(e) {
console.log(e.data);
$scope.products = e.data.product;
$scope.totalProduct = $scope.products.length;
$scope.currentPage = 1;
$scope.pageSize = 9;
$scope.sortKey = 'id_kain';
};
//index.blade.php
<div class="shop-top-bar">
<div class="shop-tab nav">
<a ng-class="{'active': view_tab == 'shop1'}" ng-click="changeTab('shop1')" data-toggle="tab">
<i class="fa fa-table"></i>
</a>
<a ng-class="{'active': view_tab == 'shop2'}" ng-click="changeTab('shop2')" data-toggle="tab">
<i class="fa fa-list-ul"></i>
</a>
</div>
</div>
<div class="shop-bottom-area mt-35">
<div class="tab-content jump">
<div class="tab-pane" ng-class="{active: view_tab == 'shop1'}">
<div class="row">
<div ng-repeat="data in filtered = ( products | filter:search ) | orderBy:sortData | itemsPerPage: 9" class="col-xl-4 col-md-6 col-lg-6 col-sm-6">
<div class="product-wrap mb-25 scroll-zoom">
<div class="product-img">
<a ng-click="showForm(data)">
<img class="default-img" ng-src="#{{ data.gambar_kain[0].gambar_kain }}" alt="">
<img class="hover-img" ng-src="#{{ data.gambar_kain[1].gambar_kain }}" alt="">
</a>
</div>
<div class="product-content text-center">
<h3>#{{data.nama_kain}}</h3>
<div class="product-price">
<span>#{{numberingFormat(data.data_kain[0].harga_kain)}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" ng-class="{active: view_tab == 'shop2'}">
<div dir-paginate="datas in filtered = ( products | filter:search ) | orderBy:sortData | itemsPerPage:9" class="shop-list-wrap mb-30">
<div class="row">
<div class="col-xl-4 col-lg-5 col-md-5 col-sm-6">
<div class="product-wrap">
<div class="product-img">
<a ng-click="showForm(datas)">
<img class="default-img" ng-src="#{{ datas.gambar_kain[0].gambar_kain }}" alt="">
<img class="hover-img" ng-src="#{{ datas.gambar_kain[1].gambar_kain }}" alt="">
</a>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-7 col-md-7 col-sm-6">
<div class="shop-list-content">
<h3>#{{data.nama_kain}}</h3>
<div class="product-list-price">
<span>#{{numberingFormat(datas.data_kain[0].harga_kain)}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pro-pagination-style text-center mt-30">
<dir-pagination-controls
max-size="1"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
</div>
Data still not shows in the page, there are not errors in this page, but I don't know how can I fix this.
As I know there is two way to show data in Angular JS when you define the scopes then you need the ng-bind or ng-model to show data in the front end.
1- AngularJS Data Binding
live Example https://www.w3schools.com/code/tryit.asp?filename=G2DQQ2GSJ3EO
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname "></p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John will be change";
});
</script>
2-AngularJS ng-model Directive
Live Example https://www.w3schools.com/code/tryit.asp?filename=G2DQQEUEPSOC
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
NOTE: try with static data and then check that you have valid data to make it dynamic
I hope this helps you!
I have a problem with the repository list in the list of all Conributors for this repository.
I want to create a Contributors list in the list of repositories downloaded using GitHub Api. However, I can not get these data for each repository and put them in html.
Has anyone any idea how to do this?
Thank you in advance for your help
My code:
App in html
<div ng-controller="gitApi" ng-app="app">
<div class="container">
<h1 class="text-center">
<span ng-hide="userData" />Loading</span>
<span />{{userData.name}}</span>
<br>
<a href="{{userData.html_url}}" class="btn btn-default">
{{userData.login}}
</a>
</h1>
<div class="panel panel-default">
<div class="panel-heading">
<form class="form-inline">
<span>
<h4>Repos <span class="badge">{{repoData.length}}</span>
<input ng-model="searchText" placeholder="Search" class="form-control input-sm">
</h4>
</span>
</form>
</div>
<div class="panel-body">
<div class="list-group">
<div ng-repeat="orgs in orgsData | filter:searchText | orderBy:predicate:reverse" class="list-group-item ">
<div class="row">
<div class="col-md-6">
<h4>
<a href="{{repo.html_url}}" target="_blank">
{{orgs.name}}
</a>
<small>{{orgs.description}}</small>
</h4>
<small>
<a href="{{orgs.homepage}}" class="">
<i class="fa fa-link"></i> WebPage
</a>
</small>
</div>
<div class="col-md-6">
Conributors List:
<div ng-repeat=" | filter:searchText | orderBy:predicate:reverse" class="list-group-item ">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
APP.js
angular.module('app', [])
.controller('gitApi', ['$scope', '$http', function($scope, $http) {
$scope.reposLoaded = false;
$scope.userLoaded = false;
$scope.orgsLoaded = false;
$http.get("https://api.github.com/users/angular")
.success(function(data) {
$scope.userData = data;
loadOrgsRepos();
});
var loadOrgsRepos = function() {
$http.get("https://api.github.com/orgs/angular/repos")
.success(function(data) {
$scope.orgsData = data;
});
}
$scope.predicate = '-updated_at';
}]);
You can get all contributors url from contributors_url and make an API call for each one of these, storing the result in the original $scope.orgsData array :
"use strict";
var githubApp = angular.module('app', []);
githubApp.controller('gitApi', ['$scope', '$http', '$q', function($scope, $http, $q) {
$http.get("https://api.github.com/users/angular")
.success(function(data) {
$scope.userData = data;
loadOrgsRepos();
});
var loadOrgsRepos = function() {
$http.get("https://api.github.com/orgs/angular/repos")
.success(function(data) {
$scope.orgsData = data;
var contribs = [];
for (var i in data) {
contribs.push(data[i].contributors_url);
}
$q.all(contribs.map(function(item) {
return $http({
method: 'GET',
url: item
});
}))
.then(function(results) {
results.forEach(function(val, i) {
$scope.orgsData[i].contributors = val.data;
});
});
});
}
$scope.repo_sort = '-updated_at';
$scope.contrib_sort = '-contributions'
}]);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body id="page-top" class="index">
<div ng-controller="gitApi" ng-app="app">
<div class="container">
<h1 class="text-center">
<span ng-hide="userData">Loading</span>
<span>{{userData.name}}</span>
<br>
<a href="{{userData.html_url}}" class="btn btn-default">
{{userData.login}}
</a>
</h1>
<div class="panel panel-default">
<div class="panel-heading">
<form class="form-inline">
<span>
<h4>Repos <span class="badge">{{repoData.length}}</span>
<input ng-model="searchText" placeholder="Search" class="form-control input-sm">
</h4>
</span>
</form>
</div>
<div class="panel-body">
<div class="list-group">
<div ng-repeat="orgs in orgsData | filter:searchText | orderBy:repo_sort:reverse" class="list-group-item ">
<div class="row">
<div class="col-md-8">
<h4>
<a href="{{repo.html_url}}" target="_blank">
{{orgs.name}}
</a>
<small>{{orgs.description}}</small>
</h4>
<small>
<a href="{{orgs.homepage}}" class="">
<i class="fa fa-link"></i> WebPage
</a>
</small>
</div>
<div class="col-md-6">
Conributors List:
<div class="list-group-item">
<div class="row">
<div class="col-md-4">
name
</div>
<div class="col-md-4">
avatar
</div>
<div class="col-md-4">
contributions
</div>
</div>
</div>
<div ng-repeat="contrib in orgs.contributors | filter:searchText | orderBy:contrib_sort:reverse" class="list-group-item">
<div class="row">
<div class="col-md-4">
<a href="{{contrib.html_url}}" target="_blank">
{{contrib.login}}
</a>
</div>
<div class="col-md-4">
<img ng-src="{{contrib.avatar_url}}" height="42" width="42" />
</div>
<div class="col-md-4">
<p>
{{contrib.contributions}}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Here is another fiddle
I'm not able to share data between My Page & Modal Popup.
Exact Requirement.
I'm loading data through Services on my modal popup page. And the selected data on this Modal Popup should be displayed on Page when Modal is closed. It always return blank value though data is pushed.
Code is as below.
(function(){
'use strict';
angular.module('sspUiApp.controllers')
.service('AdUnitService', ['$http', 'API_URL', function($http, API_URL) {
var allAdFormats = [];
var selectedAdFormats = [];
$http.get( API_URL + '/ssp/adformat/all')
.then(function onSuccess(response) {
allAdFormats = response.data;
},
function onError(response) {
allAdFormats = [];
});
return {
setSelectedFormats: function(item) {
selectedAdFormats.push(item);
},
getSelectedAdFormats: function() {
return selectedAdFormats;
},
getAdFormats: function() {
return allAdFormats;
}
};
}]);
})();
My Both Controller
(function(){
'use strict';
angular.module('sspUiApp.controllers')
.controller('AdUnitFormatCtrl', function ($scope, $http, $state, AdUnitService) {
$scope.selectedAdUnit = AdUnitService.getSelectedAdFormats();
})
.controller('ModalDemoCtrl', function ($scope, $http, $state, AdUnitService, $uibModal) {
$scope.allAdFormats = AdUnitService.getAdFormats();
$scope.open = function (size) {
$scope.$modalInstance = $uibModal.open({
scope: $scope,
templateUrl: 'views/select_ad_format.html',
size: size,
});
};
$scope.cancel = function () {
$scope.$modalInstance.dismiss('cancel');
};
$scope.add = function (value) {
AdUnitService.setSelectedFormats(value);
};
});
})();
My Modal Html Page
<div class="ad-format-section" ng-controller="ModalDemoCtrl">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-2 col-xs-6 selectedAdFormatData" ng-repeat="frmt in allAdFormats.adformat">
<div ng-click="add(frmt)">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<img ng-src="../images/{{ frmt.ad_image }}" ng-if="frmt.ad_image"/>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<span class="formatName">{{ frmt.name }}</span>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<span class="resSize">{{ frmt.size }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
And Default Page
<div class="ad-units-section" ng-controller="AdUnitFormatCtrl">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 selectedAdUnitsData" ng-repeat="frmt in selectedAdUnit.adformat">
<div class="col-lg-1 col-md-1 col sm-6 col-xs-12 nopadding"><img ng-src="../images/{{ frmt.ad_image }}" ng-if="frmt.ad_image"/></div>
<div class="nopadding-left col-lg-3 col-md-3 col sm-6 col-xs-12"><span class="formatName">{{ frmt.name }}</span></div>
<div class="col-lg-2 col-md-1 col sm-6 col-xs-12 nopadding-right">
<span class="adType">{{ frmt.type }}</span>
</div>
<div class="col-lg-3 col-md-2 col sm-6 col-xs-12 nopadding">
<span class="floorPrice">{{ frmt.floor_price }}</span>
</div>
<div class="col-lg-1 col-md-5 col sm-6 col-xs-12 nopadding">
<span class="resSize">{{ frmt.size }}</span>
</div>
<div class="col-lg-2 col-md-5 col sm-6 col-xs-12 text-right nopadding">
<span class="spanBtnSetting"><input type="button" value="" class="btn btnSetting watchAd"></span>
<span class="spanBtnSetting"><input type="button" value="" class="btn btnSetting settingAd"></span>
<span class="spanBtnSetting"><input type="button" value="" class="btn btnSetting deleteAd"></span>
</div>
</div>
</div>
</div>
Thanks.
Try using factory instead of service.
angular.module('sspUiApp.controllers')
.factory('AdUnitService', ['$http', 'API_URL', function($http, API_URL) {
Right now you have 2 different instances of the service. When you inject the service dependency it creates a new instance of the service. Factories on the other hand create use the same instance when they get injected. That way you should be able to share your data between to 2 controllers.
Services
When declaring serviceName as an injectable argument you will be provided with an instance of the function. In other words new FunctionYouPassedToService().
Factories
When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.
Read more: AngularJS: Service vs provider vs factory
I have this directive
app.directive('fancybox', function($compile, $timeout){
return {
link: function($scope, element, attrs){
$(element).fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'width': '250',
'height': '250',
'speedIn': 600,
'speedOut': 200,
'overlayShow': false,
afterLoad: function () {
$timeout(function(){
$compile($("#content-popup"))($scope);
$scope.$apply();
$.fancybox.resize();
})
this.title = $(this.element).next('.content-popup-footer').html();
},
helpers: {
title: {
type: 'inside'
}
},
});
}
}
});
I'm trying to invoke a function that is inside the controller that invoked the fancybox. This is the html that i'm sending to the fancybox
<a href="{{content.source}}" fancybox="fancybox" id="content-popup"
class="transparent-box content-popup content-picture-container"
rel="campaign-picture-popup" "><a/>
<!--Fancybox footer data begin-->
<div class="content-popup-footer" style="display:none">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="content-popup-user-info">
<img class="content_picture_profile_pic"
ng-src="{{content.photographer.instagramProfilePicture}}"/>
<div class="content_popup_user_name">
{{content.photographer.instagramUserName}}
</div>
<i class="fa fa-circle small-dot"></i>
<span id="instagram-picture-time-taken">{{content.timeTaken}}</span>
</div>
</div>
<div class="col-md-6 col-sm-6 content_popup_link_container">
<div class="content_popup_link">
<i class="fa fa-link"></i>
View source
</div>
</div>
</div>
<div class="row" id="content-popup-picture-info-row">
<div class="col-md-12">
<p>{{content.description}}</p>
</div>
<div class="col-md-12" id="content-popup-statistics">
<span><i class="fa fa-thumbs-o-up"></i>{{content.likesCount}}</span>
<span><i class="fa fa-comment-o"></i>{{content.commentsCount}}</span>
</div>
</div>
<form role="form">
<div class="form-body">
<div class="form-group">
<div class="input-icon">
<i class="fa fa-pencil-square-o"></i>
<input id="name" type="text" class="form-control"
placeholder="Add caption">
</div>
</div>
</div>
</form>
<div>
<button class="btn select-content-btn"
ng-click="onSelectedContent(content)"
ng-style="content.selected && {'background-color':'#2ecc71'} || !content.selected && {'background-color':'#95a5a6'}">
<i class="fa fa-check" ng-if="content.selected"></i>
<span ng-if="!content.selected">Select</span>
<span ng-if="content.selected">Selected</span>
</button>
</div>
</div>
</div>
<!--Fancybox footer data end-->
The problem that the scope doesn't being recognized inside the fancybox window and i can't invoke the onSelectedContent().
How can i add the scope to the fancybox window so i could activate all the scope's functions and props?
Alright my AngularJS Mates.. I need saving. The following is my code. As you can see i'm trying to like pass the firebase data through states, unfortunately 'Offer' is only displaying as '[]' I think this is because i'm using a $firebaseObject, but i just cant crack this code...
(yeah I totally stole a part of this from Codepen)
Legit i would get your address and send you roses if you fixed this for me.
My Factory:
.factory('PetService', function ($firebaseArray, $firebaseObject) {
var ref = new Firebase("https://idargo.firebaseio.com/userData")
var offer = ref.child('Offer');
var pets = [];
for (var i=0; i<100; i++) {
pets[i] = {
id: i,
'Name': 'Name' + i,
'Offer': $firebaseObject(offer)
};
}
return {
all: function () {
return pets;
},
get: function (petId) {
return pets[petId];
}
};
})
DashCtrl:
.controller('DashCtrl', function($scope, $state, $stateParams, PetService) {
$scope.pets = PetService.all();
})
ProfileCtrl:
.controller('ProfileCtrl', function($stateParams, PetService) {
$scope.pet = PetService.get($stateParams.petsId);
})
The State:
.state('app.profile', {
url: "/profile/:petsId",
views: {
'menuContent': {
templateUrl: "routes/profile.html",
controller: 'ProfileCtrl',
}
}
})
The Collection-Repeat:
<div class="col" collection-repeat="pet in pets" item-width="45%" item-height="35%" ui-sref="app.profile({petsId: pet.id })">
The Profile Html:
<div ng-cloak>
<ion-view title="{{pet.id}}">
<div class="bar bar-header loginbar">
<button class="button button-icon ion-ios-arrow-left loginhead" ui-sref="app.dash"></button>
<h1 class="title"></h1>
</div>
<ion-content>
<div>
<center>
<div class="top2">
<div class="wrapperinv">
<div style="padding-top: 15%"></div>
<div class="numberCircle">
<div class="height_fix"></div>
<div class="content"><img src="{{pet.Image}}" class="invoiceimage"></div>
</div>
<div style="margin-top: -100px;"></div>
<div class="mincirc">
<div style="margin-top: 8px;"></div>
<div class="rotate"><i class="icon ion-ios-telephone-outline invi"></i></div>
</div>
<div class="mincirc2" ui-sref="app.chat">
<div style="margin-top: 8px;"></div>
<div class="rotate"><i class="icon ion-ios-chatbubble-outline invi" ></i></div>
</div>
<div style="margin-top: 100px;"></div>
<label class="sometext">{{pet.firstName}}</label>
<div style="margin-top: -50px;"></div>
<h3>
<i class="ion-star invstar invi"></i> <i class="ion-star invstar invi"></i>
<i class="ion-star invstar invi"></i> <i class="ion-star invstar invi"></i>
<i class="ion-star invstar invi"></i>
</h3>
</div>
</div>
</div>
</center>
<div style="margin-top: -10px;"></div>
<div class="list" >
<label class="item item-icon-left">
<i class="icon ion-earth"></i>
<h4 class="invf">Location</h4>
<div class="invtext">{{pet.Name}}</div>
</label>
<label class="item item-icon-left">
<i class="icon ion-calendar"></i>
<h4 class="invf">Age</h4>
<div class="invtext">{{pet.Age}}</div>
</label>
<label class="item item-icon-left" style="word-wrap: break-word; width: 350px;">
<i class="icon ion-person"></i>
<h4 class="invf">About me</h4>
<div class="invtext" >{{item.About}}</div>
</label>
<label class="item item-icon-left">
<i class="icon ion-pizza"></i>
<h4 class="invf" >What I offer</h4>
<div class="invtext">{{pet.Offer}}</div>
</label>
<label class="item item-icon-left">
<i class="icon ion-cash"></i>
<h4 class="invf">Rate</h4>
<div class="invtext">{{item.Rate}}</div>
</label>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d150038.30908416258!2d-74.00164182706976!3d40.64734690331712!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e1!3m2!1sen!2sau!4v1440975673055" width="400" height="300" frameborder="0" style="border:0"></iframe>
<button class="button button-block invbut" ng-click="invoice()">
Book With {{item.Name}}
</button>
</div>
</div>
</ion-content>
</ion-view>
</div>
Thanks in advance!
-Sorry if my English is bad... i'm from Australia.