get angularjs started!
Post on 28-Nov-2014
134 Views
Preview:
DESCRIPTION
TRANSCRIPT
Get Angular JS
Started!
Introduction to AngularJS
Meetup Talk by Dmitry Ivashutin, april 2014
Presenters
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
Model ViewModel
UI
Business Logic and Data
Presentation Logic
► user actions, commands► data bindings► notifications
► data access► update on change
Model-View-Controller
View
Model Controller
UI View:► renders model► sends User actions/events to 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
Key Features
Application
ng-app➔ auto-bootstrapping the application➔ one per page*➔ application scoping
<html data-ng-app></html>
Expressions
<body>1 + 2 = {{1 + 2}}
</body>1 + 2 = 3
HTML RESULT
http://jsfiddle.net/ae87/9uzkL/
Modules
You can think of a module as a container for the
different parts of your app – controllers, services, filters,
directives, etc.
var myApp =angular.module(‘myApp’, []);
Module configuring - Filter
// declare a module
var myAppModule =
angular.module(‘myApp’, []);
// configure the module. create a filter
myAppModule.filter(‘greet’, function() {
return function(name) {
return ‘Hello, ‘ + name + ‘!’;
};
});
<div>
{{ ‘World’ | greet }}
</div>
Hello, World!
HTMLJS
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 =
angular.module(‘myApp’, []);
// configure the module. add controller
myApp.controller(‘MeetupController’,
[‘$scope’, function($scope) {
$scope.greetings = ‘Welcome!’;
}]);
<div data-ng-controller=
”MeetupController”>
{{ greetings }}
</div>
Welcome!
JS HTML
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 =
angular.module(‘myApp’, []);
// add value to $scope object
myApp.controller(‘MeetupController’,
[‘$scope’, function($scope) {
$scope.greetings = ‘Welcome!’;
}]);
➔ 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 =
angular.module(‘myApp’, []);
// inject reference to $scope object
myApp.controller(‘MeetupController’,
[‘$scope’, function($scope) {
$scope.greetings = ‘Welcome!’;
}]);
➔ inline array annotation
➔ $inject property annotation
➔ implicitly from the function parameters names
JS
Directives: ng-repeat
// adding array for iteration over it
myApp.controller(‘MeetupController’,
[‘$scope’, function($scope) {
$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
myApp.controller(‘MeetupController’,
[‘$scope’, function($scope) {
$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
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.
<div data-ng-if=”canView” />
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;
});
JSmyApp.controller(‘MeetupController’,
[‘$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!’);
}
});
JSmyApp.controller(‘MeetupController’,
[‘$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/2/
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;
}];
});
JSmyApp.controller(‘MeetupController’,
[‘$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/3/
myApp.value(‘apiUserId’, ‘Af8as131A’);
myApp.controller(‘mapsController’, [
‘$scope’, ‘apiUserId’,
function($scope, apiUserId){
$scope.apiUserId = apiUserId;
}]);
Value Recipe
JS
➔ a string, a number, an array, an object or a function
➔ cannot be injected in config section
➔ can be overridden by decorator
myApp.constant(‘apiUserId’, ‘AWjd812’);
myApp.controller(‘mapsController’, [
‘$scope’, ‘apiUserId’,
function($scope, apiUserId){
$scope.apiUserId = apiUserId;
}]);
Constant Recipe
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 …
Questions?
top related