Get AngularJS Started!

Get Angular JS
Started!
Introduction to AngularJS
Meetup Talk by Dmitry Ivashutin, april 2014

What is not AngularJS?
➔ Not a JavaScript library, it’s a framework
◆ it has no methods to call directly
➔ Not for DOM manipulation
◆ but it has a limited jQuery stand-in inside (jqLite)

What is AngularJS?
➔ 100% JavaScript
➔ 100% Client side
➔ MVC || MVVM === MVW

Why is it ‘Angular’ and ‘ng’?
HTML has <> ‘ng’ sounds like ‘Angular’

Model-View-ViewModel
View
UI
► user actions, commands
► data bindings
► notifications
Model ViewModel
Business Logic
and Data
Presentation
Logic
► data access
► update on change

Model-View-Controller
UI View:
View
► renders model
► sends User actions/events to controller
Model Controller
Controller:
► defines app behaviors
► maps actions/events to Model
Model:
► represents data
► handles Business Logic
► notifies view on changes
User
Interactions
Business Logic
and Data

Application
ng-app
➔ auto-bootstrapping the application
➔ one per page*
➔ application scoping
<html data-ng-app>
</html>

Expressions
HTML RESULT
<body>
1 + 2 = {{1 + 2}}
</body>
1 + 2 = 3
http://jsfiddle.net/ae87/9uzkL/

Modules
var myApp =
angular.module(‘myApp’, []);
You can think of a module as a container for the
different parts of your app – controllers, services, filters,
directives, etc.

Module configuring - Filter
// declare a module
var myAppModule =
JS HTML
// configure the module. create a filter
myAppModule.filter(‘greet’, function() {
return function(name) {
return ‘Hello, ‘ + name + ‘!’;
};
});
<div>
{{ ‘World’ | greet }}
</div>
Hello, World!
RESULT
http://jsfiddle.net/ae87/AXrxb/

Directives
<input data-ng-model=”name” />
At a high level, directives are markers on a DOM element (such as an
attribute, element name, or CSS class) that tell AngularJS's
HTML compiler ($compile) to attach a
specified behavior to that DOM element or
even transform the DOM element and its children.

Controllers
// declare a module
var myApp =
JS HTML
// configure the module. add controller
myApp.controller(‘MeetupController’,
[‘$scope’, function($scope) {
$scope.greetings = ‘Welcome!’;
}]);
<div data-ng-controller=
”MeetupController”>
{{ greetings }}
</div>
Welcome!
RESULT
http://jsfiddle.net/ae87/R5z7p/

Use controllers to:
➔ Set up the initial state of the $scope
object.
➔ Add behavior to the $scope object.

Do NOT use controllers to:
➔ Manipulate DOM
➔ Format input
➔ Filter output
➔ Share code or state across controllers
➔ Manage life-cycle of other components

Scope
// declare a module
var myApp =
// add value to $scope object
}]);
➔ Viewmodel like
object (MVVM)
➔ Model presentation
(MVC)
JS

What are scopes?
➔ mimics DOM structure*
◆ parent inheritance
◆ child isolation
➔ ‘$watch’s model mutations
➔ ‘$apply’ies model changes on view

Dependency Injection
// declare a module
var myApp =
// inject reference to $scope object
}]);
➔ inline array annotation
➔ $inject property
annotation
➔ implicitly from the
function parameters
names
JS

Directives: ng-repeat
// adding array for iteration over it
$scope.attendees = [
{ name: ‘Alexey’, room: 521 },
{ name: ‘Olga’, room: 504 },
{ name: ‘Sergey’, room: 522 },
];
}]);
JS <ul>
<li data-ng-repeat=”a in attendees”>
{{ a.name }} ( {{ a.room }} )
</li>
</ul>
● Alexey ( 521 )
● Olga ( 504 )
● Sergey ( 522 )
HTML
RESULT
http://jsfiddle.net/ae87/q8X9g/

Directives: ng-class
<ul>
<li data-ng-repeat=”a in attendees”
data-ng-class=
”{red:a.room==504}”>
{{ a.name }}} ( {{ a.room }} )
</li>
</ul>
HTML
.red {
color: DarkRed;
font-weight: bold;
}
● Alexey ( 521 )
● Olga ( 504 )
● Sergey ( 522 )
CSS
RESULT
http://jsfiddle.net/ae87/yW4mc/

