Angular js
Download as PPTX, PDF•0 likes•64 views
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.
![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>](https://image.slidesharecdn.com/angularjs-170331130922/85/Angular-js-9-320.jpg)
![ 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](https://image.slidesharecdn.com/angularjs-170331130922/85/Angular-js-11-320.jpg)
Angular js
- 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.