KEMBAR78
Angular js | PPTX
Present by : Ronak Patel
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
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
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.
Why AngularJS ?
 Single page application
 Re-usability
 Dependency Injection
 Write less code
 Security
 Easy Integration
 Data binding (example : Two way Binding )
 Easy Testing
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
Core Features
 Model View Controller
 Data-binding
 Scope
 Controller
 Services
 Filters
 Directives
 Templates
 Routing
 Dependency Injection
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
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>
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
 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
Data-Binding
 It is the automatic synchronization of data between
model and view components.
 Example : ng-bind , ng-model ,{{ }}
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
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
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
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.
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
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
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
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
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.
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.
Angular js

Angular js

  • 1.
    Present by :Ronak Patel
  • 2.
    Introduction  AngularJS isa 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 isAngularJS ?  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  ModelView Controller  Data-binding  Scope  Controller  Services  Filters  Directives  Templates  Routing  Dependency Injection
  • 8.
    MVC Architecture (Model) (Database) Containsthe 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  AnAngularJS 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  Htmlelements 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 isthe automatic synchronization of data between model and view components.  Example : ng-bind , ng-model ,{{ }}
  • 13.
    Scope  These areobjects 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  Controllersare 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  AngularJShas 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  DependencyInjection 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 isa 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 :  Itis 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  ThengRoute 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 isway 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.