Angular.JS is quickly becoming the dominant JavaScript framework for professional web development. This quick 3 minute introduction will brief you about Angular.js

1. © SpringPeople Software Private Limited, All Rights Reserved.© SpringPeople Software Private Limited, All Rights Reserved.
Introduction to

2. © SpringPeople Software Private Limited, All Rights Reserved.
What is Angular.JS?
AngularJS is a structural framework for dynamic
web apps. It lets you use HTML as your template
language and lets you extend HTML's syntax to
express your application's components clearly
and succinctly. Angular's data binding and
dependency injection eliminate much of the
code you would otherwise have to write. And it
all happens within the browser, making it an
ideal partner with any server technology.

3. © SpringPeople Software Private Limited, All Rights Reserved.
What is Backbone.JS?
Backbone.js is a minimalistic JavaScript framework that gives
structure to web applications by pulling your “truth” — your
model — out of your DOM and into Backbone’s Model,
Collection, and View objects. Backbone is relatively easy to
implement on a small portion of a page, and at only 6KB for the
entire production version library, a little code can mean a lot of
organization for your application. With far fewer concepts to
grasp than Angular or Ember, Backbone is easier to get started
with and allows for greater control over the method of
implementation.

4. © SpringPeople Software Private Limited, All Rights Reserved.
What is Ember.JS?
Ember is a framework for creating rich JavaScript web
applications. Ember has conventions that can help
developers be more productive and write better code.
These conventions help facilitate the collaboration
between different developers working on the same
project. Ember also has top-notch router and URL
handling. Ember is typically used for building long-lived
applications, such as admin dashboards where a user is
expected to keep their browser open for many hours.

5. © SpringPeople Software Private Limited, All Rights Reserved.
Angular.JS Building Blocks

6. © SpringPeople Software Private Limited, All Rights Reserved.
Anatomy of an Angulr.js App
• Model: The data shown to the users. The model data are
simple POJOs (Plain Old JavaScript Objects).
• View: This is what the users see when they visit your page,
that is to say after the raw HTML template involving directives
and expressions is compiled and linked with correct scope.
• Controller: The business logic that drives your application.
• Scope: A context that holds data models and functions. A
controller usually sets these models and functions in the
scope.
• Directives: Something that teaches HTML new syntax. It
extends HTML with custom elements and attributes.

7. © SpringPeople Software Private Limited, All Rights Reserved.
Anatomy of an Angulr.js App (cont.)
• Expressions: Expressions are represented by {{}} in
the HTML. They are useful for accessing scope
models and functions.
• Template: HTML with additional markup in the form
of directives (<drop-zone/>) and expressions {{}}.

8. © SpringPeople Software Private Limited, All Rights Reserved.
Angular.JS Data Binding Structure

9. © SpringPeople Software Private Limited, All Rights Reserved.
Communicating With Servers
• Communicating with $http
– In Angular, the basic building block for
communication with server is $http service.
The $http service is a core Angular service that
facilitates communication with the remote HTTP
servers via the browser's XMLHttpRequestobject
or via JSONP.

10. © SpringPeople Software Private Limited, All Rights Reserved.
Communicating With Servers (cont.)
This service provides basic functionalities like:
• GET
• POST
• HEAD
• DELETE
• PUT
• JSONP

11. © SpringPeople Software Private Limited, All Rights Reserved.
Testing Tools in Angular.JS
• Karma: The official AngularJS team test
runner. We'll use it to launch Chrome, Firefox,
and PhantomJS.
• AngularMocks: Provides support for injecting
and mocking Angular services in unit tests.
• Protractor: The feature testing tool for
AngularJS, which launches your app in a
browser and interacts with it via Selenium.

12. © SpringPeople Software Private Limited, All Rights Reserved.
Testing Tools in Angular.JS (cont.)
• Mocha: A node.js based test framework. Gives
us the ability to write describe blocks and
make assertions.
• Chai: Assertion library that hooks into Mocha,
and gives us access to Behavior-Driven
Development assertions like expect,should,
and assert. In this example, we'll be
using expect.

13. © SpringPeople Software Private Limited, All Rights Reserved.
Testing Tools in Angular.JS (cont.)
• Chai-as-promised: This Chai plugin is really helpful for
dealing with function calls that return a promise. It
gives us the ability to say things
like: expect(foo).to.be.fulfilled,
orexpect(foo).to.eventually.equal(bar).
• Sinon: Stubbing and mocking library. We'll use it to
mock out directive and controller dependencies in
unit tests, and to check that functions are being
called with the correct arguments.

14. © SpringPeople Software Private Limited, All Rights Reserved.
Testing Tools in Angular.JS (cont.)
• Browserify: Allows us to easily require modules of
code between files in the project.
• Partialify: Allows us to require HTML templates inline
in our AngularJS directives.
• Lodash: Utilities used to extend JavaScript and make
it easier to work with.

15. © SpringPeople Software Private Limited, All Rights Reserved.
How you can master Angular.JS?
Become an expert in 2 days.
World class Angular.JS corporate training by the
industry experts.
More Details

16. © SpringPeople Software Private Limited, All Rights Reserved.
Suggested Audience & Other Details
• Suggested Audience - Web developer who wants to build
best-of-breed web applications with the simplicity and
elegance of JavaScript.
• Duration – 2 Days
• Prerequisites
– Should be familiar with any one web development technologies.
– Should have intermediate level exposure in JavaScript.
Syllabus

17. © SpringPeople Software Private Limited, All Rights Reserved.
For further info/assistance contact
training@springpeople.com
+91 80 656 79700
www.springpeople.com
Our Partners