Grokking AngularJS

Mafinar Rashid Khan

Product Manager

Panacea Systems Ltd

@mafinar

In this presentation...

Getting to know Angular

How it makes you think

...with all it's little features

and not so little ones..

and cut open an app

Lots of fun

How we use Angular?

Awesomesauce!

  • An education management system
  • A bundle of business automation tools
  • Ticket reservation and booking system (Coming Soon!)
  • A kick-ass quasi web framework (Open Sourcing Soon!)
  • Training

Have you met Angular?

The age of JS MVW Frameworks

MV What?

Exactly!

  • Backbone
  • Spine
  • Knockout
  • Ember
  • ...
  • ...
  • Angular

They all make front-end less painful

...and more fun

A Framework just shoves Design Patterns on your face!

Those MV* guys? Moreso..

Meet Angular

  • Superheroic JavaScript Framework
  • HTML Enhanced JavaScript
  • One of the coolest post-2012 JS Frameworks
  • Introduced to you by Google

How Angular forces makes you think

Two-Way Data Binding

Change a model, watch it change everywhere

...and vice versa

From the site itself..

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

Expressions

Angular scope variable inside registering HTML snippets

{{ }} does it all!

MV(C|VM|Whaver)

Pointers to Ponder

  • Describe your data and behaviors (models?)
  • Scope it up, know how to play with it (controllers?)
  • Mark a region in the view that knows the scope (view?)
  • Have common structure that pass between them (service, factory, DI)
  • Rest assured, all changes propagate (almost) intuitively (watchers, digest cycle, dirty check)
  • Override HTML if needed to encapsulate comlexity and communicate with the DOM (Directive)

Describe your Ctrl

var StatusCtrl = function($scope) {
    $scope.status = "";
    $scope.statuses = [];

    $scope.clearStatus = function() {
        $scope.status = "";
    }
    $scope.saveStatus = function() {
        $scope.statuses.push($scope.status);
        $scope.clearStatus()
    }
    $scope.deleteStatus = function(index) {
        $scope.statuses.splice(index, 1);
    }
}

And know that the HTML knows it through...

The View + Expression

<div ng-controller="StatusCtrl">
    <input ng-model="status" />
    <button ng-click="clearStatus()">Clear</button>
    <button ng-click="saveStatus()">Save</button>
    <hr />
    <ul>
        <li ng-repeat="s in statuses">
                {{ s }} <a href="#" ng-click="deleteStatus($index)">[ X ]</a>
        </li>
    </ul>
</div>

ng-controller marks your HTML and $scope makes CTRL and Views acquinted

but what if you need multiple snippets to know each other?

Let's get back to it later...

Directives

How would you like your HTML today?

How about?

  • <map provider="google"></map> Gives you a google map?
  • <contenteditable ng-model="status" /> makes your static element editable?
  • <colorify theme="monokai" language="langModel">{{ ... code snippets }}</colorify> highlights your syntax?

More readable, less boilerplate...

Then there is more...

Animations!!

All you need is to tell Angular through classes

More elaborately...

  • Know the possible states of an element
  • For instance, ng-repeat does ng-enter, ng-move, ng-leave
  • Give them a class
  • Describe the animation with the states appended to the class
  • ...in CSS

Example

.phone-form-repeat.ng-enter,
.phone-form-repeat.ng-move {
  -webkit-animation: fadeIn 1s;
}

.phone-form-repeat.ng-leave {
  -webkit-animation: fadeOut 0.5s;
}
<div ng-repeat="phone in contact.phones" 
        ng-form="phoneForm" 
        class="phone-form-repeat">
    <!-- the phone related stuff -->
</div>

Make sure to include ngAnimate though, it's external ;-)

Going Form-al

The four form horsemen

  • Pristine
  • Dirty
  • Valid
  • Invalid

And some rules o' thumb

  • Name your elements
  • Know that your scope knows them
  • Know your states and errors
  • Handle like a boss

And Angular validates for you...

Like this...

 <form name="contactForm" novalidate>
    <div class="form-group">
        <input type="email"
               required 
               class="form-control"
               name="email" 
               ng-model="contact.email"
               placeholder="[ Email ]" />
        <div class="help-block">
            <div ng-show="contactForm.email.$invalid && contactForm.email.$dirty && contactForm.email.$error.required">
                You must provide an email address
            </div>
        </div>
        <div class="help-block">
            <div ng-show="contactForm.email.$invalid && contactForm.email.$dirty && contactForm.email.$error.email">
                Invalid email format
            </div>
        </div>
    </div>
</form>

Factory & Service

I'll go all Enterprise Talk now...

The services are singleton objects or functions that carry out specific tasks. It holds some business logic and helps with separation of concern. It can help with context specific functions and also facilitates shared data between controllers.

A service is an object, whereas a factory returns one

Usage and pointers...

  • Angular's own $http, $window, $timeout
  • A ContactService may hold the contacts and get injected into controllers who automatically get "empowered" with contacts.
  • A service may be dependency injected too.

To sum it all up...

  • AngularJS is a pretty cool web application framework
  • Once you know how to think like it
  • And once you're willing to dive deep and work out your brain to match it's dictation
  • MV* is pretty cool on it's own.

But like I always like to say...

While learning Angular, you shall have a love-hate-love-hate* relationship with it!

With love winning if you give it enough time :)

Thank You

The Resources used:

Grokking AngularJS

By Mafinar Khan

Made with Slides.com

Grokking AngularJS

My presentation for the AngularJS conf 2014 @ UIU. (As of now it's in the future ;-))

  • 2,785

More from Mafinar Khan