Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 appli...
3
Agenda
What is AngularJS?
Some common terms and concepts
Build demo task list application
• Task list from scratch
• ...
4
What is AngularJS?
©2015 Rocket Software, Inc. All Rights Reserved.
5
AngularJS Overview
©2015 Rocket Software, Inc. All Rights Reserved.
Web Server ControllerModel
ViewBrowser
6
AngularJS Overview
©2015 Rocket Software, Inc. All Rights Reserved.
Web Server ControllerModel
ViewBrowser
7
What is AngularJS?
Open-source web application framework maintained by
Google and a community of developers
Front-end ...
8
AngularJS Usage
AngularJS is used on the websites of NBC,
Walgreens, Intel, Sprint, and approximately 7,000
other sites...
9
AngularJS Alternatives
©2015 Rocket Software, Inc. All Rights Reserved.
• Makes no assumption about
technology stack, ju...
10
Skills Required
©2015 Rocket Software, Inc. All Rights Reserved.
MustKnow
• HTML
• CSS
• JavaScript
Nicetoknow
• Automa...
11
Common Terms and Concepts
©2015 Rocket Software, Inc. All Rights Reserved.
12
<!DOCTYPE html>
<html ng-app="tasklist">
<head>…</head>
<body ng-controller="MainCtrl">
<h1>{{ appTitle }}</h1>
<button...
13
Custom Directives
©2015 Rocket Software, Inc. All Rights Reserved.
app.directive('myDirective', function () {
return {
...
14
Modules
Where we write pieces of NG application
Defines dependencies between modules
Can use modules as component bu...
15
<!DOCTYPE html>
<html ng-app="tasklist">
<head>…</head>
<body ng-controller="MainCtrl">
<h1>{{ appTitle }}</h1>
<button...
16
<!DOCTYPE html>
<html ng-app="tasklist">
<head>…</head>
<body ng-controller="MainCtrl">
<h1>{{ appTitle }}</h1>
<button...
17
Data Binding
Angular utilizes 2-way data binding
©2015 Rocket Software, Inc. All Rights Reserved.
18
Filters – Built-In
©2015 Rocket Software, Inc. All Rights Reserved.
{{ '1234.5678' | currency }} $1234.00
{{ '1234.5678...
19
Filters - Custom
©2015 Rocket Software, Inc. All Rights Reserved.
20
Filters - Custom
©2015 Rocket Software, Inc. All Rights Reserved.
21
Dependency Injection
Software design pattern in which components are given
their dependencies rather than hard coding
...
22
Services
Substitutable objects that are wired together using
Dependency Injection (DI)
Several built-in services such...
23
Developing an AngularJS App
©2015 Rocket Software, Inc. All Rights Reserved.
24
Getting Started - Plunker
http://plnkr.co/
Online real-time editor
Templates for
frameworks like Angular
Collaborat...
25
Getting Started – Local Development
Download AngularJS (http://angularjs.org)
• We need angular.min.js
Download jQuer...
26
AngularJS Demo Application
©2015 Rocket Software, Inc. All Rights Reserved.
27
Why Bootstrap?
©2015 Rocket Software, Inc. All Rights Reserved.
Without Bootstrap With Bootstrap
+ Responsive
+ Animati...
28
Let's Build the Demo!
©2015 Rocket Software, Inc. All Rights Reserved.
29
Getting External Data
©2015 Rocket Software, Inc. All Rights Reserved.
MV REST API
Web Server
MV Database
30
Example with MultiValue Data
©2015 Rocket Software, Inc. All Rights Reserved.
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 ...
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...
34
What’s Coming in Version 2
©2015 Rocket Software, Inc. All Rights Reserved.
35
AngularJS Version 2
Rewrite of the entire framework
Driven by mobile, modularity, and keeping modern
Uses AtScript, ...
36
Additional Resources
 https://en.wikipedia.org/wiki/AngularJS
 https://angularjs.org/
 http://campus.codeschool.com/...
37
Next Steps
 Go to http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro to
learn AngularJS with a free...
38
Summary
AngularJS is great for organizing front-end code
Very powerful, but there is a bit of a learning curve
Can b...
39
Disclaimer
THE INFORMATION CONTAINED IN THIS PRESENTATION IS PROVIDED FOR INFORMATIONAL PURPOSES ONLY.
WHILE EFFORTS WE...
40
Trademarks and Acknowledgements
The trademarks and service marks identified in the following list are the exclusive pro...
41
Upcoming SlideShare
Loading in …5
×

AngularJS for Web and Mobile

148 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

AngularJS for Web and Mobile

  1. 1. 1 AngularJS for Web and Mobile Michael Byrne, MV Product Evangelist
  2. 2. 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. 3. 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 ©2015 Rocket Software, Inc. All Rights Reserved.
  4. 4. 4 What is AngularJS? ©2015 Rocket Software, Inc. All Rights Reserved.
  5. 5. 5 AngularJS Overview ©2015 Rocket Software, Inc. All Rights Reserved. Web Server ControllerModel ViewBrowser
  6. 6. 6 AngularJS Overview ©2015 Rocket Software, Inc. All Rights Reserved. Web Server ControllerModel ViewBrowser
  7. 7. 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" /> ©2015 Rocket Software, Inc. All Rights Reserved.
  8. 8. 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 ©2015 Rocket Software, Inc. All Rights Reserved.
  9. 9. 9 AngularJS Alternatives ©2015 Rocket Software, Inc. All Rights Reserved. • 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. 10. 10 Skills Required ©2015 Rocket Software, Inc. All Rights Reserved. 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. 11. 11 Common Terms and Concepts ©2015 Rocket Software, Inc. All Rights Reserved.
  12. 12. 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. 13. 13 Custom Directives ©2015 Rocket Software, Inc. All Rights Reserved. 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. 14. 14 Modules Where we write pieces of NG application Defines dependencies between modules Can use modules as component building blocks <!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:"" } ] }; }; Model/Controller (Javascript) View (HTML/Template) ©2015 Rocket Software, Inc. All Rights Reserved.
  15. 15. 15 <!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:"" } ] }; }; Controllers Where we control our app’s behavior by defining functions and values Model/Controller (Javascript) View (HTML/Template) ©2015 Rocket Software, Inc. All Rights Reserved.
  16. 16. 16 <!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:"" } ] }; }; Expressions Allow you to insert dynamic values into your HTML Model/Controller (Javascript) View (HTML/Template) ©2015 Rocket Software, Inc. All Rights Reserved.
  17. 17. 17 Data Binding Angular utilizes 2-way data binding ©2015 Rocket Software, Inc. All Rights Reserved.
  18. 18. 18 Filters – Built-In ©2015 Rocket Software, Inc. All Rights Reserved. {{ '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. 19. 19 Filters - Custom ©2015 Rocket Software, Inc. All Rights Reserved.
  20. 20. 20 Filters - Custom ©2015 Rocket Software, Inc. All Rights Reserved.
  21. 21. 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 ©2015 Rocket Software, Inc. All Rights Reserved. app.controller('MainCtrl', function($scope, $http) { $http.get('http://abc.com/api/items'). then(function (response) { // Do something with response }; };
  22. 22. 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 ©2015 Rocket Software, Inc. All Rights Reserved.
  23. 23. 23 Developing an AngularJS App ©2015 Rocket Software, Inc. All Rights Reserved.
  24. 24. 24 Getting Started - Plunker http://plnkr.co/ Online real-time editor Templates for frameworks like Angular Collaboration http://jsfiddle.net is similar ©2015 Rocket Software, Inc. All Rights Reserved.
  25. 25. 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 ©2015 Rocket Software, Inc. All Rights Reserved.
  26. 26. 26 AngularJS Demo Application ©2015 Rocket Software, Inc. All Rights Reserved.
  27. 27. 27 Why Bootstrap? ©2015 Rocket Software, Inc. All Rights Reserved. Without Bootstrap With Bootstrap + Responsive + Animations + Customizable + Community
  28. 28. 28 Let's Build the Demo! ©2015 Rocket Software, Inc. All Rights Reserved.
  29. 29. 29 Getting External Data ©2015 Rocket Software, Inc. All Rights Reserved. MV REST API Web Server MV Database
  30. 30. 30 Example with MultiValue Data ©2015 Rocket Software, Inc. All Rights Reserved. Data from UniVerse REST Server
  31. 31. 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 ©2015 Rocket Software, Inc. All Rights Reserved.
  32. 32. 32 Debugging and Troubleshooting Browser developer tools Network activity Source debugging Console Edit HTML and CSS ©2015 Rocket Software, Inc. All Rights Reserved.
  33. 33. 33 AngularJS for Mobile Already great for Single Page Applications (SPAs) Bootstrap gives responsive design Third party Mobile Angular UI ©2015 Rocket Software, Inc. All Rights Reserved.
  34. 34. 34 What’s Coming in Version 2 ©2015 Rocket Software, Inc. All Rights Reserved.
  35. 35. 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. ©2015 Rocket Software, Inc. All Rights Reserved.
  36. 36. 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/ ©2015 Rocket Software, Inc. All Rights Reserved.
  37. 37. 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 ©2015 Rocket Software, Inc. All Rights Reserved.
  38. 38. 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 ©2015 Rocket Software, Inc. All Rights Reserved.
  39. 39. 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. ©2015 Rocket Software, Inc. All Rights Reserved.
  40. 40. 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. ©2015 Rocket Software, Inc. All Rights Reserved.
  41. 41. 41

×