Posts

Showing posts with the label controller

AngularJS Tutorial: AngularJS Controller As Syntax

Image
Introduction to AngularJS Controller As Syntax In the previous installment of this series we discussed scopes and what problems nested scopes can cause. There are a couple of solutions to this problem: the so-called Controller As syntax introduced by AngularJS 1.2 and .component() method introduced by AngularJS 1.5. The latter option is a recommended way to go if you are thinking about upgrading your application to newer Angular versions. In this post we’ll talk about AngularJS Controller As syntax. As was mentioned previously, when we instruct Angular to use a controller with the ng-controller directive, a new instance of a controller and a child scope is created. Alternatively, the same directive but with a different syntax can be used to create a controller and to attached it to a newly-created scope as the snippet below shows. The differences are that, first, in the ng-controller directive we not only pass the name of the registered controller, but also, a variabl...

AngularJS Tutorial: Introduction to AngularJS Scopes

Image
Introduction to AngularJS Scopes In the previous tutorial of this series we learned how to test controllers using Jasmine and Karma. In this post we discussed how data is passed from controller to view using $scope , which is the glue that links model and view. In this tutorial we’ll talk more about scopes, what are some possible pitfalls in using them, and later we’ll talk about the ways to overcome possible problems, as well as get over Batarang, a Chrome extension from AngularJS team, which can be used to analyze scopes inside an AngularJS application. By adding the ng-app directive to some HTML tag we specify that an AngularJS will be created and in the process of application creation Angular creates the so-called root scope . Some other directives such as ng-controller create a child scope. To visualize scopes one can use a Google Chrome extension called Batarang . The picture below shows the root scope for the AngularJS application and the child scope created by Hell...