Directives: ng-class
<ul>
<li data-ng-repeat="s in speakers"
data-ng-class=
"{true: 'blue', false: 'green'}
[s.room==522]">
{{ s.name }} ( {{ s.room }} )
</li>
</ul>
HTML .blue{
color: DarkBlue; font-weight: bold;
}
.green {
color: DarkGreen; font-weight: bold;
}
● Dmitry ( 522 )
● Vladimir ( 521 )
CSS
RESULT
http://jsfiddle.net/ae87/cc8Q4/

Directives: ng-click
$scope.addAttendee = function(e){
$scope.attendees.push({
name: $scope.name,
room: $scope.room
});
};
}]);
JS
<input data-ng-model=”name” type=”text”/>
<input data-ng-model=”room” type=”text”/>
<button data-ng-click=”addAttendee($event)”>
Add Attendee
</button>
● Alexey ( 521 )
● Olga ( 504 )
● Sergey ( 522 )
● Denis ( 500 )
HTML
RESULT
http://jsfiddle.net/ae87/QNGq4/

Directives: ng-show
<input data-ng-show=”canEdit” />
The ngShow directive shows or hides the given HTML element
based on the expression provided to the ngShow
attribute. The element is shown or hidden by removing or adding the ng-hide
CSS class onto the element. The .ng-hide CSS class is predefined in
AngularJS and sets the display style to none
using an !important flag.

Directives: ng-if
<div data-ng-if=”canView” />
The ngIf directive
removes or recreates a portion of the
DOM
tree based on an {expression}. If the expression assigned to ngIf evaluates to a false
value then the element is removed from the DOM, otherwise a clone of the element is
reinserted into the DOM.

Dependency Injection objects
➔ Services:
◆ Value, Factory, Service, Provider, Constant,
Decorator*
➔ Special purpose objects:
◆ Controller, Directive, Filter, Animation

Services
➔ Injectable objects
➔ Singletons
➔ Lazy instantiated

Factory Recipe
myApp.factory(‘alerter’, function () {
var alerter = {};
alerter.sayHello = function () {
alert(‘Hello!’);
}
alerter.sayGoodbye = function () {
alert(‘Goodbye!’);
}
return alerter;
});
JS
[‘$scope’, ‘alerter’,
function($scope, alerter) {
$scope.alerter = alerter;
}]);
<button data-ng-click=”alerter.sayHello()”>
Say Hello
</button>
<button data-ng-click=”alerter.sayGoodbye()”>
Say Goodbye
</button>
JS
HTML
http://jsfiddle.net/ae87/9x7Aq/1/

Service Recipe
myApp.service(‘alerter’, function () {
this.sayHello = function(){
alert(‘Hello!’);
}
this.sayGoodbye = function(){
alert(‘Goodbye!’);
}
});
JS
}]);
Say Hello
</button>
Say Goodbye
</button>
JS
HTML

Provider Recipe
myApp.provider(‘alerter’, function () {
var name = ‘Dear Guest’;
this.setGuestName = function(newName) {
name = newName;
};
this.$get = [/*you can DI in provider here*/
function(){
var alerter = {};
// your code using name variable
return alerter;
}];
});
JS
}]);
Say Hello
</button>
Say Goodbye
</button>
JS
HTML

Value Recipe
myApp.value(‘apiUserId’, ‘Af8as131A’);
myApp.controller(‘mapsController’, [
‘$scope’, ‘apiUserId’,
function($scope, apiUserId){
$scope.apiUserId = apiUserId;
}]);
JS
➔ a string, a number, an
array, an object or a
function
➔ cannot be injected in
config section
➔ can be overridden by
decorator

Constant Recipe
myApp.constant(‘apiUserId’, ‘AWjd812’);
myApp.controller(‘mapsController’, [
‘$scope’, ‘apiUserId’,
function($scope, apiUserId){
$scope.apiUserId = apiUserId;
}]);
JS
➔ a string, a number, an
array, an object or a
function
➔ can be injected in
config section
➔ cannot be overridden
by decorator

Providers
Features / Recipe type Factory Service Value Constant Provider
can have dependencies yes yes no no yes
uses type friendly injection no yes yes* yes* no
object available in config
phase
no no no yes yes**
can create
functions/primitives
yes no yes yes yes

Demoable
http://jsfiddle.net/ae87/4rckY/

What else?
Forms and validation
Routing
Configuration
$http
$q and promises
Deeper about directives
$broadcast and $emit
and a large list of other interesting things is coming
next time …

Get AngularJS Started!

More Related Content

What's hot

Similar to Get AngularJS Started!

Recently uploaded

Get AngularJS Started!