Scribd
Upload
29 views

Level01 PDF

Uploaded by

adamsappleofficial
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
29 views

Level01 PDF

Uploaded by

adamsappleofficial
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 46

Shaping Up with Angular

Level 1: Getting Started


What you need to know
Must know Not so important
Nice to know
Automated Testing
BDD - Behavior Driven Development
TDD - Test Driven Development
etc
HTML & CSS
JavaScript
jQuery
Ruby on Rails
Python, PHP, etc
Databases
Why Angular?
If youre using JavaScript to create a dynamic website,
Angular is a good choice.

Angular helps you organize your JavaScript

Angular helps create responsive (as in fast) websites.

Angular plays well with jQuery

Angular is easy to test


Traditional Page-Refresh
Screencast: Request-Response Application
NOTE: Time between user
interaction and response.
Web Server
HTML JavaScript
Response with Webpage & Assets
Web Browser
URL Request to server
Response with Webpage & Assets
User clicks on link, new Request
HTML JavaScript
Browser loads up
entire webpage.
Browser loads up
entire webpage.
Screencast: Request-Response Application
NOTE: Note how responsive the page is
A responsive website using Angular
Web Server
Response with Webpage & Assets
Web Browser
URL Request to server
Response with JSON Data
User clicks on link, new Request
HTML JavaScript
DATA
Browser loads up
entire webpage.
Data is loaded into
existing page.
Modern API-Driven Application
HTML
Browser
App
Data
Source
Mobile
App
Developers
Server
API
A client-side JavaScript Framework for adding interactivity to HTML.
app.js index.html
How do we tell our HTML when to trigger our JavaScript?
<!DOCTYPE html>
<html>
<body
. . .
</body>
</html>
function Store
alert('Welcome, Gregg!');
}
(){
>
What is Angular JS?
<!DOCTYPE html>
<html>
<body
. . .
</body>
</html>
app.js
function Store
alert('Welcome, Gregg!');
}
A Directive is a marker on a HTML tag that tells Angular to run or reference
some JavaScript code.
Directives
Name of
function to call
index.html
Controller(){
ng-controller="StoreController">
The Flatlanders Store!
Screencast: Flatlanders Store
Fully Functional
Download AngularJS http://angularjs.org/
Well need angular.min.js
Downloading the libraries
Download Twitter Bootstrap http://getbootstrap.com/
Well need bootstrap.min.css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
Getting Started
index.html
Twitter Bootstrap
AngularJS
Modules

Where we write pieces of our Angular application.

Makes our code more maintainable, testable, and readable.

Where we define dependencies for our app.


Modules can use other Modules...
Creating Our First Module
Dependencies
Other libraries we might need.
We have none... for now
Application
Name
AngularJS
var app = angular.module('store', [ ]);
Including Our Module
var app = angular.module('store', [ ]);
app.js
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Including Our Module
var app = angular.module('store', [ ]);
app.js
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Run this module
when the document
loads.
index.html
Allow you to insert dynamic values into your HTML.
Expressions
Numerical Operations
evaluates to
String Operations
evaluates to
+ More Operations:
http://docs.angularjs.org/guide/expression
<p>
I am {{4 + 6}}
</p>
<p>
{{"hello" + " you"}}
</p>
<p>
I am 10
</p>
<p>
hello you
</p>
Including Our Module
var app = angular.module('store', [ ]);
app.js
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<p>{{"hello" + " you"}}</p>
</body>
</html>
index.html
Challenges
Working With Data
...just a simple
object we want to
print to the page.
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
}.
Controllers
app.js
Notice that controller is attached to (inside) our app.
Controllers are where we define our apps behavior by defining
functions and values.
Wrapping your Javascript
in a closure is a good habit!
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
}.
})();
(function(){
var app = angular.module('store', [ ]);
app.controller('StoreController', function(){

});
Storing Data Inside the Controller
app.js
Now how do we
print out this
data inside our
webpage?
this.product = gem;
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
}.
})();
(function(){
var app = angular.module('store', [ ]);
app.controller('StoreController', function(){

});
<!DOCTYPE html>
<html ng-app="store">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>








</html>
<body>
<div>
<h1> Product Name </h1>
<h2> $Product Price </h2>
<p> Product Description </p>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
Our Current HTML
Lets load our data into
this part of the page.
}
index.html
<body>
<div>
<h1> Product Name </h1>
<h2> $Product Price </h2>
<p> Product Description </p>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
(function(){
var app = angular.module('store', [ ]);

app.controller('StoreController', function(){
this.product = gem;
});
. . .
})();
app.js
index.html
Attaching the Controller
<body>
<div ng-controller="StoreController as store">
<h1> Product Name </h1>
<h2> $Product Price </h2>
<p> Product Description </p>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
Attaching the Controller
(function(){
var app = angular.module('store', [ ]);

app.controller('StoreController', function(){
this.product = gem;
});
. . .
})();
app.js
index.html
Controller name Alias Directive
<body>
<div ng-controller="StoreController as store">


</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
index.html
Displaying Our First Product
(function(){
var app = angular.module('store', [ ]);

app.controller('StoreController', function(){
this.product = gem;
});
. . .
})();
app.js
<h1> {{store.product.name}} </h1>
<h2> ${{store.product.price}} </h2>
<p> {{store.product.description}} </p>
Understanding Scope
Would never print a
value!
The scope of
the Controller
is only inside
here...
}
{{store.product.name}}
<h1> {{store.product.name}} </h1>
<h2> ${{store.product.price}} </h2>
<p> {{store.product.description}} </p>
<body>
<div ng-controller="StoreController as store">


