AngularJS is a JavaScript framework that allows developers to create single-page applications. It provides features like data binding, directives, dependency injection and MVC architecture. The presentation provided an overview of AngularJS, its core features and concepts like modules, controllers, services and routing. Key benefits of AngularJS include building reusable components, easier testing and single page application capabilities.

1. Present by : Ronak Patel

2. Introduction
 AngularJS is a complete JavaScript-based open-
source front-end web application framework mainly
maintained by Google.
 Html , CSS , Java-script basic knowledge is require for
learning Angular.
 Its aims to simplify both development and testing.
 Its provide the frame-work for MVC & MVVM architecture
along with component use in the rich internet application

3. Agenda
 What is AngularJS ?
 Why AngularJS ?
 Features of AngularJS
 Core Features
 MVC Architecture
 AngularJS Module
 AngularJS Directives
 Data-binding
 Scope , Controller , Services , Filter
 Dependency Injection
 Services & Custom Factory
 Routing

4. What is Angular ?
 Angular is a extension of Html ,CSS ,JavaScript
library framework .
 AngularJS is a powerful framework for create RICH
Internet Application(RIA).
 AngularJS is distributed as a JavaScript file, and can
be added to a web page with a script tag:
<script></script>
 It Is use for develop single side web-applications.

5. Why AngularJS ?
 Single page application
 Re-usability
 Dependency Injection
 Write less code
 Security
 Easy Integration
 Data binding (example : Two way Binding )
 Easy Testing

6. Features Of Angular
 AngularJS provides developers options to write client
side application (using JavaScript) in a clean MVC(Model
View Controller) way.
 Organize web application at client side.
 Faster , Secure
 Re-usability
 Good for Single-Page Application

7. Core Features
 Model View Controller
 Data-binding
 Scope
 Controller
 Services
 Filters
 Directives
 Templates
 Routing
 Dependency Injection

8. MVC Architecture
(Model) (Database)
Contains the data which is to be displayed in the
view.
(View) (HTML)
Contains html tags to display the model data.
(Controller) (JavaScript function)
logic for loading data into model & calling the view

9. AngularJS Modules
 An AngularJS module defines an application.
 Its contains the different parts of application.
 Its container for application controller
 Controller always belong to a module
 It is created by angular.module function
 <div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>

10. AngularJS Directives
 Html elements tag is attribute its show the information
about the particular item. (such details noting but
attribute)
 Attributes which are provided by the AngularJS are called
as angular directives.
 In angular there are two types of directives
 Custom directives & Built-in directives
 Ng-app : initializes an AngularJS application.
 Ng-init : initializes application data.
 Ng-model : binds the value of HTML controls (input,
select, text area) to application data.
 Example : init.html

11.  Predefine directives (Its define with ng [its mean
angular])
 ng-dbl-click
 ng-mouseover
 ng-mouseout
 ng-keypress
 ng-keyup
 ng-change
 ng-disabled
 ng-show
 ng-hide
 ng-class
 ng-style

12. Data-Binding
 It is the automatic synchronization of data between
model and view components.
 Example : ng-bind , ng-model ,{{ }}

13. Scope
 These are objects that refer to the model. They act
as a glue between controller and view.
 The scope is the binding part between the HTML
(view) and the JavaScript (controller).
 The scope is available for both the view and the
controller.
 Example : Scope.html , two-way binding.html

15. AngularJS Controllers
 Controllers are JavaScript functions that are bound
to a particular scope.
 They are regular JavaScript Objects.
 They control the data of AngularJS applications.
 ng-controller
 Example : two-way binding.html , Scope.html

16. AngularJS Services
 AngularJS has about 30 built-in services.
 One of them is the $location service.
 The $location service has methods which return
information about the location of the current web
page:
 Example : location.html , timeout.html

17. AngularJS Filters
 Currency : Format a number to a currency format.
 Date : Format a date to a specified format.
 JSON : Format an object to a JSON string.
 Lowercase: Format a string to lower case.
 Uppercase : Format a string to upper case.
 Number: Format a number to a string.
 Order By : Orders an array by an expression.

18. Dependency Injection
 Dependency Injection is a software design pattern in which
components are given their dependencies instead of hard coding
them within the component.
 In the angular the term dependency use in
 function fun1()
 { }
 function fun2()
 { }
 Class dependency: one class object use in another class. that time
create the problem.
 Which lets you to create a dependent component without having the
base component.
 Example : scope.html

19. Custom services & Custom Factories
 Service : Angular services are java script functions and
are responsible to do a specific tasks.
 Angular provide the in-built services like
 $http , $route , $window, $location
 Five way to create the service
 1)factory
 2)service
 3)provider
 4)value
 5)constant

20. Service
 It is a singleton object. Use it when you need to
share a single object across the application
 app.service("service name",function()
 {
 this.member = function_1() {};
 this.member = function_2() {};
 .......
 });
 new service() // For calling the service new keyword
 Example: service.html

21. Factory :
 It is just a collection of functions like a class
 app.factory("factory name" , funcion()
 {
 var temp = {};
 temp.member = funcion()_1{};
 temp.member = funcion()_2{};
 ...
 return temp;
 });
 factory() // directly call
 Example : factory.html

22. AngularJS Routing
 The ngRoute module helps your application to
become a Single Page Application.
 If you want to navigate to different pages in your
application, but you also want the application to be a
SPA (Single Page Application), with no page
reloading, you can use the ngRoute module.

23. Overview
 Angular is way popular,
dynamic, and most
adaptable by the
enterprises. Every
project we did with
AngularJS — and we
mean every single one
— was designed and
developed to build an
enterprise solution with
the same methodology
and belief.