Angular js 1.3 presentation for fed nov 2014

Intro to
AngularJS
Overview on AngularJS 1.3 & Angular UI

What is AngularJS?
● AngularJS is an MVC framework for web apps,
allowing devs to use only HTML, CSS, and JavaScript
on the front-end.
● It is maintained and supported by Google
● Searches for AngularJS have shot up over the past
year, indicating that it's the next big thing in the JS
and front-end world
● Alternatives: Knockout, Ember, Backbone

Why Angular?
● Create custom HTML elements through directives, allowing further
manipulation of the DOM
o ex: Tags <dropdown></dropdown> can be used for a custom dropdown,
pulling from a template.html file for a reusable dropdown
● Layered on top of jQlite instead of jQuery - lighter weight code and less lines of
code for faster, more efficient load
● Flexible - Angular puts you in control of HTML elements and how it interfaces
with JS and the back end
● HTML5 Hybrid Mobile Apps can be built using AngularJS
● Modular, meaning that it’s more geared towards modules of code that you can
save in one file and reuse again and again throughout your app

Basic Components of Angular
● Expressions - One of the most basic components of Angular. Expressions allow you to
evaluate calculations or variables and print data on the view. They are typically
surrounded by double curly braces {{5 + 5}}, though you can also use ng-bind
● Directives - Allow you to extend native HTML elements and write your own HTML tags
and attributes. With directives, you can create a descriptive tag for easier, faster
readability and store a regularly used piece of code in one file.
● Controllers - JavaScript functions that allow you to access and manipulate data. You can
have one controller per page or multiple controllers for separate sections of the page.
● Views - The templates used for your web pages.
● Scope - Context where data & values are stored so that all components have access to it.
This is how you can display data on your views and send data from user input on your
view.
● Filters - JavaScript functions that format data. Angular ships with several built-in filters,
such as date, limitTo, orderBy, and currency

Basic Components of Angular (cont.)
● Factories and Services - JavaScript code that is independent of controllers and views.
Typically, these are functions that return data to share among different sections of your
app.
● Modules - The components of your Angular app, such as directives, controllers, and
services. However, modules can also be thought of as different sections of your app
separated out for improved readability and organization.
● Dependency Injection - The way that an Angular controller is made aware of a service or
factory that will be used.

Native Routing w/ AngularJS
● Uses the $locationProvider service for the configuration module
● To use, must inject ngRoute service into your angular module (i.e.,
angular.module(‘myApp’, [‘ngRoute’])
● Routes are one level deep, meaning that you can have /client={{clientId}} but not
/client/{{clientId}}
● View is loaded into the ng-view directive: <ng-view></ng-view>
● Links are determined by what mode you’re running your app in:
o Hashbang mode is the default for Angular. This appends a hash symbol to your
routes: <a href=“#/home”>Home</a> or <a href=“#!/home”>Home</a>. Using a
suffix (such as the ! symbol) is good for SEO.
o HTML5 mode prettifies your URIs: <a href=“/home”>Home</a>
o For SEO purposes, you may need to run a headless WebKit scriptable such as
PhantomJS
● To access your $route options and parameters in your controllers, you can pass in these
services: $route, $routeParams, and $location

Example of Native Routing w/ AngularJS
angular.module('MyApp', ['ngRoute', 'ngResource'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl:'home.html',
controller: 'HomeCtrl'
})
.when('/user-id=:id, {
templateUrl: user_profile.html',
controller: 'UserProfileCtrl'
})
})

Generating Angular Files
Simple: Include a link to the Angular library in the head of your HTML
and set up the JS file and declare ng-app yourself.
Advanced: Use an NPM package to scaffold a local development
environment along with the basic files necessary for an Angular
app. I use Yeoman.io, which packages Yo, Bower, and Grunt.
Yo - Automagically generates common files (like Bootstrap CSS files and JS
libraries like Angular)
Bower - Dependency Management (This means you can pull files and packages
from github, like Angular UI, and automatically declare them as dependent
packages in your angular app so angular “sees” them)
Grunt - Server, Testing, and Automated Task Running (unit tests, minification,
compilation)

Scope
Accessing from the controller and view

A Word on Scope
● Scope is used to determine where a variable will be
accessible in your app.
● In Angular, each controller creates its own scope, meaning a
scope variable is only good in that controller or child
controllers
● Some views can have multiple controllers or multiple scopes
- you can access a variable across scopes using $rootScope
o Note: The “Angular way” to share a variable or piece of
data across controllers is actually to use factories and
services

