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

More like these!!!

Compilation of Learning Resources