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.


Resources

Comments

  1. Angular 2 is an open source JavaScript framework to build web applications in HTML and JavaScript and has been conceived as a mobile first approach.

    You should have a basic understanding of JavaScript and any text editor. As we are going to develop web-based applications using Angular 2, it will be good if you have an understanding of other web technologies such as HTML, CSS, AJAX, AngularJS etc.

    Read more: AngularJS Training and Tutorial

    ReplyDelete
  2. Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ..Best Angularjs Training in Chennai|Angularjs Training in Chennai

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. 9643950605 Croma Campus is one of the best Angularjs Training in Noida with 100% situation ensures. Croma Campus has very much characterized course modules and instructional meetings for understudies and Weekend classes, evening clump classes with live venture by industry master In Noida.

    ReplyDelete
  5. nice post for sharing angularjs article. its really helpful for me.keep shring on updated angularjs tutorials????????????????

    ReplyDelete
  6. I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in ANGULAR JS, kindly contact us http://www.maxmunus.com/contact
    MaxMunus Offer World Class Virtual Instructor led training on ANGULAR JS. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
    For Demo Contact us.
    Nitesh Kumar
    MaxMunus
    E-mail: nitesh@maxmunus.com
    Skype id: nitesh_maxmunus
    Ph:(+91) 8553912023
    http://www.maxmunus.com/




    ReplyDelete

  7. Come and read us!! We are moving our blog into a new site with a much more pretentious goal. We are going to teach how to be AngularJS Ninjas!!! That's right! We have taken a couple of weeks to prepare our free workshop, absolutely free!!!!
    AngularJS Training Institute in Chennai

    ReplyDelete
  8. I think the famous on this site content post is really well. And I am read the most of the satisfied has useful for my Carrier.Thanks for this valuable knowledge.Any notice is commands like to share him.
    Selenium Training in Chennai
    angularjs 2 training in chennai

    ReplyDelete
  9. Usually I do not read post on blogs, but I would like to say that this write-up very forced me to try and do it! Your writing style has been surprised me. Great work admin..Keep update more blog..
    Architects in Chennai

    ReplyDelete
  10. Helpful post. As a beginner, I have learned so many things about AngularJS through your blog. Keep on sharing.
    Regards,
    AngularJS Training | AngularJS Training in Chennai | AngularJS course in Chennai

    ReplyDelete
  11. Nice blog. yo provide a very nice information with screenshots.It will easily follow the steps to finishing the project. Iam really very happy to read this blog.Thanks for sharing.keep sharing more blogs.

    Angularjs Online Training

    ReplyDelete
  12. Nice blog. yo provide a very nice information with screenshots.It will easily follow the steps to finishing the project. Iam really very happy to read this blog.Thanks for sharing.keep sharing more blogs.

    Angularjs Online Training

    ReplyDelete
  13. AngularJS Training in Chennai with highly experienced Professionals. Credo Systemz is the best place to learn AngularJS Training in Chennai. We are also Ranked No.1 AngularJS Training Institute in Chennai, Velachery according to the reviews across the Internet. AngularJS Training in Chennai offering at Credo Systemz is purely job oriented with real-time projects.

    Read More: http://www.credosystemz.com/training-in-chennai/best-angularjs-training-in-chennai/

    ReplyDelete


  14. I Visited lot of blogs and Web sites But in this AngularJS Blog Information is Very usefulthanks for sharing it........

    ReplyDelete
  15. Online mba in India
    DEIEDU is the best online Institute in the world with high class course outline and up to date learning materials. DEIEDU is providing the online mba in india, online mba in india, Distance learning mba courses in india, Correspondence mba in India Mba from distance in India, Online Executive Mba in India, distance Mba from India, Online distance mba in India. Distance learning mba degree in India.
    Address:
    401, fourth floor sg alpha tower
    Vashundhra (up)
    Phone: 9811210788
    Email: info@deiedu.in
    Website: http://www.deiedu.in/
    online mba in india

    ReplyDelete
  16. Hi Thanks for the blog it is not only helpful but they way you presented it in makes it more interesting. Thanks for the providing this angular.js training great help.

    ReplyDelete
  17. Useful post on AngularJS. I have learned a lot from your website. Keep on sharing more like this.
    Regards,
    AngularJS Training in Chennai | AngularJS course in Chennai | AngularJS Training Institute in Chennai

    ReplyDelete

Post a Comment

Popular posts from this blog

Getting started with Dropwizard: Connecting to a Database using Hibernate

Getting Started with Dropwizard: Authentication, Configuration and HTTPS

Getting started with Dropwizard: First steps