A Word on Scope (cont)
● When you declare a variable in your controller, you can use a
local variable only viewable by the controller (var testVar) or
a $scope variable, which the front end can display
($scope.testVar)
● To display $scope variables, use double curly braces in your
HTML ({{}}) or use ng-bind (<span ng-bind=”
testVar”></span>
● Some devs prefer ng-bind because of a “blink and flash” -
this can also be solved by preventing the page from loading
before the data comes in

Two Way Binding
Angular does something cool with $scope variables - two way binding.This means that every
instance of a variable is updated as the value is manipulated - in other words, updating one
triggers a refresh of the DOM. Example:
<h1>Hello, {{contact.name}}!</h1>
<input type=“text” ng-model=“contact.name” />
The above code will update the heading as a user changes the value in the text field.
Angular has event listeners on the ng-model directive which watch for changes. As soon as a
change is detected, then it fires off a function which alerts the other instances bound to the
model that the value has changed and to update their values

Native Directives
Angular ships with native directives for structure. These directives are restricted as HTML attributes:
● ng-app: Declares your app on the view and binds it to an angular module. You can only have
one ng-app directive per view.
● ng-controller: Sections off pieces of the HTML and binds them to a controller. Unless nested,
controllers each have their own scope so if you want to share data between controllers you have
to use:
o A factory or a service
o Dependency injection to pass in a parameter or use a resolve
o sessionStorage or localStorage
o $rootScope
● ng-model: Way of wiring input elements to your controller and/or items on your view for “two
way binding.” Ng-model shares data from the view to the controller and vice versa.
● ng-click: Runs whatever expression or function you set on an HTML tag. I.e., <button
type=“button” ng-click=“submit(order)”>Submit</button>

Native Directives (cont)
● ng-class: Set dynamic classes based on flags.
<button ng-class=“{‘red’: clicked===true, ‘blue’: clicked!==true}” ng-click=“
clicked=!clicked”>Click Me!</button>
● ng-style: Used to dynamically change style of an element.
<p ng-style=“{‘color’: changeColor}”>Hello, World!</p>
<button type=“button” ng-click=“changeColor=‘red’”>Change Color</button>
● ng-repeat: Used to iterate through an array or an object.
<ul>
<li ng-repeat=“product in products”>
{{product.name}} - {{product.price | currency: “USD$”}}
</li>
</ul>

Breaking down a directive
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
templateUrl: 'my-customer-plus-vojta.html'
};
});

Breaking down a directive (cont.)
Directives come with a number of options you can set.
● Restrict: This option indicates how the directive will be declared in HTML.
o E: Element. <my-customer></my-customer>
o A: Attribute. <div my-customer></div>
o C: Class name. <div class=”my-customer”></div>
o M: Comment 
● Transclude: If set to true, gives the template access to the parent scope and allows
template to wrap content set from the parent scope. Good for wrapping arbitrary
content.
● Template/TemplateUrl: If your template is small, then you can write the HTML in
the directive using template. Otherwise, use templateURL to link to an HTML file.

● Scope: Determines whether the scope is a shared scope, a new scope, or an isolate
scope.
o If scope is set to true, then will create only one new scope for the directive
regardless of how many instances appear on the page.
o If you set an isolate scope using an object hash, then the directive won’t have
access to the scope of the page’s controller, allowing one to manipulate data without
compromising its integrity on the page.
○ You can pass in data into or out of a directive that uses isolate scope by using local
scope properties:
■ “=”: Two way binding between local scope property and parent scope property
of the same name.
■ “@”: Reads the value passed in.
■ “&”: Allows an external function or expression to be passed into the directive

● Scope (cont): Example in action where $scope.naomi is equal to an object and the
myCustomer directive prints out the customer object passed to it from an outside
controller.
<my-customer info="naomi"></my-customer>
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
templateUrl: 'my-customer-plus-vojta.html'
};
});

● Require: If another directive is required as a parent, then declare the name in the
required option.
● Controller: Used in nested directives; declares the controller the directive will use.
● Link: Function that allows directive to manipulate the DOM. Example:
link: function(scope, element, attrs){
element.bind(‘click’, function(){
element.html(‘Clicked!’);
})
}

Services
Exposing data and functions across ctrls

Factories and Services
● Factories and services are blocks of code in JS files that allow you to share data or
functions between controllers - in other words, between scopes
● Services shipped with Angular include: $scope, $http, $window, and $route
● Preferred to $rootScope because of modular nature
● Factories are functions that return an object - and this object will contain data
needed for the controller to access. For an example of how this might look:
.factory(“MyFactory”, function(){
var testVar = “Hello, World!”
return {
myToken: function(){
return testVar;
} //end inner function
} //end 1st return
}]) //end factory
.controller(“MainCtrl”, function($scope,
MyFactory){
$scope.myVar = MyFactory.myToken();
}) //in the view {{myVar}} displays “Hello, World!”