</div>

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
Challenges
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
<body ng-controller="StoreController as store">
<div>
<h1> {{store.product.name}} </h1>
<h2> ${{store.product.price}} </h2>
<p> {{store.product.description}} </p>
Adding A Button
index.html
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
}.
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
}.
canPurchase: false
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
Adding A Button
index.html
<button
How can we
only show
this button...
...when this is true?
D
ir
e
c
t
iv
e
s

t
o

t
h
e

r
e
s
c
u
e
!
<body ng-controller="StoreController as store">
<div>
<h1> {{store.product.name}} </h1>
<h2> ${{store.product.price}} </h2>
<p> {{store.product.description}} </p>
> Add to Cart </button>
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
}.
canPurchase: false
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
NgShow Directive
index.html
<button
<body ng-controller="StoreController as store">
<div>
<h1> {{store.product.name}} </h1>
<h2> ${{store.product.price}} </h2>
<p> {{store.product.description}} </p>
ng-show="store.product.canPurchase"> Add to Cart </button>
Will only show the element if the
value of the Expression is
true.
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
index.html
<button
<body ng-controller="StoreController as store">
<div
<h1> {{store.product.name}} </h1>
<h2> ${{store.product.price}} </h2>
<p> {{store.product.description}} </p>
ng-show="store.product.canPurchase"> Add to Cart </button>
NgHide Directive
If the product is sold out
we want to hide it.
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
}.
canPurchase: true,
soldOut: true
>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
index.html
<button
<body ng-controller="StoreController as store">
<div
<h1> {{store.product.name}} </h1>
<h2> ${{store.product.price}} </h2>
<p> {{store.product.description}} </p>
ng-show="store.product.canPurchase"> Add to Cart </button>
NgHide Directive
If the product is sold out
we want to hide it.
This is awkward and
a good example to
use ng-hide!
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
}.
canPurchase: true,
soldOut: true,
ng-show="!store.product.soldOut">
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
index.html
<button
<body ng-controller="StoreController as store">
<div
<h1> {{store.product.name}} </h1>
<h2> ${{store.product.price}} </h2>
<p> {{store.product.description}} </p>
ng-show="store.product.canPurchase"> Add to Cart </button>
NgHide Directive
If the product is sold out
we want to hide it.
Much better!
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
}.
canPurchase: true,
soldOut: true,
ng-hide="store.product.soldOut">
Multiple Products
app.js
var gem =
name: "Dodecahedron",
price: 2.95,
description: ". . .",
canPurchase: true,
},
{
app.controller('StoreController', function(){
this.product = gem
});
;
Multiple Products
app.js
var gems = [

name: "Dodecahedron",
price: 2.95,
description: ". . .",
canPurchase: true,
},
{
name: "Pentagonal Gem",
price: 5.95,
description: ". . .",
canPurchase: false,
}
];
{
Now we have an array...
How might we display all these
products in our template?
M
a
y
b
e

a

D
ir
e
c
t
iv
e
?
app.controller('StoreController', function(){
this.products = gems
});
;
So we have multiple products...
Working with An Array
index.html
<body ng-controller="StoreController as store">
<div>
<h1> {{store.products[0].name}} </h1>
<h2> ${{store.products[0].price}} </h2>
<p> {{store.products[0].description}} </p>
<button ng-show="store.products[0].canPurchase">
Add to Cart</button>
</div>
. . .
</body>
index.html
Working with An Array
. . .
</body>
Displaying the first product
is easy enough...
<body ng-controller="StoreController as store">
<div>
<h1> {{store.products[0].name}} </h1>
<h2> ${{store.products[0].price}} </h2>
<p> {{store.products[0].description}} </p>
<button ng-show="
Add to Cart</button>
</div>
store.products[0].canPurchase">
Working with An Array
index.html
<body ng-controller="StoreController as store">
<div
<h1> {{store.products[0].name}} </h1>
<h2> ${{store.products[0].price}} </h2>
<p> {{store.products[0].description}} </p>
<button ng-show="
Add to Cart</button>
</div>
. . .
</body>
<div>
<h1> {{store.products[1].name}} </h1>
<h2> ${{store.products[1].price}} </h2>
<p> {{store.products[1].description}} </p>
<button ng-show="store.products[1].canPurchase">
Add to Cart</button>
</div>
Why repeat yourself?
Why repeat yourself?
Why... You get it.
>
store.products[0].canPurchase">
That works...
Working with An Array
index.html
<body ng-controller="StoreController as store">
<div
<h1> {{product.name}} </h1>
<h2> ${{product.price}} </h2>
<p> {{product.description}} </p>
<button ng-show="
Add to Cart</button>
</div>
. . .
</body>
ng-repeat="product in store.products"
product
>
Repeat this
section for
each product.
}
.canPurchase">
What We Have Learned So Far
Directives HTML annotations that trigger Javascript behaviors
Modules Where our application components live
Controllers Where we add application behavior
Expressions How values get displayed within the page
Challenges

You might also like