AngularJS is a JavaScript framework for building single-page applications. It uses HTML as a template language and allows developers to extend HTML syntax to build reusable components with directives. Key features include two-way data binding, dependency injection, MVC architecture, and an ecosystem of third-party modules. Angular makes it easier to build testable, scalable web apps by handling DOM manipulation and communication with backend services.

1. http://angularjs.org
(AngularJS Basic)

2. AngularJS:
•Is a client-side MVC JavaScript framework for writing single page
web applications(SPA).
•It's built and mantained by Google.
•Help us building testable web applications that scale.
•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.
•The unique and innovative features are two-way-data bindings,
dependency injection, easy-to-test code and extending the HTML
dialect by using directives.

3. Single Page Applications (SPA)
•In a Single Page Application (SPA), either all necessary code (HTML,
CSS, JavaScript) is retrieved with a single page load.
•Appropiate resources are dynamically loaded and added to the page
as necessary, ussually in response to user actions.
•The page does not reload at any point in the process.
•Interaction with the single page application often involves dynamic
communication with the web server behind the scenes.
•SPAs are backe-end independent, and we only care about the JSON
data coming back, be it from JAVA, .NET, PHP or any other server-side
language.

4. Some key features of the Angular JS in web
development:
•Two way data binding
•MVC framework
•Templating
•Custom-directive (reusable components)
•REST-friendly
•Set up a link for any dynamic page
•Form Validation
•Server Comunication
•Localization
•Dependency injection
•Full testing environment
•AngularJS can do everything that jQuery does and much more,
yet is roughly equivalent in download size

5. AngularJS vs jQuery
jQuery AngularJS
Restful API NO YES
Integration test runner NO YES
MVC support NO YES
Template NO YES
Two way data binding NO YES
Dependency injection NO YES
AJAX YES YES
Cross Module Communication YES YES
Unit test runner YES YES
Form validation NO YES
Localization NO YES
File size 86.7 kb 167.1 kb

6. Main components of AngularJS:
•Directives - AngularJS directives are extended HTML attributes
with the prefix ng-
•Modules - Where our application components live
•Controllers - Where we add application behavior & logics of our
application.
•Expressions - How values get displayed within the page

7. Modules
•We can think of a module as a container for the different parts
of your app – controllers, services, filters, directives, etc.
•A container for different parts of application
•Modules can have other modules as dependencies

8. Getting started

9. Creating a module

10. Controllers
•An Angular Controller allows us to interact with a View and
Model, it's the place where presentational logic can take place to
keep the UI bindings in sync with the Model.

11. Dependency injection
When MyController is created by AngularJS, the $scope and instances
of dep1 and dep2 are automatically passed in. This eliminates the need
for hard-coding dependencies with global variables or creating instances
manually within the component, which greatly complicates and limits
testability.

12. Expressions
•Allow you to insert dynamic values into your HTML.
•AngularJS expressions are written inside double braces: {{expression}}
•Binds data to HTML the same way as the ng-bind directive, and output
the data exactly were the directive is written.
•They are used for small calculations only or getting the value of $scope
properties.

13. $scope
•Every controller has an associated $scope object.
•$scope is an object that refers to the application model
•In the Model-View-Controller structure, the $scope object
becomes the model.
•We only use $scope inside Controllers, where we bind data
from the Controller to the View.

14. Views

15. Directives
AngularJS extends HTML through use of directives, a feature that
allows you to create your own HTML elements.
- ng-app directive initializes an AngularJS application.
- ng-init directive initializes application data.
- ng-click directive allows you to specify custom behavior when an
element is clicked

16. Using directives
_

17. Custom Directives

18. Using filters
• A filter formats the value of an expression for display to the
user. They can be used in view templates, controllers or services
and it is easy to define your own filter.

19. Two-way Data Binding
•Data-binding is an automatic way of updating the view
whenever the model changes, as well as updating the model
whenever the view changes.

20. AngularJS form validation
•There are many form validation directives available in AngularJS:

21. Creating templates

22. $http Service
The $http service is a core Angular service that facilitates
communication with the remote HTTP servers via the browser's
XMLHttpRequest object or via JSONP.

23. Custom services
•We can define our own custom services in AngularJS apps and
use them wherever required.
•There are several ways to declare AngularJS service within
application. Following are two simple ways:

24. The Role of Factories

25. AngularJS routing
•Since we are making a single page application and we don’t
want any page refreshes, we’ll use Angular’s routing capabilities.

26. Defining routes

27. Pain Points
•Angular Expressions are used extensively in the View layer of
Angular.
•It lets the developer use complicated logic and even perform
assignment operations and calculations, all inside the view
templates
•Putting logic inside the templates makes it harder to test,
sometimes impossible to test.

28. Summary
•AngularJS provides a robust “SPA” framework for bulding robust client-
side applications.
Key features:
•Directives and filters
•Two-way data binding
•Views, Controllers, Scope
•Modules and Routes

29. Resources
•http://angularjs.org
•http://builtwith.angularjs.org
•http://angular-ui.github.io
•http://mgcrea.github.io/angular-strap
•http://pluralsight.com