AngularJS for Web and Mobile

1
AngularJS for Web and Mobile
Michael Byrne, MV Product Evangelist

2
Abstract
 Learn about the fundamentals of AngularJS and how it can help you
quickly build powerful web and mobile applications. This session will
explore why AngularJS is a good choice for a front-end framework and
demonstrate some of the power it gives you. Note: this will focus mostly on
new technology and only briefly on how it integrates with MultiValue.
©2015 Rocket Software, Inc. All Rights Reserved.

3
Agenda
What is AngularJS?
Some common terms and concepts
Build demo task list application
• Task list from scratch
• Debugging and troubleshooting
• Using AngularJS with external data
What’s coming in version 2

4
What is AngularJS?

5
AngularJS Overview
Web Server ControllerModel
ViewBrowser

6
AngularJS Overview
Web Server ControllerModel
ViewBrowser

7
What is AngularJS?
Open-source web application framework maintained by
Google and a community of developers
Front-end JavaScript framework
• JavaScript is the programming language of HTML and the web
• Simplifies development and testing of web applications
• Provides Model-View-Controller (MVC) framework
Custom tag Attributes interpreted at run-time
<input id="txtFirstName" ng-model="firstName" />

8
AngularJS Usage
AngularJS is used on the websites of NBC,
Walgreens, Intel, Sprint, and approximately 7,000
other sites
As of July 2015, current stable version 1.4.2
Several changes coming with version 2

9
AngularJS Alternatives
• Makes no assumption about
technology stack, just UI
• Virtual DOM
• One-way data flow
• Auto-updating handlebars
templates
• Create custom components
• Simple routing
• Universal JavaScript,
client and server
• Websocket microservices
• Integrates with AngularJS or
ReactJS

10
Skills Required
MustKnow
• HTML
• CSS
• JavaScript
Nicetoknow
• Automated
testing
• BDD –
Behavior
Driven
Development
• TDD –
Test Driven
Development
• Etc.
Notsoimportant
• jQuery
• Ruby on
Rails
• .NET
• Python
• PHP, etc.

11
Common Terms and Concepts

12
<!DOCTYPE html>
<html ng-app="tasklist">
<head>…</head>
<body ng-controller="MainCtrl">
<h1>{{ appTitle }}</h1>
<button ng-click="getTasks()">Tasks</button>
<table>
<tr ng-repeat="task in tasks">
<td>{{ task.desc }}</td>
<td>{{ task.notes }}</td>
</tr>
</table>
var app = angular.module('tasklist', []);
app.controller('MainCtrl', function($scope) {
$scope.appTitle = 'MVU Task List';
$scope.getTasks = function() {
$scope.tasks = [
{ desc:"Task 1", notes:"More info" },
{ desc:"Task 2", notes:"" }
]
};
};
Directives
A directive is a marker on a HTML tag that tells Angular to
run or reference some JavaScript code
Custom directives can be new HTML elements/attributes
Model/Controller (Javascript) View (HTML/Template)

13
Custom Directives
app.directive('myDirective', function () {
return {
restrict: 'E', // Element, Attribute, Class, Comment
link: function ($scope, element, attrs) {
element.bind('click', function () {
element.html('You clicked me!');
});
element.bind('mouseenter', function () {
element.css('background-color', 'yellow');
});
element.bind('mouseleave', function () {
element.css('background-color', 'white');
});
}
};
});
<my-directive>Click Me!</my-directive>

14
Modules
Where we write pieces of NG application
Defines dependencies between modules
Can use modules as component building blocks
<!DOCTYPE html>
<head>…</head>
<table>
</tr>
</table>
$scope.tasks = [
]
};
};

15
<!DOCTYPE html>
<head>…</head>
<table>
</tr>
</table>
$scope.tasks = [
]
};
};
Controllers
Where we control our app’s behavior by defining
functions and values

16
<!DOCTYPE html>
<head>…</head>
<table>
</tr>
</table>
$scope.tasks = [
]
};
};
Expressions
Allow you to insert dynamic values into your HTML

17
Data Binding
Angular utilizes 2-way data binding

18
Filters – Built-In
{{ '1234.5678' | currency }} $1234.00
{{ '1234.5678' | number:1 }} 1234.6
{{ 1288323623006 | date:'medium' }} Oct 28, 2010 9:40:23 PM
{{ 'Hello MVU' | lowercase }} hello mvu
{{ 'Hello MVU' | uppercase }} HELLO MVU
{{ 'abcdefghi' | limitTo:3 }} abc
<tr ng-repeat="friend in friends | orderBy:'-age'">

19
Filters - Custom

20
Filters - Custom

