Tags: angularjs directives, AngularJS services, nested controllers, ngswitch, services vs controllers
Until now, we have dealt with data-binding in AngularJS. We have seen how to take data from our controllers and get it into the UI, and ensure that whenever the user interacts with or types in any data, we get it back into our controllers. We used and worked with some common directives, and dealt with forms and error handling. In this blog, we dive into AngularJS services.
By the end of the next few blogs, we will have a thorough understanding of AngularJS services and get some hands-on experience in using core built-in AngularJS services. After that, we will learn why and when we should create AngularJS services, and actually create a simple service ourselves.
AngularJS services are functions or objects that can hold behavior or state across our application. Each AngularJS service is instantiated only once, so each part of our application gets access to the same instance of the AngularJS service. Repeated behavior, shared state, caches, factories, etc. are all functionality that can be implemented using AngularJS services.
Let’s first take a look at why we need them.
Tags: angularjs directives, ng-repeat
Reading Time: 3 minutesThe ng-repeat directive is one of the most versatile directives in AngularJS, and can be used for a whole variety of situations and requirements. We saw how we can use it to repeat an array in the previous examples. In this section, we will explore some of the other options we have when using the ng-repeat directive. I […]
Tags: angularjs directives, arrays, ng-repeat
We have seen how to create a controller, and how to get data from the controller into the HTML. But we worked with very simplistic string messages. Let’s now take a look at how we would work with a collection of data; for example:
[codepen_embed height="265" theme_id="0" slug_hash="kkYWOY" default_tab="html,result" user="vishal_srini"]See the Pen <a href='http://codepen.io/vishal_srini/pen/kkYWOY/'>Displaying arrays</a> by Vishal Srinivasan (<a href='http://codepen.io/vishal_srini'>@vishal_srini</a>) on <a href='http://codepen.io'>CodePen</a>.[/codepen_embed]
We introduced a few new concepts in this example. Before we delve into those, Codepen Demo shows how the HTML and JS would look when we run it. ng-repeat example in codepen. First things first, we removed the message variable and introduced an array of JSON objects in our MainCtrl. We exposed this on the controller instance with the name notes.