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:
- The sample app:
https://github.com/code-shoily/ngconf-dhaka-contactlist - A cool place to hang-out:
https://www.facebook.com/groups/angularjsbd/ - (Shameless Plug) Watch out for my ponderings:
http://code-shoily.tumblr.com/
Grokking AngularJS
By Mafinar Khan
Grokking AngularJS
My presentation for the AngularJS conf 2014 @ UIU. (As of now it's in the future ;-))
- 2,781