21
Dependency Injection
Software design pattern in which components are given
their dependencies rather than hard coding
Makes components reusable, maintainable, testable
NG handles the Dependency Injection Framework
https://en.wikipedia.org/wiki/Dependency_injection
app.controller('MainCtrl', function($scope, $http) {
$http.get('http://abc.com/api/items').
then(function (response) {
// Do something with response
};
};

22
Services
Substitutable objects that are wired together using
Dependency Injection (DI)
Several built-in services such as:
$http, $location, $log, $animate, etc.
Can create custom services

23
Developing an AngularJS App

24
Getting Started - Plunker
http://plnkr.co/
Online real-time editor
Templates for
frameworks like Angular
Collaboration
http://jsfiddle.net is
similar

25
Getting Started – Local Development
Download AngularJS (http://angularjs.org)
• We need angular.min.js
Download jQuery (https://jquery.com/download/)
• AngularJS has jQuery lite, but Bootstrap needs full jQuery
Download Twitter Bootstrap (http://getbootstrap.com)
• We need bootstrap.min.js

26
AngularJS Demo Application

27
Why Bootstrap?
Without Bootstrap With Bootstrap
+ Responsive
+ Animations
+ Customizable
+ Community

28
Let's Build the Demo!

29
Getting External Data
MV REST API
Web Server
MV Database

30
Example with MultiValue Data
Data from UniVerse
REST Server

31
Playing with MVU Plunker Demo
http://plnkr.co/edit/QjRho6
Click on Fork to make a copy for you to work with
Now you can make changes and save your versions
going forward

32
Debugging and Troubleshooting
Browser developer tools
Network activity
Source debugging
Console
Edit HTML and CSS

33
AngularJS for Mobile
Already great for Single Page Applications (SPAs)
Bootstrap gives responsive design
Third party Mobile Angular UI

34
What’s Coming in Version 2

35
AngularJS Version 2
Rewrite of the entire framework
Driven by mobile, modularity, and keeping modern
Uses AtScript, which is a superset of EcmaScript6
• Compiled to generate ES5 code
Annotations, improved Dependency Injection (DI),
routing changes, etc.

36
Additional Resources
 https://en.wikipedia.org/wiki/AngularJS
 https://angularjs.org/
 http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
 http://www.sitepoint.com/whats-new-in-angularjs-2/

37
Next Steps
 Go to http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro to
learn AngularJS with a free hands-on tutorial

38
Summary
AngularJS is great for organizing front-end code
Very powerful, but there is a bit of a learning curve
Can be used for web or mobile applications

39
Disclaimer
THE INFORMATION CONTAINED IN THIS PRESENTATION IS PROVIDED FOR INFORMATIONAL PURPOSES ONLY.
WHILE EFFORTS WERE MADE TO VERIFY THE COMPLETENESS AND ACCURACY OF THE INFORMATION CONTAINED
IN THIS PRESENTATION, IT IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED.
IN ADDITION, THIS INFORMATION IS BASED ON ROCKET SOFTWARE’S CURRENT PRODUCT PLANS AND STRATEGY,
WHICH ARE SUBJECT TO CHANGE BY ROCKET SOFTWAREWITHOUT NOTICE.
ROCKET SOFTWARE SHALL NOT BE RESPONSIBLE FOR ANY DAMAGES ARISING OUT OF THE USE OF, OR
OTHERWISE RELATED TO, THIS PRESENTATION OR ANY OTHER DOCUMENTATION.
NOTHING CONTAINED IN THIS PRESENTATION IS INTENDED TO, OR SHALL HAVE THE EFFECT OF:
• CREATING ANY WARRANTY OR REPRESENTATION FROM ROCKET SOFTWARE(OR ITS AFFILIATES OR ITS OR
THEIR SUPPLIERS AND/OR LICENSORS); OR
• ALTERING THE TERMS AND CONDITIONS OF THE APPLICABLE LICENSE AGREEMENT GOVERNING THE USE OF
ROCKET SOFTWARE.

40
Trademarks and Acknowledgements
The trademarks and service marks identified in the following list are the exclusive properties of Rocket Software,
Inc. and its subsidiaries (collectively, “Rocket Software”). These marks are registered with the U.S. Patent and
Trademark Office, and may be registered or pending registration in other countries. Not all trademarks owned by
Rocket Software are listed. The absence of a mark from this page neither constitutes a waiver of any intellectual
property rights that Rocket Software has established in its marks nor means that Rocket Software is not owner of
any such marks.
Aldon, CorVu, Dynamic Connect, D3, FlashConnect, Pick, mvBase, MvEnterprise, NetCure,
Rocket, SystemBuilder, U2, U2 Web Development Environment, UniData, UniVerse, and
wIntegrate
Other company, product, and service names mentioned herein may be trademarks or service marks of
others.

AngularJS for Web and Mobile

More Related Content

What's hot (20)

Similar to AngularJS for Web and Mobile (20)

Recently uploaded (20)

AngularJS for Web and Mobile