Slides from the LiveRez ‘In the Engine Room’ developer meeting.

1. What The Heck is Angularjs?

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

3. Why Angularjs?

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

5. Wait...What?
?
Dependency Injection
Transclusion
Directives
Scope
Model Mutation
Observation

6. Angularjs Learning Curve

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

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

9. 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

10. 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>

11. 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

12. Dependency Injection
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');

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

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

15. “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

16. 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.

17. Tools?
And More