Más contenido relacionado La actualidad más candente (20) Similar a AngularJS for Web and Mobile (20) AngularJS for Web and Mobile2. 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
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.
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
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
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
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.
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
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
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
<!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
<!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.
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'">
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
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.
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
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.
27. 27
Why Bootstrap?
©2015 Rocket Software, Inc. All Rights Reserved.
Without Bootstrap With Bootstrap
+ Responsive
+ Animations
+ Customizable
+ Community
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.
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.
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.
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
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
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
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.