Angular Js - Fundamentals

Walk through the fundamentals and get to know about Angular JS

Transcript

1. Fundamentals Session - 1
2. Angular oh What? 1. Pretty weird 2. Words a. Directive b. Restriction c. Scope d. Dependency injection e. ng-o-something angular.isAwesome == true
3. Agenda • ✓ SPA, Why not write SPA from scratch • ✓ AngularJS Features • ✓ Section 1 - Directives, Filters & Data Binding • ✓ Section 2 - Views, Controllers & Scope • ✓ Section 3 - Modules, Routes • Section 4 - Providers/Factory • Section 5 -
4. Single Page Application
5. Challenges with SPAs • DOM Manipulation • View Loading • Ajax • Routing • History • Data Binding • Object Modeling
6. Angular Features ★ MVC ★ Routing ★ History ★ Testing ★ Templates ★ Data Binding (2 Way) ★ jqLite - DOM Manipulation ★ Views ★ Controllers ★ Directives ★ Services ★ Factories ★ Validation ★ Dependency Injection
7. Section 1 - Basics, DOM, Data Handling Directives ng-app, ng-model, ng-repeat Data Binding data-ng-init Filters filter: ‘model’, orderBy: ‘model.property’
8. Section 2 - MVC Views Don’t want to write logic in html/view Scope View doesn’t have to know about the controller so does the controller Controllers Scopes are dynamically binding at the run time
9. Bird’s eye view
10. Section 3 - Module, Routes, Factories Module Defining module and associates things Routes Helps load different views Providers Get data and objects into app - constant, value, service, factory, decorator
11. Module are containers
12. Routes
13. $Providers • Encapsulate common data functionality (eg. customers in multiple controller) • Providers are injected into controller at runtime • Once defined you can inject into controller, controllers or factory. • A provider can rely on another provider • Types of providers - constant, value, factory, service, decorator, provider • Difference is the way it creates objects and which gets the data
14. Provider recipes • CONSTANT - A constant is a value injectable anywhere! app.constant('jellyBean', 4.2); • VALUE - A simple injectable value. [can not be injected into config] app.value('name', 'Larry'); • SERVICE - Injectable constructor. app.service('api', function (dep) {...}); • FACTORY - Injectable function for returning factory stuff. app.factory('widget', function (dep) {... return ?;}) • DECORATOR - Modify or encapsulate other provisions. $provide.decorate('name', function($delegate) { return $delegate + ' the Great’; }); • Providers - You just need a $get method. $provide.provider('foo', {$get: function(dep) {...}}); $provide.provider('foo', function(){ this.$get = function(dep) {...} }); It’s a overkill! but it’s the core verbose.
15. Conceptual Overview • Template - HTML with additional markup • Directives - Extend HTML with custom attributes and elements • Model - The data shown to the user in the view and with which the user interacts • Scope - Context where the model is stored so that controllers, directives and expressions can access it • Expressions - Access variables and functions from the scope • Filter - Formats the value of an expression for display to the user • View - What the user sees (the DOM) • Data Binding - Sync data between the model and the view • Controller - The business logic behind views • Dependency Injection - Creates and wires objects and functions • Module - A container for the different parts of an app including controllers, services, filters, directives • Service/Provider - Reusable business logic independent of views
16. Summary 1) How AngularJs provides a robust “SPA” framework for building dynamic web apps 2) Key Features ◦ Directives and Filters ◦ Two-way data binding ◦ Views, Controllers, Scope ◦ Modules and Routes ◦ Providers - constant, value, service, factory, decorator, provider 3) Concepts of Angular
17. Time is now! App Suggestion? 1) Customer Management App [CRUD] 2) Shopping Cart Application 3) REST API consumption To get your hand dirty on code
18. Thank You! Twitter/Github - @logeshpaul