Angular pres

The Superheroic JavaScript MVC Framework
● Angularjs is a framework suited for web application
development
● It’s 100% JavaScript and 100% client side.

Features and Concepts
Dependency Injection
Two Way Data-Binding (Transclusion)
Templates
MVC
Directives
Model Mutation Observation

Wait...What?
?
Transclusion
Directives
Scope
Model Mutation
Observation

“Stop Thinking in Pages. Start
Thinking in Systems.”
- Jeremy Keith

MVC refresher
Model View
Controller
application data a representation of
the model data
mediator between the model and view

MVC -- the “Angular Way”
Model View
Controller
application data a representation
of the model data
HTML & Directives
for the Dom
mediator between the model and view
API $scope

document.getElementById()
var hello = “Hello World”;
Old School way to update text:
<div id=”message”></div>
document.getElementById('message').textContent = "hello";
That got replaced with $(selector):
$(‘#message’).text(hello);
Now, for Angular!
<div ng-init=”name=’Hello’”>{{name}} world</div>

How it Works
<div ng-init=”name=Hello”>{{name}}world</div>
● Browser loads the html and then the angular
js script
● Angular waits for the DOMContentLoad event
and looks for the ng-app directive
● The Module specified in the ng-app is used to
configure the injector (dependency injection)
● The injector is used to create the $compile
service and $rootScope
● $compile compiles the DOM and links it with
$rootScope
● ng-init assigns Hello to the name property on
the scope
● {{name}} is turned into Hello (Transclusion)
Courtesy of: Angular docs http://docs.angularjs.org/tutorial/step_00

Dependency injection is a software design pattern that
allows the removal of hard-coded dependencies and
makes it possible to change them, whether at run-time
or compile-time.
// Provide the wiring information in a module
angular.module('myModule', []).
// Teach the injector how to build a 'greeter'
// Notice that greeter itself is dependent on '$window'
factory('greeter', function($window) {
// This is a factory function, and is responsible for
// creating the 'greet' service.
return {
greet: function(text) {
$window.alert(text);
}
};
});
// New injector is created from the module.
// (This is usually done automatically by angular bootstrap)
var injector = angular.injector(['myModule', 'ng']);
// Request any dependency from the injector
var greeter = injector.get('greeter');

Code Examples
<div id=”chart”></div>
<chart data=”chartData” blue></chart>

Desktops and Tablets and Phones, Oh My!
Courtesy of: http://how-media.com/welcome/web-design

“Day by day, the number of devices, platforms,
and browsers that need to work with your site grows.
Responsive web design represents a fundamental shift
in how we’ll build websites for the decade to come.”
- Jeffrey Veen

Responsive web design
A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids,flexible images and
CSS3 media queries, an extension of the @media rule.
● The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units
like pixels or points.
● Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
● Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being
displayed on, most commonly the width of the browser.
● Server-side components (RESS) in conjunction with client-side ones such as media queries can produce faster-loading
sites for access over cellular networks and also deliver richer functionality/usability avoiding some of the pitfalls of
device-side-only solutions.

Angular pres

Related slideshows

More Related Content

Angular pres