AngularJS Tutorial

AngularJS Tutorial

This tutorial gives you an overview and talks about the fundamentals of AngularJS.


Within the rapidly growing JavaScript community, AngularJS burst onto the scene when it released version 1.0 in June 2012. Although a relatively new framework, its powerful features and elegant tools for structuring applications have made it the front-end framework of choice for many developers. AngularJS was originally developed at Google by testing engineer Misko Hevery, who found that existing tools, like jQuery, made it difficult to structure browser user interfaces (UIs) that needed to display large amounts of sophisticated data. Google now has a dedicated team developing and maintaining AngularJS and related tools. AngularJS also powers some active Google applications, ranging from the DoubleClick Digital Marketing Platform to the YouTube app on the PlayStation 3. AngularJS’s popularity is growing rapidly:  it powers 143 of the Quantcast Top 10k websites and is rapidly outpacing its closest rivals, KnockoutJS, ReactJS, and EmberJS.


What makes AngularJS so special?

One particularly pithy expression borrowed from the https://angularjs.org/ website describes AngularJS as enabling you to “write less code, go have beer sooner.” The heart of AngularJS is a concept called two-way data binding, which enables you to bind Hypertext Markup Language (HTML) and cascading style sheets (CSS) to the state of a JavaScript variable. Whenever the variable changes, AngularJS updates all HTML and CSS that references that JavaScript variable. For instance, in the following code:

<div ng-show=”shouldShow”>Hello</div>

If the shouldShow variable is changed to false, AngularJS automatically hides the div element for you. There is nothing special about the shouldShow variable: AngularJS doesn’t require you to wrap your variables in special types; the shouldShow variable can be a plain old JavaScript Boolean value.


Although two-way data binding is the basis for what makes AngularJS so useful, it’s only the tip of the iceberg. AngularJS provides an elegant framework for organizing your client-side JavaScript in a way to maximize reusability and testability. In addition, AngularJS has a rich set of testing tools, such as Karma, protractor, and ngScenario (see Chapter 9), which are optimized for use with AngularJS. AngularJS’s focus on testable structures and rich testing tools makes it a natural choice for mission-critical client-side JavaScript. Not only does it enable you to write sophisticated applications fast, it supplies tools and structure that make testing your application easy. As a matter of fact, Google’s DoubleClick team cited AngularJS’s “full testing story” as one of its six biggest reasons for porting its digital marketing platform to AngularJS. Here is a brief overview of some of the concepts that make AngularJS special. All these feature would be discussed in Angularjs training.

Two-Way Data Binding

In many older client-side JavaScript libraries, like jQuery and Backbone, you are expected to manipulate the Document Object Model (DOM) yourself. In other words, if you want to change the HTML contents of adiv element, you need to write imperative JavaScript. For example:

$(‘div’).html(‘Hello, world!’);

AngularJS inverts this paradigm and makes your HTML the definitive source for how your data is displayed. The primary purpose of two-way data binding is to bind an HTML or CSS property (for instance, the HTML contents or background color of a div element) to the value of a JavaScript variable. When the value of the JavaScript variable changes, the HTML or CSS property is updated to match. The opposite is also true: If the user types in an input field, the value of the bound JavaScript variable is updated to match what the user typed. For instance, the following HTML greets whoever’s name is typed in the input field. You can find this example in this chapter’s sample code asdata _ binding.html: Simply right-click on the file and open it in your browser—no web server or other dependencies required!

<input type=”text” ng-model=”user” placeholder=”Your Name”>
<h3>Hello, {{user}}!</h3>

The ngModel directive and the {{}}shorthand syntax do all the work.


Scopes in the DOM

DOM scopes are another powerful feature of AngularJS. There is no free lunch with data binding; code complexity has to go somewhere. However, AngularJS allows you to create scopes in the DOM that behave similarly to scopes in JavaScript and other programming languages. This permits you to break your HTML and JavaScript into independent and reusable pieces. For instance,  with two separate scopes: one for greeting in English, the other in Spanish:

<div ng-controller=”HelloController”>
<input type=”text” ng-model=”user” placeholder=”Your Name”>
<h3>Hello, {{user}}!</h3>
<div ng-controller=”HelloController”>
<input type=”text” ng-model=”user” placeholder=”Su Nombre”>
<h3>Hola, {{user}}!</h3>

<script type=”text/javascript”
<script type=”text/javascript”>
function HelloController($scope) {}

The ngController directive is one way to create a new scope, enabling you to reuse the same code for two different purposes. Angularjs training classes includes a thorough overview of two-way data binding and a discussion of internal implementation details.


Directives are a powerful tool for grouping HTML and JavaScript functionality into one easily reusable bundle. AngularJS has numerous built-in directives, like the ngController and ngModel directives you saw earlier, that enable you to access sophisticated JavaScript functionality from your HTML. You can write your own custom directives as well. In particular, AngularJS allows you to associate HTML with a directive, so you can use directives as a way of reusing HTML as well as a way of tying certain behavior into two-way data binding. Writing custom directives is beyond the scope of this introduction, but Angularjs online training includes a thorough discussion of the subject.


On top of two-way data binding, AngularJS lets you swap out entire portions of the page based on the state of a JavaScript variable. The ngInclude directive enables you to conditionally include templates, pieces of AngularJS-infused HTML, in the page based on the JavaScript state. The following example demonstrates a page with a div that contains different HTML based on the value of the myTemplate variable.

