Working with Arrays in AngularJS

4 Sep by vichu

Working with Arrays in AngularJS

Reading Time: 4 minutes

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:

See the Pen Displaying arrays by Vishal Srinivasan (@vishal_srini) on CodePen.0

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.

In our HTML, we used a directive called ng-repeat. ng-repeat is one of the most versatile and heavily used directives of AngularJS, because it allows us to iterate over an array or over the keys and values of an object and display them in the HTML. When we use the ng-repeat directive, the contents of the element on which the directive is applied is considered the template of the ng-repeat. AngularJS picks up this template, makes a copy of it, and then applies it for each instance of the ng-repeat. In the previous case, the label and status span elements were repeated four times, once for each item in the notes array.

The ng-repeat is basically the same as a for each loop in any programming language, so the syntax is similar:

ng-repeat=”eachVar in arrayVar”

We’ll cover more details about ng-repeat in the next blog. The next point of interest is the template that we used for the ng-repeat. Inside the context of the ng-repeat, we now have a new variable, note, which is not present in our controller. This is created by ng-repeat, and each instance of the ng-repeat has its own version and value of note, obtained from each item of the array.

The final thing to note is that we used the double-curly notation to print the note’s label, but used a directive called ng-bind for the note’s done field. There is no functional difference between the two; both take the value from the controller and display it in the UI. Both of them also keep it data-bound and up to date, so if the value underneath changes, the UI will change automatically. We can use them interchangeably, because the expression between the double curly braces will directly drop into the ng-bind.

Using ng-bind Versus Double Curlies

The advantage ng-bind has over the double-curly notation is that it takes AngularJS time to bootstrap and execute before it can find and replace all the double curly braces from the HTML. That means, for a portion of a second while the browser starts, you might see flashing double curly braces in the UI before AngularJS has the chance to kick in and replace them. This is only for the very first page load, and not on views loaded after the first load. You will not have that issue with ng-bind. You can also get around that issue with the ng-cloak directive.

Waiting for AngularJS to Load

AngularJS has a directive called ng-cloak, which is a mechanism to hide sections of the page while AngularJS bootstraps and finishes loading. ng-cloak uses the following CSS rules, which are automatically included when you load angular.js or angular.min.js:


[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],

.ng-cloak, .x-ng-cloak {

display: none !important;

}

After this, any section or element that needs to be hidden in your HTML needs to have class=”ng-cloak” added to it. This applies the preceding CSS and hides the element by default. After AngularJS finishes loading, it goes through your HTML and removes ng-cloak from all these elements, thus ensuring that your UI is shown after AngularJS has finished bootstrapping.

You can apply ng-cloak on the body tag, but it is often better to add it on smaller sections so that your application can load progressively instead of all at once. Do note that the ng-cloak styling is loaded as part of the angular.js source code. So if you load your AngularJS library at the very end of your HTML (as you should), the style will not be applied to the HTML until AngularJS has finished loading. Thus it is often a good idea to include the preceding CSS as part of your own CSS to ensure it is loaded upfront before your HTML starts displaying.

With this example in place, let’s dig in and understand how AngularJS is working behind the scenes:

  1. The HTML is loaded. This triggers requests for all the scripts that are a part of it.
  2. After the entire document has been loaded, AngularJS kicks in and looks for the ng-app directive.
  3. When it finds the ng-app directive, it looks for and loads the module that is specified and attaches it to the element.
  4. AngularJS then traverses the children DOM elements of the root element with the ng-app and starts looking for directives and bind statements.
  5. Each time it hits an ng-controller or an ng-repeat directive, it creates what we call a scope in AngularJS. A scope is the context for that element. The scope dictates what each DOM element has access to in terms of functions, variables, and the like.
  6. AngularJS then adds watchers and listeners on the variables that the HTML accesses, and keeps track of the current value of each of them. When that value changes, AngularJS updates the UI immediately.
  7. Instead of polling or some other mechanism to check if the data has changed, AngularJS optimizes and checks for updates to the UI only on certain events, which can cause a change in the data or the model underneath. Examples of such events include XHR or server calls, page loads, and user interactions like click or type.

In our previous example with the ng-repeat, we have a template that shows the note’s label and status. That template accesses a variable called note, which is created in our for each loop that is the ng-repeat. Now, if each template accessed the same context, each instance would show the same text. But to ensure that each template instance of the ng-repeat shows its own value, each ng-repeat also gets its own scope with a variable called note defined in it, which is specific to it.

Also note that while the ng-repeat instances each get their own scope, they still have access to the parent scope. If there were a function in our controller that we wanted to access within the ng-repeat, we could still do that.

In summation, AngularJS creates scopes or context for various elements in the DOM to ensure that there is no global state and each element accesses only what is relevant to it. These scopes have a parent-child relation by default, which allows children scopes to access functions and controllers from a parent scope.

In our next lesson or next blog will discuss in detail regarding ng-repeat in AngularJS.

Byvichu

Love to code and Love to learn. A passionate technology lover who likes to sit with laptop even for weeks :D

Leave a Reply

Your email address will not be published. Required fields are marked *