AngularJs (1.x) Presentation
Download as PPTX, PDF•0 likes•347 views
AngularJS (1.x) is a client-side framework for developing browser-based applications using model-view-whatever architecture. It was created by Google and is open source. AngularJS uses templates, modules, services, dependency injection and two-way data binding to build single page applications. Key features include bootstrapping, routing, directives and unit testing capabilities. Angular 2 is a complete rewrite of AngularJS and uses only class-based services rather than multiple options.
AngularJs (1.x) Presentation
- 2. What is AngularJS? • Client Side Browser App Framework • Sponsored by Google • Open Source • Augment browser-based applications with model–view– controller (MVC) capability Basically AngularJS is MVW Framework. What is MVW? model–view–whatever
- 3. Other Javascript MV* Frameworks BackboneJS EmberJS
- 4. MVC : Model View Controller View ControllerModel View : • Renders the Model data • Send User actions/events to controller • UI Controller: • Define Application Behavior • Maps user actions to Model • Select view for response Model: • Business Logic • Notify view changes • Application Functionality • Data in general
- 5. What is single page application? • a web application that fits on a single web page • providing a more fluid user experience similar to a desktop application Condition: • all necessary code is retrieved with a single page load • the page does not reload at any point in the process • does not control transfer to another page
- 6. Why we choose AngularJS? • Bootstrapping • Templates • Module based • Services • Dependency Injection • 2-way data binding • Routing • Directives • Unit Test
- 7. Bootstrapping 7 Automatic Initialization Manual Initialization
- 8. Templates Below attributes are used in a template: • Directive — An attribute or element that augments an existing DOM element or represents a reusable DOM • Markup — The double curly brace notation {{ }} to bind expressions to elements is built-in angular markup. • Filter — Formats your data for display to the user. • Form controls — Lets you validate user input.
- 9. Module A module is a collection of services, directives, controllers, filters, and configuration information. angular.module is used to configure the $injector
- 10. Services AngularJS supports the concepts of "Separation of Concerns" using services architecture There are two ways to create a service. • factory • service Factory Service Some in-built services are in AngularJs like $location, $http and $routeProvider etc.
- 11. Dependency Injection Example - I Example - II
- 12. 2-WAY DATA BINDING Model View
- 13. Routing The ngRoute module routes your application to different pages without reloading the entire application.
- 14. Directives Directives are markers (such as attributes, tags, and class names) that tell AngularJS to attach a given behavior to a DOM element (or transform it, replace it, etc.) Some angular directives -: ng-app - Bootstrapping your app and defining its scope. ng-controller - defines which controller will be in charge of your view. ng-init - directive initializes application data. ng-model - directive binds the value of HTML controls to application data. ng-bind - bind the innerHTML of the element to the specified model property ng-show – It shows the content if already hidden. ng-hide - It hides the content. ng-view - ng-view is the directive that angular uses as a container to switch between views. ng-include - include HTML from an external file ng-repeat - Allows for looping through collections ng-click - Used to fire an click event.
- 15. Unit Testing Karma Jasmine For testing AngularJS applications there are certain tools that you should use that will make testing much easier to set up and run.
- 16. AngularJS Development IDE • Visual Studio 2012/2013 Express or higher • Eclipse • WebStorm • Sublime Text • TextMate
- 17. Difference between AngularJs (1.x) and AngularJs 2 • First thing, Angular 2 is not the upgrade of angular 1. Angular 2 is completely rewritten. • AngularJS 1.x is easy to setup. All you need to do is to add reference of the library and you are good to go. • Angular 1.x has 2 ways to bootstrap angular. One using ng-app attribute and other via code. In Angular 2, The only way to bootstrap angular is via code. • In Angular 1.x, we can define a service via 2 different ways. 1) Factory 2) Service And in Angular 2, class is the only way to define a service.
- 18. Demo
- 19. THANK YOU !