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, WorldWhat 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 Mafinar Rashid Khan Product Manager Panacea Systems Ltd @mafinar
AngularJS
By Mafinar Khan
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,337
