I'm pretty new to Angular. I am trying to implement a search page using star wars API but getting $scope in undefined. am not sure what am doing wrong here:
'use strict';
var app = angular.module('starApp');
/* Application controller (for top-level auth) */
app.controller('SearchController', ['$location', 'AuthenticationService',
'$scope', '$http',
function($location, AuthenticationService, $scope, $http) {
console.log('*** SearchController ***');
$scope.items = [];
(function getData() {
var apiURL = "https://swapi.co/api/planets";
axios.get(apiURL).then(function(response) {
showDetail(response.data);
});
})();
function showDetail(data) {
$scope.items = data.results;
}
}]);
I'm injecting $scope into my controller, but still it shows it is undefined.
You should use $http service. here is working snippet:
'use strict';
var app = angular.module('myApp',[]);
/* Application controller (for top-level auth) */
app.controller('SearchController', ['$location',
'$scope', '$http',
function($location, $scope, $http) {
console.log('*** SearchController ***');
$scope.items = [];
$scope.loading = false;
var apiURL = "https://swapi.co/api/planets";
$scope.loadData = function() {
$scope.loading = true;
$http.get(apiURL)
.then(function(response) {
$scope.showDetail(response.data);
$scope.loading = false;
});
};
$scope.loadData();
$scope.showDetail = function(data) {
$scope.items = data.results;
};
}
]
);
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="SearchController" ng-cloak>
<ul ng-if="items.length>0 && !loading" >
<li ng-repeat="item in items">{{item.name}}</li>
</ul>
<div ng-if="loading">Loading...</div>
</div>
Related
I have a factory:
myService:
'use strict';
app.factory('myService', ['$resource', 'ngAuthSettings', function ($resource, ngAuthSettings) {
var serviceBase = ngAuthSettings.apiServiceBaseUri;
return $resource(serviceBase + 'api/category/', {}, {
update: {
method: 'PUT'
},
getAllByCategory: {
url: serviceBase + 'api/category/GetAllByCategory',
method: 'GET', isArray: true
}
});
}]);
Then I have a controller:
searchController:
'use strict';
app.controller('searchController',
['ngAuthSettings', '$scope', 'myService', '$routeParams', '$location',
function (ngAuthSettings, $scope, myService, $routeParams, $location) {
function init() {
var search = $location.search();
var keywords = search.keywords;
var model = myService.getAllByCategory({ categoryId: 2, page: $routeParams.page });
$scope.categoryAds = model.ads;
$scope.bigTotalItems = model.totalCount;
$scope.maxSize = ngAuthSettings.maxPagingSize;
}
init();
}]);
Why my model.ads is always undefined? Isn't this the right way to call $resource custom method in controller?
As response may take some time but you are adding assignment very immediatly hence it happening put it in promise/action after resource,
'use strict';
app.controller('searchController', ['ngAuthSettings', '$scope', 'myService', '$routeParams', '$location',
function (ngAuthSettings, $scope, myService, $routeParams, $location) {
function init() {
var search = $location.search();
var keywords = search.keywords;
var model = myService.getAllByCategory({ categoryId: 2, page: $routeParams.page },
function() {
$scope.categoryAds = model.ads;
$scope.bigTotalItems = model.totalCount;
$scope.maxSize = ngAuthSettings.maxPagingSize;
}
);
}
init();
}
]);
Im using gulp-concat to merge all angular js files into one but after running gulp task i get this error in chrome console on runing application :
angular.js:13708Error: [ng:areq] http://errors.angularjs.org/1.5.7/ng/areq?p0=userboxController&p1=not%20a%20function%2C%20got%20undefined
my gulp task :
gulp.task('scripts', function () {
return gulp.src(['js/app/*.js', 'components/*/*/*.js'])
.pipe(concat('appscript.js'))
.pipe(minify())
.pipe(gulp.dest('./dist/js/'));
});
and gulp-concat merges dedicated angular js files into appscript.js like:
angular.module('app',[]);
angular
.module("app", [])
.controller("paymentCtrl", ['$scope', '$http', function ($scope, $http) {
$http.get('data/payments.json').then(function (payments) {
$scope.payments = payments.data;
});
$scope.saveEntity = function () {
console.info("goog");
}
}]);
angular
.module("app",[])
.controller("userboxController", ['$scope', '$http',function ($scope, $http, usersService) {
usersService.getCurrentUser().then(function (user) {
$scope.user = user.data;
});
}]);
angular
.module("app",[])
.controller("usersController",['$scope', '$http','usersService', function ($scope, $http, usersService) {
usersService.getAll().then(function (users) {
$scope.users = users.data;
});
}]);
angular
.module("app", [])
.directive('usersGrid', function () {
return {
templateUrl : 'components/users/template/grid.html'
}
});
what's wrong with angular?!!
This is not a merge related problem.
You are making app modules every time with
angular.module('app', [])
You have to initialise module only one place and you will be using same module every time with ~ [] brackets.
Please find the plunker here
var myApp = angular.module('app');
myApp.controller("paymentCtrl", ['$scope', '$http', function($scope, $http) {
$http.get('data/payments.json').then(function(payments) {
$scope.payments = payments.data;
});
$scope.saveEntity = function() {
console.info("goog");
}
}]);
myApp.controller("userboxController", ['$scope', '$http', function($scope, $http, usersService) {
$scope.user = 'abc';
}]);
myApp.controller("usersController", ['$scope', '$http', 'usersService', function($scope, $http, usersService) {
usersService.getAll().then(function(users) {
$scope.users = users.data;
});
}]);
myApp.directive('usersGrid', function() {
return {
templateUrl: 'components/users/template/grid.html'
}
});
I have been trying to send data from one controller to another. A little background this is code being used in an ionic application if that helps any. I want the to send the data from send() function to the SubCtrl. The send function is being called in MainCtrl. I have created a service for this but the data is still not being shared. What am I missing to complete this action?
var app = angular.module('testapp', []);
app.config(function($stateProvider, $urlRouterProvider) {
"use strict";
/* Set up the states for the application's different sections. */
$stateProvider
.state('page2', {
name: 'page2',
url: '/page2',
templateUrl: 'page2.html',
controller: 'MainCtrl'
})
.state('page3', {
name: 'page3',
url: '/page3',
templateUrl: 'page3.html',
controller: 'SubCtrl'
});
$urlRouterProvider.otherwise('/page2');
});
app.factory('dataShare', function($rootScope) {
var service = {};
service.data = false;
service.sendData = function(data) {
this.data = data;
$rootScope.$broadcast('data_shared');
console.log(data);
};
service.getData = function() {
return this.data;
};
return service;
});
app.controller('MainCtrl', function($scope, $state, $http, dataShare) {
$scope.text = 'food';
$scope.send = function() {
dataShare.sendData(this.text);
};
});
app.controller('SubCtrl', function($scope, $state, dataShare) {
"use strict";
var sc = this;
$scope.text = '';
$scope.$on('data_shared', function() {
var text = dataShare.getData();
sc.text = dataShare.data;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script id="page2.html" type="text/ng-template">
<div>{text}}</div>
<input type='text' ng-model='text' />
<button class="button button-outline button-royal" ng-click="send();">add</button>
</script>
<script id="page3.html" type="text/ng-template">
<div>text: {{text}}</div>
</script>
I was able to figure this issue out after reading this page. If anyone is having a similar issue I would encourage this reading. Also the video link on this post was really helpful.
Structure
statsController.js
(function (module) {
'use strict';
var statsController = function ($scope, $rootScope, $timeout, $routeParams, $location, $window, statsService) {
$scope.$on('$viewContentLoaded', function (event) {
$window.ga('send', 'pageview', { page: $location.url() });
});
var model = {};
model.stats = {};
statsService.getStats().then(function (d) {
model.stats = d;
});
};
module.controller("statsController", statsController);
}(angular.module("app")));
statsService.js
(function (app) {
var statsService = function (webapi) {
var model = {};
model.getStats = function () {
return webapi.get('stats/getstats');
}
return model;
};
app.factory("statsService", statsService);
statsService.$inject = ['webapi'];
}(angular.module("app")))
stats.html
Total paid customers: {{statsController.model.totalPaidCustomers}}<br/>
Stripe confirmed customers: {{statsController.model.stripeConfirmedCustomers}}<br />
Result from API:
{"totalPaidCustomers":1,"stripeConfirmedCustomers":2}
When I put alert() in statsController.js for d.totalPaidCustomers I get value 1, same for other parameter.
So only problem is to show this in html.
App.js
.when('/stats', {
templateUrl: 'tpl/admin/stats.html',
controller: 'statsController',
controllerAs: 'stats'
}).
If i understand correctly. It should be "model.stats"
Total paid customers: {{statsController.model.totalPaidCustomers}}
http://jsfiddle.net/f5hb9spz/8/
Try changing your state definition to this:
.when('/stats', {
templateUrl: 'tpl/admin/stats.html',
controller: 'statsController',
controllerAs: 'vm'
}).
Then change the controller to this:
(function (module) {
'use strict';
var statsController = function ($scope, $rootScope, $timeout, $routeParams, $location, $window, statsService) {
$scope.$on('$viewContentLoaded', function (event) {
$window.ga('send', 'pageview', { page: $location.url() });
});
var vm = this;
vm.model = {};
vm.model.stats = {};
statsService.getStats().then(function (d) {
vm.model.stats = d;
});
};
module.controller("statsController", statsController);
}(angular.module("app")));
Finally your view goes to this:
Total paid customers: {{vm.model.stats.totalPaidCustomers}}<br/>
Stripe confirmed customers: {{vm.model.stats.stripeConfirmedCustomers}}<br />
If you don't see anything then just put this in the view and see what you have:
{{ vm | json }}
Problem was I didn't assign the current scope to a model.
var model = this;
statsController.js
(function (module) {
'use strict';
var statsController = function ($scope, $rootScope, $timeout, $routeParams, $location, $window, statsService) {
$scope.$on('$viewContentLoaded', function (event) {
$window.ga('send', 'pageview', { page: $location.url() });
});
var model = this;
model.stats = {};
statsService.getStats().then(function (d) {
model.stats = d;
});
};
module.controller("statsController", statsController);
}(angular.module("app")));
Then call in html:
Total paid customers: {{stats.stats.totalPaidCustomers}}<br/>
Stripe confirmed customers: {{stats.stats.stripeConfirmedCustomers}}<br />
have to change name of var though(stats.stats), confused the hell out of me.
So I am experimenting with Angular. I created the following module.
var archiveModule = angular.module('archiveModule', ['ngResource']);
archiveModule.factory('Archive', ['$resource',
function($resource) {
return $resource('/data/archive/:doc.json', {}, {
query: { method:'GET', params:{ doc: undefined }, isArray:true }
});
}]);
archiveModule.controller('ArchiveControl', ['$scope', '$http', 'Archive',
function ($scope, Archive) {
$scope.items = Archive.query();
$scope.orderProp = 'name';
}]);
My template everything happens within:
<div class="container" ng-app="archiveModule">
<div ng-controller="ArchiveControl">
I include the angular scripts at the bottom of my page:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-resource.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.js"></script>
And Chrome reports TypeError: undefined is not a function, and it goes back to the line $scope.items = Archive.query();.
According to http://docs.angularjs.org/api/ngResource.$resource, query is part of $resource and I modeled my resource off http://docs.angularjs.org/tutorial/step_11 I'm not sure what's going wrong here.
Your parameters don't line up with the dependencies that are declared. It's injecting $http into Archive...
archiveModule.controller('ArchiveControl', ['$scope', '$http', 'Archive',
function ($scope, Archive) {
Remove '$http' and it should work...
archiveModule.controller('ArchiveControl', ['$scope', 'Archive',
function ($scope, Archive) {
$scope.items = Archive.query();
$scope.orderProp = 'name';
}]);