Introduction To Angular.js - SpringPeople

© SpringPeople Software Private Limited, All Rights Reserved. © SpringPeople Software Private Limited, All Rights Reserved.

Introduction to

© 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.


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.


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.


Angular.JS Building Blocks


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.


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 {{}}.


Angular.JS Data Binding Structure


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.


Communicating With Servers (cont.)

This service provides basic functionalities like:

• GET

• POST

• HEAD

• DELETE

• PUT

• JSONP


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.


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.



• 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.



• 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.


How you can master Angular.JS?

Become an expert in 2 days.

World class Angular.JS corporate training by the industry experts.

More Details

http://www.springpeople.com/courses/regular/angular-js-workshop-training-course.php


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

http://www.springpeople.com/courses/regular/angular-js-workshop-training-course.php


For further info/assistance contact

[email protected]

+91 80 656 79700

www.springpeople.com

Our Partners

mailto:[email protected]

http://www.springpeople.com/

http://www.springpeople.com/

http://www.springpeople.com/marketing/partners.php