https://angularjs.org/

What is AngularJs

  • Front end framework

  • Two way data binding

  • jqLite

Design goals

  • Decouple DOM manipulation
  • Encourage TDD

  • Supports code re-usability

  • Dependency injection
  • Single Page Applications

Comparison with jQuery

Good to know

  • HTML + CSS
  • Javascript

ng-app

A software design pattern

Dependency injection

A software design pattern

Directives

AngularJs extends HTML with ng-directives


    <!DOCTYPE html>
    <html>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
    </script>

    <body>
        <div ng-app="myApp">
            <div class="header" ng-controller="basePageController">
               <span class="homeIcon" ng-click="exitApp()"></span>
               <span ng-hide="!(selection=='clearance')">View Summary</span>
            </div>
        </div>
    </body>

    </html>

Module

  • A software design pattern to write encapsulated code

  • Where we write pieces of our angular application

  • Makes our code more maintenable, and testable 

Routing

A software design pattern


    
    $routeProvider
        .when('/clearance', {
            templateUrl: 'pages/views/clearance.html',
            controller: 'clearanceController'
        })
        .when('/summary', {
            templateUrl: 'pages/views/summary.html',
            controller: 'summaryController'
        })
        .otherwise({ redirectTo: '/clearance' });

Scope

A software design pattern


    
    $routeProvider
        .when('/clearance', {
            templateUrl: 'pages/views/clearance.html',
            controller: 'clearanceController'
        })
        .when('/summary', {
            templateUrl: 'pages/views/summary.html',
            controller: 'summaryController'
        })
        .otherwise({ redirectTo: '/clearance' });

Expression

AngularJs binds scope data into the html using expressions

{{ expression }} 


    
    <div ng-app="myApp" ng-init="firstName='Bharath';lastName='Kasinathan'">
    
    <p>The full name is: {{ firstName + " " + lastName }}</p>
    
    </div>

Filters

Angular way of transforming data


    
    <div ng-app="myApp" ng-init="firstName='Bharath';price = '58';">
    
    <p>The name is: {{ firstName | uppercase }}</p>

    <p>Price: {{ price | currency }}</p>

    
    </div>

References

 

Made with Slides.com