Angular Js - Fundamentals

Angular Js - Fundamentals

Walk through the fundamentals and get to know about Angular JS

3295a6fe4a4a632eef6148979848f1ae?s=128

logeshpaul

March 10, 2015
Tweet

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