Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

What is Angular JS?

A high level tour around Angular: why it's different and how it fits in to the context of web app design.
by

Alan Biggs

on 29 April 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of What is Angular JS?

What is Angular JS?
"Open-source web application framework maintained by Google and a community of individual developers"
Wikipedia

Yeah, yeah...
Just hype?
Not entirely...
Angular represents a new era of web development:
Structured applications
Clear separation of concerns
Binds data to view
Less fiddly code
Unit Testable
Fits modern design layout frameworks like a glove
Responsive applications
Animated transitions
Iterative migrations to transition legacy apps
Evolution of Web apps
Data Format
Evolution of Web apps
WEB 1.0 / Static
WEB 2.0 / DHTML
HTML5/CSS3
Server Pages
AJAX
HTTP Round-trip
DOM Manipulation
JSON
Client SPA MVC
REST
XML
Data Transport
Framework
Presentation
1990
2000
2010
Data Format
WEB 1.0 / Static
WEB 2.0 / DHTML
HTML5/CSS3
CGI/ASP/JSP
AJAX
HTTP Round-trip
jQuery / dojo
JSON
Angular
REST
XML
Data Transport
Framework
Presentation
Timeframe
Timeframe
Top Angular Features
Two-way data binding
Templates
Modular
Integrates with existing web apps
Separation of concerns
URL & State Routing
Directives
Abstraction from DOM manipulation
Extend HTML features
Testable
Angular Components
Module
Config
Routes
View
Directive
Controller
Service
$scope
Single Page Apps
2015

Javascript applications
Transcluded content
In-browser animations
Responsive
Adaptive
Efficient delivery
Highly attractive
Large images
Graphical
DOM Manipulation
Javascript client apps
AJAX
Compatibility frameworks
jQuery, extJS, DoJo
JavaScript gains respect
JavaScript - The Good Parts
2010
MVW - Data driven web apps
Model/View/Whatever
Controllers manage data
When data changes, page updates automatically
Data Formatters for presentation
Services supply data
Encapsulate REST, Web services, etc.
DOM manipulation encapsulated in Directives
So what?
More efficient apps
Managable code-base
Works with HTML5 standards
Separates Views from Code
Easy to insert data into view using templates
Easy to update data - view changes when model data does
Modular design / continuous improvement
Integrates with existing web apps
"Superheroic JavaScript MVW Framework"
AngularJS.org

"HTML Enhanced for web apps!"
AngularJS.org

"AngularJS is perfect for Single Page Applications (SPAs)"
W3Schools

"100% JavaScript, 100% client-side and compatible with both desktop and mobile browsers"
AngularJS FAQ

"MVC done right"
Dmitri Lau, Sitepoint

2020
1990
2000
2010
2020
1996

Full page response
Server generated
Text intensive
Small images
Low bandwidth
Tabular layout
Static Pages
Where does Angular fit in?
Behind the UI
On the client
In front of the web service

Works well with Bootstrap, LESS, CSS
Builds on jQuery, DoJo
Parallels Backbone and Ember
Competes with Facebook React
But can also work with it...
Works well with REST services & JSON data
First Age - Web 1.0
Static HTML pages
Pages generated on server
Second Age - Web 2.0
Javascript enhanced static pages - "DHTML"
Plugins to enhance browser capability
Server-based frameworks
XML, Web Services and AJAX adoption
Third Age - HTML5
Dynamic in-browser 'single page' apps
Multi-device support
JSON, REST Web Services
Brief history of the Web
Dynamic HTML Pages
2000

Javascript enhanced pages
Menus
Roll-overs
Buttons
Higher Bandwidth
More graphics
Table layouts
Spliced images
Flash!
Conclusion
Angular not just another Framework
Changes the way Web Apps are made
Adoption is high
Will it survive?
React is nipping at its heels
Innovation is reinventing things
Frameworks adapt
Angular 2.0 is coming
a complete rewrite
Augmented HTML
Browsers were made for presenting static pages
Today that's only one application of them
We want dynamic applications
If browsers were designed for building apps, how would they be different?
That's the design goal behind Angular
Custom directives
augment
and
redefine
HTML tags
"
AngularJS lets you extend HTML vocabulary for your application."
-
angularjs.org
A simple example
<!DOCTYPE html><html><body>
<div
ng-app
="
myApp
"
ng-controller
="
myCtrl
">
Enter Name: <input type="text"
ng-model
="
name
"><br>
Your Name is
{{
name
}}
</div>
<script>
var
app
= angular.
module
('
myApp
', []);
app
.
controller
('
myCtrl
', function(
$scope
) {
$scope
.
name
= "John";
});
</script>
</body></html>
Directives as widgets
<div
ng-app
="
myApp
"
ng-controller
="MyController as
myCtrl
">
<
my-calendar
date="myCtrl.startDate" startOfWeek="monday">
</
my-calendar
>
<!-- OR -->
<div
my-calendar
date="myCtrl.startDate" startOfWeek="monday">
</div>
</div>
Architecture Overview
Full transcript