Factory w/ API Call
app.factory('myBusinessData', ['$http', '$stateParams', '$state', '$window',
function($http, $stateParams, $state, $window){
var sharedDataObject = {
getBusiness: function(){
var promise = $http({method: 'GET', url: $window.sessionStorage.getItem("appPath")
+ "business"})
.success(function(data, status, headers, config){
return data;
});
return promise;
}
}
return sharedDataObject;
}])

Dependency Injection
● A core aspect of services and factories is dependency
injection. Inject the services you want available in a
controller to access them.
.controller(‘MainCtrl’, [‘$scope’,
function($scope){ }])
o The square brackets are for minification so it remembers the
service’s name

Angular UI
Filling in the blanks

What is Angular UI?
Angular UI is the companion suite to AngularJS. Written by the
online AngularJS community, the files fill gaps in AngularJS and
provide even more flexibility. Angular UI includes:
● UI Router: for use instead of Angular’s native router to allow for
nested states
● UI Utils: Described as the Swiss Army Knife of Angular UI, UI
Utilities include things such as event binders, jQuery
passthrough, keypress, route checking, and infinite scroll
● UI Bootstrap: Taking Twitter Bootstrap’s jQuery driven
components and replacing them with Angular versions.

Routing with UI Router
● Uses concept of states instead of routes
o Uses $stateProvider service
o To use, must inject ui.router when declaring your angular module. (I.e.,
angular.module(‘myApp’, [‘ui.router’])
● Allows for nested states, so you can have multiple paths and nested views from a parent
state
o ex: /clients/{{clientId}}/overview is a nested state of /clients/{{clientId}}
o Can have more than one nested state - you can go as shallow or deep as you like
● View is loaded into a container with the ui-view directive: <div ui-view></div>
o If you’re using nested views, their templates must be passed in through the views
option in the routing config; whatever name you choose in the config must be
passed into the directive like so: <div ui-view=“content”></div>
● Links use ui-sref directive <a href ui-sref=“home”>Home</a>
● Can also link using Angular URL <a href=“#/home”>Home</a>
● To access states in controllers, inject the $state service

Example of Config w/ UI Router
$stateProvider
.state('home', {
url: "/home",
templateUrl: "home.html",
controller: "HomeCtrl"
})
.state('home.calendar', {
url: "/calendar",
views: {
"content": {templateUrl: "calendar_tab.html"}
}
})

UI Bootstrap
Set of templates (HTML & JS directives) that make up common UI
elements, such as:
● Accordions
● Carousel
● Datepicker
● Dropdown
● Modal Windows
● Pagination
● Pop-overs
● Progress Bar
● Tooltips

UI Bootstrap (cont)
Let’s take a look at what UI Bootstrap has to
offer: http://angular-ui.github.io/bootstrap
Play with the demos and get a real feel of how
Angular can transform your front end.

Sites that use Angular
1. Video Upload: http://www.vevo.com/
2. Email Reminders: http://reme.io/
3. Conference Calls: https://confr.com/#!/
4. Social Recommendations for Travel: http://posse.com/
5. News: http://www.msnbc.com/
6. Game: http://clickortre.at/#/
7. Plan Travel Itinerary: http://mywanderlust.co/
You can check out more sites at https://builtwith.angularjs.org/

Further Resources
● W3Schools Angular tutorial: http://www.w3schools.com/angular/
● Angular video tutorials: https://egghead.io/
● Angular’s official site with tutorials and documentation:
https://angularjs.org/
● AngularJS Learning GitHub:
https://github.com/jmcunningham/AngularJS-Learning
● Scotch.io: http://scotch.io/
● ng-newsletter: http://www.ng-newsletter.com/
● Dan Wahlin’s Blog:
http://weblogs.asp.net/dwahlin/Tags/AngularJS

Q&A
Questions about AngularJS or
Angular UI? Fire away!

Keep in touch!
www.sarah-hudson.com
sarah@sarah-hudson.com
@SarahHudson2008

Angular js 1.3 presentation for fed nov 2014

Recommended

More Related Content

What's hot (20)

Similar to Angular js 1.3 presentation for fed nov 2014 (20)

Recently uploaded (20)

Angular js 1.3 presentation for fed nov 2014