AngularJs (1.x) Presentation
•Download as PPTX, PDF•
0 likes•340 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.
Report
Share
More Related Content
What's hot
What's hot (20)
Similar to AngularJs (1.x) Presentation
Similar to AngularJs (1.x) Presentation (20)
Recently uploaded
Recently uploaded (20)
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 !