AngularJS

Mafinar Rashid Khan
Product Manager
Panacea Systems Ltd
@mafinar

In this presentation

  • Basic whirlwind tour on AngularJS
  • Some AngularJS Concepts

What is AngularJS

  • Superheroic JavaScript Framework
  • HTML Enhanced JavaScript
  • Just one of the few cooler post-2012 JavaScript frameworks
  • Brought to you by Google
  • Open-Source

Roller coaster warning

Most new-comers end up having love-hate-(love-hate)*-love relationship with AngularJS

The very basic

Let's see some pieces of code first.
<!-- HTML -->
<div ng-controller="GreetCtrl">
    <p>Good {{ time }}, {{ name }}</p>
</div>

//JS
function GreetCtrl($scope) {
    $scope.time = "Morning";
    $scope.name = "World";
}

 Good Morning, World

What we see here

  • Expression
  • Controller
  • Two-way Data Binding
  • Directive

Expression

  • JavaScript inside HTML
  • Like little fill-up the blanks
  • blanks are the JavaScript
  • Context of Expression is the Scope
  • Example: 1+1 is {{ 1 + 1 }}

Controller

  • Simple JavaScript constructor function
  • Houses $scope
  • $scope.x becomes {{ x }} in template
  • Every controller can have their own little scope

Two-way Data Binding

Changes in scope variables are immediate in both places
<div ng-controller="GreetCtrl">
    <input ng-model="name" />
    <p>Good Morning, {{ name }}</p>
</div>
 function GreetCtrl($scope) {
    $scope.name = "World";
}

Another one...

<!-- HTML -->
<div ng-controller="GreetCtrl">
    <select ng-options="time in times" ng-model="selectedTime"></select>
    <ul ng-repeat="time in times">
        <li ng-show="time == selectedTime">
            Good {{ time }}, {{ name }}
        </li>
        <li ng-hide="time == selectectedTime">
            <strike>Good {{ time }}, {{ name }}</strike>
        </li>
    </ul>
</div>

//JSfunction GreetCtrl($scope) {    $scope.name = "World";
    $scope.times = ["Morning", "Afternoon", "Evening", "Night"];
}


When did ng-hide become an attribute of <li>, and where did the <options> go?

Welcome to Directives

  • Directives allow you to write your own HTML tags and elements
  • Or make it seem so
  • Massive help in reusability
  • Most plugins and libraries make you use their directives
  • A different approach than that of unobtrusive one
  • Quick Roundup: ng-controller, ng-show, ng-hide, ng-model, ng-options
  • There's more than one needs/thinks  of already!

Directives are...

  • AngularJs functions with special little rules
  • Can mimic element (i.e <google-map></google-map>)
  • Can mimic attributes (i.e. all that you've seen)
  • Can mimic classes (i.e. <li class="strike-through">...</li>)

However...

  • You have to write your own directives
  • But hopefully, write it only once

Example

//JS
var app = angular.module("app", []);
app.controller("GreetCtrl", function($scope) {
    $scope.time = "Morning";
    $scope.name = "World";
});

app.directive("sayHello", function() {
    return {
        restrict: "E",
        template: "{{ time }}, {{ name }}"
    }
});


<!-- HTML -->
<say-hello></say-hello>

Some of the cool stuff you can do with directives

<panel tabbed>
    <tab>
        <tab-title>Tab 1</tab-title>
        <tab-content>
            <lorem-ipsum /> <!-- ;-) -->
        </tab-content>
    </tab>
</panel>
<leaflet-map locations="assets" refresh-interval="10 seconds" provider="google"></leaflet>
<calendar events="events"
          title="School Events Calendar"
          on-click="eventForm"></calendar>

Obviously

With great power comes great learning curve
Advanced directives would easily take an entire session

Some important recaps...

  • AngularJs introduces two-way binding
  • Scopes are the bridge that connects JS with HTML through controllers
  • Controllers occupy chunk of HTML real estate
  • $scope-s are the context of that HTML real estate

The Angular Way of Thinking

  • Plan everything before hand, let not the experience come as an afterthought
  • Think in terms of Architecture
  • The HTML is your view, make use of it
  • Directives are awesome, and it feels great to use it

Angular concepts that I skipped

  • Services
  • Routes
  • Filters
  • Validation
  • Templates
  • Unit Testing

Scopes are more than meets the eyes

  • Scope inheritance and isolated scope
  • $rootScope, $on, $emit, $broadcast
  • $apply and the digest cycle

Awesome AngularJS libraries


Thank You !!!

AngularJS

By Mafinar Khan

Made with Slides.com

AngularJS

This is a basic introduction to AngularJS and a whirlwind tour of some of its features, along with fleeting mention of some of the intermediate/advanced ones.

  • 2,284

More from Mafinar Khan