AngularJS – Javascript Frontend MVC Framework – Web Technologies History

View Github Repository Open presentation in a new window

AngularJSHyderabad

See all presentation from AngularJSHyderabad

AngularJS – Javascript Frontend MVC Framework – Web Technologies History

0 0

AngularIntro

On Github AngularJSHyderabad / AngularIntro

AngularJS

Javascript Frontend MVC Framework

Srini Kusunam / @skusunam / GithubVenkata Kotaru (Keerti) / @keerti / Github

        

Web Technologies History

Model1 Architecture

Model2 Architecture

JQuery / AJAX

Single Page Application Architecture

What is SPA?

It is a web application that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.

What is AngularJS

AngularJS is a client-side MVC framework written in JavaScript. It runs in a web browser and greatly helps us (developers) to write modern, single-page, AJAX-style web applications.

Difference to other Frameworks

Why would you use angular over something else?

Backbone, Knockout, Ember, Meteor

2-way Data Binding

Automatically synchronize values between Model and View.

Declarative Development

  • Describe the structure of your app in HTML
  • Represent your data however you want (pure objects/custom classes)
  • Describe data-dependencies through watchers
  • Change UI state in reaction to data changes

No templates

The DOM is your template

  • Describe the structure of your app in HTML
  • Describe data-dependencies through watchers

Dependency Injection (DI)

Code dependencies are automatically injected where they are needed.

Extend HTML with Directives

Teach your browser new tricks and you can create your own DSL.

Build with testing in mind

Makes it much easier to unit test different parts (Karma).

Angular building blocks

How does it work?

Modules

  • Define modules
  • Declare dependencies
  • Provide services
  • Initialize app

Define modules

// New Module
angular.module('demo/controllers',[]);
angular.module('demo/directives',[]);

// Dependencies
angular.module('demo', ['demo/controllers', 'demo/directives']);

Provide services

angular.module('demo/controllers')
  .controller('FooCtrl', function($scope){
    $scope.foo = 'bar';
    $scope.alert = function(){
      $scope.foo = 'baz';
    };
    $scope.$watch('foo', function (value, old, scope) {
      scope.fooToo = value;
    });
  })
  .controller('BarCtrl', function($scope, $resource){...});

Initialize app

angular.bootstrap(document, 'demo');
            
<body ng-app="demo">
  ...
</body>

Dependency injection

  • Declare and provide services
  • Inject services into other services through factories

Declare and provide

angular.module('demo')
  .service('cow', function(){
    return {
      moo: function(){
        alert('Moooo');
      }
    };
  })
  .service('farm', function(cow){
    cow.moo();
  });

The Angular Compiler

This is where the magic happens

  • Parses the DOM tree for directives
  • Found directives
    • Manipulate their children further
    • Populate Scopes with data and functions
    • Instantiate controllers

Scopes

  • Central structure of your app
  • Hold functions and data
  • Directives can introduce new Scopes
  • Prototypical inherited

Inheritance

  • Child scope properties overshadow parent scope properties
  • Isolated scopes don't
  • Following DOM-structure

Debugger

Batarang: Chrome Extension

Resources for Learning

https://github.com/jmcunningham/AngularJS-Learning

Omissions

  • Testing
  • Async Services

THE END

http://angularjs.org

AngularJSHyderabad Github – @nghyderabad (Twitter handle) –