Angular Js - Fundamentals

Walk through the fundamentals and get to know about Angular JS

Transcript

1. Fundamentals Session - 1
   

   View Slide

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
   

   View Slide

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 -
   

   View Slide

4. Single Page Application
   

   View Slide

5. Challenges with SPAs
   ● DOM Manipulation
   ● View Loading
   ● Ajax
   ● Routing
   ● History
   ● Data Binding
   ● Object Modeling
   

   View Slide

6. Angular Features
   ★ MVC
   ★ Routing
   ★ History
   ★ Testing
   ★ Templates
   ★ Data Binding (2 Way)
   ★ jqLite - DOM Manipulation
   ★ Views
   ★ Controllers
   ★ Directives
   ★ Services
   ★ Factories
   ★ Validation
   ★ Dependency Injection
   

   View Slide

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’
   

   View Slide

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
   

   View Slide

9. Bird’s eye view
   

   View Slide

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
    

    View Slide

11. Module are containers
    

    View Slide

12. Routes
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. Thank You!
    Twitter/Github - @logeshpaul
    

    View Slide