<div ng-controller=”TemplateController”>
<div ng-include=”myTemplate”>
<a ng-click=”myTemplate = ‘template1’;”
style=”cursor: pointer”
ng-class=”{‘selected’: myTemplate === ‘template1’ }”>
Display Template 1
<a ng-click=”myTemplate = ‘template2’;”
style=”cursor: pointer”
ng-class=”{‘selected’: myTemplate === ‘template2’ }”>
Display Template 2

<script type=”text/javascript”
<script type=”text/javascript”>
function TemplateController($scope) {
$scope.myTemplate = ‘template1’;
<script type=”text/ng-template” id=”template1″>
<h1>This is Template 1</h1>
<script type=”text/ng-template” id=”template2″>
<h1>This is Template 2</h1>

Angularjs training includes a thorough discussion of AngularJS templates, including how to use them to structure single-page applications.

Testing and Workflow

Providing a framework for writing unit-testable code has been a core AngularJS goal from its first release. AngularJS includes an elegant and sophisticated dependency injector, and all AngularJS components(controllers, directives, services, and filters) are constructed using the dependency injector. This ensures that your code’s dependencies are easy to stub out as necessary for your tests. Furthermore, the AngularJS team has developed numerous powerful testing tools, such as the Karma test runner and the protractor and ngScenario integration testing frameworks. These bring the sophisticated multibrowser testing infrastructure that was previously only feasible for large companies into the hands of the individual developer.

In addition, AngularJS’s architecture and testing tools interface nicely with various open source JavaScript build and workflow tools, such as Gulp and Grunt. With these tools, you can execute your tests seamlessly, tie in tools like code coverage and linting into your test execution, and even scaffold entirely new applications from scratch. Core AngularJS is just a library, but the testing and workflow tools surrounding it make the AngularJS ecosystem as a whole an innovative new paradigm for building browser-based clients. Angularjs training classes includes a more detailed discussion of the AngularJS testing ecosystem and the different types of testing strategies you can use for your AngularJS applications.


Like any library, AngularJS is a perfect fit for some applications and a not-so-good fit for others. In the next section, you learn about several use cases in which AngularJS is a perfect fit. In this section, you learn about a few use cases in which AngularJS is not such a good fit and learn about some of AngularJS’s limitations.

Applications Requiring Support for Old Versions of Internet Explorer

One limitation of AngularJS that may be significant for some users is that it doesn’t support old versions of Internet Explorer. AngularJS 1.0.x supports Internet Explorer 6 and 7, but the version AngularJS 1.2.x, supports only Internet Explorer 8 and greater. Furthermore, the current experimental versions of AngularJS, 1.3.x, drop support for Internet Explorer 8 entirely. (They only support Internet Explorer 9 and greater.) If your application needs to support Internet Explorer 7, using AngularJS is probably not the right choice.

Applications That Don’t Require JavaScript Server I/O

AngularJS is an extremely rich and powerful library, and avid users are often tempted to use it for every application. However, there are many cases in which AngularJS is overkill and adds unnecessary complexity. For instance, if you need to add a button to a page that shows or hides adiv element whenever a user clicks on it, using AngularJS cannot help you unless you need to persist the state of the div in the page’s URL or to the server. Similarly, choosing to write your blog in AngularJS is usually a poor decision. Blogs typically display simple data with limited interactivity, so AngularJS is often unnecessary. Also, blogs require good integration with search engines. If you were to write a blog in AngularJS, you would need to do some extra work to make sure search engines could effectively crawl your blog, because search engine crawlers don’t execute JavaScript.


Now that you’ve learned about a couple of AngularJS’s limitations, you’ll learn about a few use cases in which AngularJS truly shines.

Internal Data-Intensive Applications

AngularJS is an extremely powerful tool for applications that need to display complex data in a browser UI, such as continuous integration frameworks or product dashboards. Much of the challenge in developing UIs for these applications lies in writing imperative JavaScript to render data correctly every time it changes. Two-way data binding frees you from needing to write this glue code, which results in much slimmer and easier-to-read JavaScript.

Mobile Websites

AngularJS has extensive support for most common mobile browsers (Android, Chrome Mobile, iOS Safari). Furthermore AngularJS has powerful animation support, and single-page apps enable you to leverage browser caching to minimize your bandwidth usage. This enables you to build mobile web applications that are fast and effectively mimic native applications. In addition, frameworks like Ionic enable you to build hybrid mobile applications, applications written in JavaScript but distributed through the Android and iPhone app stores, using AngularJS.

Building a Prototype

One theme that appears numerous times in this Angularjs training is the idea of two-way data binding creating an effective separation between front-end JavaScript engineering and user interface/user experience (UI/UX) design. Two-way data binding enables the front-end JavaScript engineer to expose an application programming interface (API) that a UI/UX designer can then access in HTML, enabling both the front-end engineer and the designer to work in their preferred environments without stepping on each other’s toes. This is particularly useful for building out a prototype browser UI quickly, because you can then effectively parallelize tasks and enable your team to run more smoothly. In addition, AngularJS’s rich testing ecosystem enables you to ensure solid test coverage, and thus make sure your prototype doesn’t have any obvious bugs when you present it.

0 Responses on AngularJS Tutorial"

Leave a Message

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

Copy Rights Reserved © Mindmajix.com All rights reserved. Disclaimer.