Intro to

AngularJSOverview on AngularJS 1.3 & Angular UI

About AngularJSThe Basics

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)

ScopeAccessing 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

DirectivesExtending HTML

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>

● 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>

Native Directives (cont)

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 <!-- directive: my-customer -->

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

Breaking down a directive (cont.)

● 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

Breaking down a directive (cont.)

● 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'

};});

Breaking down a directive (cont.)

● 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!’);

})

}

ServicesExposing 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 UIFilling 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.

Final Words

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