Angular js basics

1. AngularJS

2. What is AngularJS?
AngularJS is a client-side MVC framework written in JavaScript. It
greatly helps us to write modern, single-page, Ajax-style web
applications.
Although, it is a general purpose framework, but it truly shines
when used with CRUD type applications.

3. Setting up AngularJS environment
Including AngularJS library
• Download from angularjs.org
• Or use one hosted on Google’s CDN network like so
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/ang
ular.min.js">
</script>

4. Simple Hello World application

5. Output

6. One Way Data Binding

7. Two Way Data Binding

8. Extending Hello World

9. Scopes
• A $scope object in AngularJS is here to expose the domain
model to a view.
• By assigning properties to scope instances, we can make new
values available to a template for rendering.

10. Getter Functions
<h1> Hello, {{ getName() }} </h1>

11. Controllers
• Controller is a JavaScript constructor function to initialize scope
objects.
• When a Controller is attached to the DOM via the ng-controller
directive, Angular will instantiate a new Controller object, using
the specified Controller's constructor function. A new child scope
will be available as an injectable parameter to the Controller's
constructor function as $scope.

12. Use controllers to :
• Set up the initial state of the $scope object.
• Add UI specific behavior to the $scope object.

13. Model
• AngularJS models are plain, old JavaScript objects.
• Any valid Javascript object or array can be passed to a model.
• To expose a model to AngularJS you simply assign it to a
$scope.

14. Hierarchy in scopes
• We need to have at least one instance of a scope to create a
new scope because ng-controller directive will create a new
scope using Scope.$new()
• AngularJS has a $rootScope i.e. a parent of all the scopes.
• $rootScope instance gets created when a new application is
bootstrap.
• Scopes are arranged in hierarchical structure which mimic the
DOM tree of the application.

15. Inheritance

16. Output

17. Fetching parent scope using $parent

18. Rule of thumb
Try to avoid using the $parent property as it strongly links
AngularJS expressions to the DOM structure created by your
tempaltes. An application might break as a result of simple
changes.

19. Alternative to $parent

20. Declarative template view – imperative
controller logic
• AngularJS promotes declarative approach to UI construction.
Templates are focused on describing a desired effect rather
than on ways of achieving it.
• It promotes declarative style of programming for templates
and imperative one for JavaScript code (controllers and
business logic)

21. Modules

22. Dependency Injection
• In addition to registering objects in a namespace, it is also
possible to declaratively describe dependencies among those
objects.
• It can perform following activities:
 Understand a need for collaborator expressed by objects.
 Wire up objects together into fully –functional application

23. Dependency Injection ($scope Obj)

24. Services

25. Controller example
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope',
function($scope) {
$scope.greeting = 'Hola!';
}]);

26. Registering Services
Angular services are substitutable objects that are wired
together using dependency injection (DI). You can use services to
organize and share code across your app.

27. Service example

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

29. Filter example
<div ng-controller="FilterController as ctrl">
<div>
All entries:
<span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
</div>
<div>
Entries that contain an "a":
<span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
</div>
</div>

30. angular.module('FilterInControllerModule', []).
controller('FilterController', ['filterFilter', function(filterFilter) {
this.array = [
{name: 'Tobias'},
{name: 'Jeff'},
{name: 'Brian'},
{name: 'Igor'},
{name: 'James'},
{name: 'Brad'}
];
this.filteredArray = filterFilter(this.array, 'a');
}]);

31. Communicating with Back-end Server
• AngularJS is well equiped with various back-ends using
XMLHttpRequest (XHR) and JSONP requests.
• It has a general purpose $http service for issuing XHR and
JSONP calls as well as a specialized $resource service to easily
target RESTful endpoints.

32. Making XHP requests with $http

33. Other XHR request methods
• GET : $http.get(url, config)
• POST : $http.post(url, data, config)
• PUT : $http.put(url, data, config)
• DELETE : $http.delete(url, config)
• HEAD : $http.head
• JSON : $http.jsonp(url, config)

34. Request/Response data conversion
• The $http.post and $http.put methods accept any JavaScript
object (or a String) value as their data parameter. If data is a
javaScript object it will be by default , converted to a JSON
string.
• The $http service will try to convert responses containg a
JSON string into JavaScript object.

35. HTTP Response parameters
• Data : The actual response data
• Status : The HTTP status
• Headers : HTTP response headers
• Config : The configurable object that was supplied with
request.

36. $resource service
• AngularJS provides a dedicated $resource services to make
interactions with REST endpoints.
• The $resource service is distributed in a separate file (angular-
resource.js), and resides in a dedicated module (ngResource).
• To use $resource we need to declare dependency on the
ngResource module from our application.

37. $resource example

38. Forms
Controls (input, select, textarea) are ways for a user to enter
data. A Form is a collection of controls for the purpose of
grouping related controls together.

39. Creating a form

40. Processing form

41. Form output

42. Using CSS classess
• ng-valid: the model is valid
• ng-invalid: the model is invalid
• ng-valid-[key]: for each valid key added by $setValidity
• ng-invalid-[key]: for each invalid key added by $setValidity
• ng-pristine: the control hasn't been interacted with yet
• ng-dirty: the control has been interacted with
• ng-touched: the control has been blurred
• ng-untouched: the control hasn't been blurred
• ng-pending: any $asyncValidators are unfulfilled

43. Customizing Form UI
<style type="text/css">
.css-form input.ng-invalid.ng-touched {
background-color: #FA787E;
}
.css-form input.ng-valid.ng-touched {
background-color: #78FA89;
}
</style>

44. Validating an email form field
<div ng-show="form.$submitted || form.uEmail.$touched">
<span ng-show="form.uEmail.$error.required">Tell us your
email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid
email.</span>
</div>

45. Why Should We Use AngularJS?
• MVC done right
• A declarative user interface
• Data models are POJO
• Behavior with directives
• Flexibility with filters
• Write less code
• DOM manipulations
• Service providers
• Unit testing ready
• Dynamic binding

46. Thank You