AngularJS : The correct way of binding to a service properties

Consider some pros and cons of the second approach: 0 {{lastUpdated}} instead of {{timerData.lastUpdated}}, which could just as easily be {{timer.lastUpdated}}, which I might argue is more readable (but let’s not argue… I’m giving this point a neutral rating so you decide for yourself) +1 It may be convenient that the controller acts as a … Read more

How to wait till the response comes from the $http request, in angularjs?

You should use promises for async operations where you don’t know when it will be completed. A promise “represents an operation that hasn’t completed yet, but is expected in the future.” (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise) An example implementation would be like: myApp.factory(‘myService’, function($http) { var getData = function() { // Angular $http() and then() both return promises themselves … Read more

How do I configure different environments in Angular.js?

I’m a little late to the thread, but if you’re using Grunt I’ve had great success with grunt-ng-constant. The config section for ngconstant in my Gruntfile.js looks like ngconstant: { options: { name: ‘config’, wrap: ‘”use strict”;\n\n{%= __ngModule %}’, space: ‘ ‘ }, development: { options: { dest: ‘<%= yeoman.app %>/scripts/config.js’ }, constants: { ENV: … Read more

How can I test an AngularJS service from the console?

TLDR: In one line the command you are looking for: angular.element(document.body).injector().get(‘serviceName’) Deep dive AngularJS uses Dependency Injection (DI) to inject services/factories into your components,directives and other services. So what you need to do to get a service is to get the injector of AngularJS first (the injector is responsible for wiring up all the dependencies … Read more

Angularjs: Error: [ng:areq] Argument ‘HomeController’ is not a function, got undefined

This creates a new module/app: var myApp = angular.module(‘myApp’,[]); While this accesses an already created module (notice the omission of the second argument): var myApp = angular.module(‘myApp’); Since you use the first approach on both scripts you are basically overriding the module you previously created. On the second script being loaded, use var myApp = … Read more

Creating common controller functions

The way to define common code in angular is through Services. You would define a new service like so : .factory(‘CommonCode’, function ($window) { var root = {}; root.show = function(msg){ $window.alert(msg); }; return root; }); In your controller you would inject this service..like so function MainAppCtrl($scope,CommonCode) { $scope.alerter = CommonCode; $scope.alerter.show(“Hello World”); } Just … Read more

Cordova + Angularjs + Device Ready

Manually bootstrap your Angular app: Remove your ng-app attribute from your HTML code, so Angular doesn’t start itself. Add something like this to you JavaScript code: document.addEventListener(“deviceready”, function() { // retrieve the DOM element that had the ng-app attribute var domElement = document.getElementById(…) / document.querySelector(…); angular.bootstrap(domElement, [“angularAppName”]); }, false); Angular documentation for bootstrapping apps.

AngularJS : Factory and Service? [duplicate]

Service vs Factory The difference between factory and service is just like the difference between a function and an object Factory Provider Gives us the function’s return value ie. You just create an object, add properties to it, then return that same object.When you pass this service into your controller, those properties on the object … Read more

Injecting a mock into an AngularJS service

You can inject mocks into your service by using $provide. If you have the following service with a dependency that has a method called getSomething: angular.module(‘myModule’, []) .factory(‘myService’, function (myDependency) { return { useDependency: function () { return myDependency.getSomething(); } }; }); You can inject a mock version of myDependency as follows: describe(‘Service: myService’, function … Read more