How To Debug an Angular 1 Application via DevTools

  • I’ll list a few important concepts, but for an in-depth tutorial on debugging JavaScript in the console I highly recommend reading through the DevTools documentation on you might set breakpoints to explore the code and check the value of variables mid-execution.
  • Recently, a friend asked me to help debug their Angular 1 application but I didn’t have immediate access to the source code and the deployed code was minified without source maps.
  • For illustration, here is the same statement executed against the Angular 1 TodoMVC app to list its controllers and providers:

    This snippet has come in handy many times.

  • Unlike providers, controllers are not registered on the application’s  instance.
  • To begin, select an element whose controller you want to inspect:

    Then via the console execute this line:

    Alternatively, you can use  to target an element and use the same code snippet:

    Once you’ve captured a reference to the controller for a particular element, you can inspect the scope and any properties attached to the controller itself and even explore up and down the scope tree to look for shadowed properties and explore child scopes.

The browser provides powerful tools for debugging web applications, including those built with Angular 1. I’ll list a few important concepts, but for an in-depth tutorial on debugging JavaScript in the console I highly recommend reading through the DevTools documentation on developers.google.com.
Continue reading “How To Debug an Angular 1 Application via DevTools”

Using multiple dependencies in an Angular.js application

  • Here’s the deal : we have a website which contains lots of pictures, and we want to “visualize” some data.
  • The way to go is using ZingChart (my favorite charting library) and a lazy loader (ing-src-ondemand) with our Angular.js app.The lazy loader will display (load) each picture only when they appear on the screen, via a scroll event.Those two features will add custom directives that can be used with our HTML template to bind the data from the controller (“ZingChart” will use a JSON file, and the lazy loader will take care of the pictures located in a $scope array).
  • To do this, we need to we download the libraries, available online we have them available on local (well, working with local files is, imho, better than depending on the CDN…), we have to load them from the HTML template :script we have to add those dependencies to our app.js file, which can be external, or attached just before the /body tag [‘zingchart-angularjs’, that’s it !
  • But I warn you : do not forget to load the libraries, or your app will not work at all, as the needed dependencies will be missing.

Continue reading “Using multiple dependencies in an Angular.js application”

Understanding Angularjs scope $rootScope and $scope

Understanding Angularjs scope $rootScope and $scope

  • Scope is the glue between Angularjs controller and view.
  • This scope object is used for data binding (2 way binding)  between view (HTML) and Angular controller.
  • When Angular scan the DOM and encounter ng-app it creates the root scope $rootScope.
  • Each controller will create separate child scope under the root scope.
  • When we have controller then there would be child scope under the $rootScope.

angularjs scope binds data between controller and view(HTML). For every application we have $rootScope and $scope as child scope.
Continue reading “Understanding Angularjs scope $rootScope and $scope”

Ng-ninja

  • But, in short, to create an Angular app you have to declare a root module.
  • In this case, “” will be the root of our Angular app.
  • All the magic of Angular lies in its “$scope” object.
  • Now go ahead and run your application in your favorite browser and pat yourself on your back for implementing an awesome Angular app.
  • This article explains you the simple steps you can follow to setup an AngularJS application.

Setup AngularJS and get running following these simple steps. Develop your first ‘Hello World’ app in AngularJS.
Continue reading “Ng-ninja”

Exchange Data Between Directive and Controller in AngularJS

  • The project required me to write a directive for a canvas, get the Base64 image data when a user draws on it, and make it available to the controller of the page which contains the directive.
  • This boils down to the fact that you need to access the scope of a Directive from a page Controller and access the scope of a page Controller from a Directive.
  • Now let’s say we have the following controller:

    And the following template:

    The problem: we would like to bind the count variable of myCtrl to the internalCount variable of the counter directive.

  • This can easily be solved by binding a variable from the controller to the scope of the directive.
  • Your directive should now look like this:

    And your template like this:

    You will find a working fiddle here with all the code to this quick tutorial on how to exchange data between a directive and controller in AngularJS.

In this Quick Tutorial we will look at How to Exchange Data Between Directive and Controller in AngularJS and bind the scopes to each other.
Continue reading “Exchange Data Between Directive and Controller in AngularJS”

I totally feel your pain. – JustGage – Medium

  • At the end of the day you can actually refactor things and know you didn’t break anything.
  • That’s priceless for any business that needs to “move fast and not break things.

I totally feel your pain. Reacts tooling is crazy. However I also think that Angular’s scopes and two way data binding quite bad as well. I would strongly encourage you to try out Elm! It’s easy to…
Continue reading “I totally feel your pain. – JustGage – Medium”

Intoduction to $apply() Function and the $digest Loop in angularjs

  • The expressions are a special type of directive that set up a watcher on models or functions—something we did in the last section.
  • After the function call ends, angularjs knows that some model changes might have occurred.
  • But what if the listener function of the watcher itself changes any model?
  • After calling the listener functions, the digest cycle starts all over again and fires each watcher to check if any of the models have been mutated in the last loop.
  • If any change is found, the corresponding listener is called as usual and, if none of the models have changed, the digest cycle ends.

Let’s take a look at a very simple AngularJS snippet where you start typing your name into an input field. There is also a div that shows what you typed,
Continue reading “Intoduction to $apply() Function and the $digest Loop in angularjs”