Search This Blog

AngularJS Tutorial: AngularJS Controller As Syntax

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 variable name for an instance of the controller; vm stands for ViewModel but a more meaningful name can be used and we’ll talk about it later. Second, when we use double curly braces or the ng-model directive, we use vm.myModel to access to the variable defined in the controller. The following snippet shows how a controller using Controller As syntax looks like.

It differs from the version using $scope; we don’t pass the $scope variable to our controller, so there is also no necessity to add code that copes with minification. Also, we create the vm variable and store the value of this it it to prevent future problems when working with this. The most important point here that all the variables and methods are created inside the vm object; this helps to clear scope from our data and methods. The visualization of AngularJS scopes obtained by Batarang is shown in the following picture.

The fact that we don’t pass $scope to our controller doesn’t mean that it is impossible. In fact, $scope has useful methods and if we decide to use them we can pass $scope to our controller. The idea is to store everything we create in a special vm object. To stress once again how Controller As syntax is used by AngularJS I’ll show you an example of a controller’s test that relies on it.

Now we create a new $scope using $rootScope in order to rely on JavaScript prototypal inheritance and use scope methods. Also, we obtain the aforementioned root scope inside beforeEach method and use Controller As syntax to obtain an instance of our HelloController from the $controller() function. Finally, inside the it() method, we obtain our data using scope.

A more succinct version of the controller’s test that doesn’t rely on AngularJS scope is shown below.

After we’ve refactored our code, we could make sure that we haven’t broken anything and this could be accomplished using Protractor. A single problem is that we extract some elements by their model but now it is vm.myModel, not myModel. After ironing out this wrinkle launching Protractor e2e tests should end up in success.

AngularJS Nested Scopes

After we’ve introduced AngularJS Controller As syntax, it’s high time to see how it helps solve the nested scope problem. The HTML snippet below shows how to use the syntax in this case. While it’s possible to name each controller as vm because each of the controllers attached to a different scope, we use more clear names for controllers to prevent name collisions.

The code for controllers is similar to the above one for HelloController and can be found here. The scopes look like in the pictures below. The first is for the parent scope.

And the second one is for the child scope.

Testing is done in the similar way to the HelloController and test examples can be found here. Also, is we talk about end-to-end testing using Protractor, it is easier to extract elements by their model because the latter contains the name of the controller, so we don’t need to manipulate arrays of elements with the same model name.

Summary

In this tutorial we learned how to use AngularJS Controller As syntax. In the next post we’ll talk about AngularJS components introduced by version 1.5.

We'll begin with adding parameters of database connection including credentials, connection URI and database driver name to the application's configuration file. The snippet below shows how to configure the database connection.

MySQL RDBMS was used for our example, but some other DBMS can be used. As we'll use Hibernate to talk to our database, switching databases is a snap, it's only necessary to change t…

Here is a link to my Getting Started with Dropwizard course on Udemy. Only $10! In the previous installment of this series we discussed how to create a Dropwizard project using Maven archetype as well as how to create a simple RESTful API and access it. API security is an important topic and today we'll discuss how to use authentication and HTTPS with Dropwizard. Also, the problem of configuring Dropwizard applications will be touched. All the code for the examples below can be found here.

Authentication

Basic Authentication is a simplest way to secure access to a resource. It boils down to transmitting a base64-encoded column-separated pair of user-ID and password using Authorize HTTP header. If a non-authenticated client tries to access a protected resource, the server prompts the client to provide credentials, that is the aforementioned pair. Otherwise, client may supply the credentials without any prompt from the server. This authentication scheme is a non-secure one as it uses u…

Here is a link to my Getting Started with Dropwizard course on Udemy. Only $10! Dropwizard is a bunch of superb frameworks glued together to provide a fast way of building web applications including REST APIs. We'll talk about great frameworks which are parts of Dropwizard as we go over our examples. The full code for the examples can be obtained here. The simplest way to create a Dropwizard project is to use the Maven archetype called java-simple which is a part of Dropwizard. This can be accomplished either via the command line or using your favorite IDE. Let's stick to the former approach. The command below is formatted for clarity but it should be pasted as a single line to the terminal.

After the project was created it can be modified using an editor or opened in an IDE. All the three IntelliJ, Eclipse and Netbeans have Maven support. An important parameter to note in the pom.xml file of the newly created project is dropwizard.version, which at the time of writing was autom…

Dmitry Noranovich has been programming since 1993 when he learned C language to produce code to carry out computations for his research. Since then he has used C++ and Java for this purpose and as well taught an extracurricular computational physics course in a big university in south Russia. His experience also includes teaching general physics at university level. Besides Java, which is his primary programming language, Dmitry is dabbling in Angular.js and Bootstrap and is passionate about everything concerning REST APIs.
Dmitry is a technology enthusiast and lifelong learner, so he periodically takes MOOCs in computer science and likes to think that someday he will produce one and also tries to learn something new on his own. When he doesn't work, he spends time with his wife and two kids. Should he have spare time, he prefers to spend it hiking or with his Kindle.
Dmitry teaches a Getting Started with Dropwizard course on Udemy (https://www.udemy.com/getting-started-with-dropwizard/?couponCode=blog10).