Angular Js Get Started - Complete CourseEPAM Systems
Angular Js Advantages.Developed by Google - Most Popular, SPA (Single Page Appplications), Data Binding, Easy to Test.
Complete guide for Angular Js. Covers Basics of Angular - Module, Controllers, Filters, and Advanced topics Routing, Services, UI-Routing
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSmurtazahaveliwala
First part of AngularJS Training.
Covers details of AngularJs community and answers
- Why AngularJS ?
- What is AngularJS ?
- Getting started
- Basic Application layout and anatomies
- Data-binding, Existing Directives, Filters, Controllers
- Hosting on local (NodeJS) HTTPServer
Code samples available at
https://github.com/murtazahaveliwala/technext-angularjs-demo/tree/master/demos/static/angular-apps
Angular Js Get Started - Complete CourseEPAM Systems
Angular Js Advantages.Developed by Google - Most Popular, SPA (Single Page Appplications), Data Binding, Easy to Test.
Complete guide for Angular Js. Covers Basics of Angular - Module, Controllers, Filters, and Advanced topics Routing, Services, UI-Routing
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSmurtazahaveliwala
First part of AngularJS Training.
Covers details of AngularJs community and answers
- Why AngularJS ?
- What is AngularJS ?
- Getting started
- Basic Application layout and anatomies
- Data-binding, Existing Directives, Filters, Controllers
- Hosting on local (NodeJS) HTTPServer
Code samples available at
https://github.com/murtazahaveliwala/technext-angularjs-demo/tree/master/demos/static/angular-apps
AngularJS is a JavaScript framework made by Google for building complex client-side applications.
Angular.js is a MVW (Model-View-Whatever) open-source JavaScript web framework that facilitates the creation of single-page applications (SPA) and data-driven apps.
Angular projects have a somewhat different structure than other JavaScript MVC frameworks, but it can be highly modular and easy to maintain once you understand the structure.
AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, and maintainable front-end applications
Controller is a JavaScript constructor function that is used to augment the Angular Scope. Controllers are the place where we define our application behaviors by defining properties and functions.
Orchard Harvest 2014 - The Future of Widgets?Steve Taylor
Presented on June 9th 2014 at the Orchard Harvest 2014 event which was held at Microsoft's HQ in Redmond, WA.
Many technologies, past and present have tried to "componentize" HTML. Each with their own implementations and approaches. Web Components are a standard implementation backed by the W3C that aim to tackle this.
Polymer is a library from Google that sits on top of Web Components and makes the creation of custom elements a lot easier. The presentation, talks on how Web Components & Polymer can be used within Orchard CMS.
AtlasCamp 2015: Using add-ons to build add-onsAtlassian
Daniel Wester, Wittified
Join Daniel Wester from Wittified as he shares his company secrets on tackling the everyday problems of add-on development and generating unique add-on ideas. Learn how you can apply his methods to your product development process and how you can make development easier with Web Fragment Finder.
AtlasCamp 2015: Connect everywhere - Cloud and ServerAtlassian
Patrick Streule
You have an idea for an add-on? You want to tap into both the Atlassian Cloud and Server customer base without writing and maintaining it twice? Patrick illustrates some techniques you can use today to share most of your code between the Connect and the P2 add-on implementation.
AtlasCamp 2015: Web technologies you should be using nowAtlassian
Dallas Tester, Atlassian
Get a primer on the latest web technologies that you can leverage to build better applications. Topics covered include code re-use, loading JavaScript efficiently, and managing asynchronous operations using promises and Web workers.
Presented at 3|SHARE's EVOLVE'14 - The Adobe Experience Manager Community Summit on Tuesday November 18th, 2014 at the Hard Rock Hotel in San Diego, CA. evolve14.com
AngularJS is a popular JavaScript framework. It is intended to make the implementation of RIA (Rich Internet Applications) easier and convenient. AngularJS is created and maintained by Google. It is relatively, a new JavaScript framework, which is designed to make the front-end development as simple as possible. AngularJS is a useful tool for standardizing the web application structure and it provides a future template to ensure that the client-side applications are developed much effectively.
This document by RapidValue is written by Gourav Ajmani, Technical Lead, who has been working on AngularJS for a while, and has read many tutorials and blogs on it. According to Gourav, he could never find any article which gives a clear, concise and step-by-step guide to create the project structure and execute the project. So, he has written this document which will help you to create the Project structure and then execute it in a simple manner.
Android is an open source and Linux-based Operating System for mobile devices such as smartphones and tablet computers.
Android offers a unified approach to application development for mobile devices which means developers need only develop for Android, and their applications should be able to run on different devices powered by Android.
Multiple companies producing Android phones like Samsung, HTC, LG, Motorola,LAVA and many others.
Building Progressive Web Apps for Android and iOSFITC
Presented at Web Unleashed 2017. More info at www.fitc.ca/webu
Presented by Simon MacDonald, Adobe
Overview
Progressive Web Apps are the new hotness with Google pressing hard to make them the defacto choice for building mobile applications but what’s to be done about iOS where many of the key API’s are not supported. That’s where Apache Cordova/PhoneGap comes in by polyfilling the missing functionality. In this talk Simon will show you how to create a PWA that runs on the web, Android and iOS from a single code base. Take advantage of some new tools to easily deploy and test your PWA.
Beginning with a brief overview of Progressive Web Apps, what features make your web app progressive and which API’s you can take advantage of, Simon will discuss the availability of these API’s on various platforms, taking care not to completely dump on Apple for falling behind. No, that’s a lie, he will jokingly take Apple to task.
He will introduce Apache Cordova/PhoneGap, explaining how you can use Apache Cordova/PhoneGap to deploy a web application to Android and iOS; explaining how Cordova plugins allow us to polyfil the missing functionality on iOS.
Simon will demo a PWA running on the desktop in Chrome, Android in Chrome and as a compiled hybrid app on iOS all from the same codebase.
Objective
To introduce developers to building progressive web apps for all platforms.
Target Audience
Web application developers
Five Things Audience Members Will Learn
What are Progressive Web Apps
How to build a progressive web app
The differences between PWA’s on Chrome and Safari
How to use a single code base to target web, Android and iOS
How to deploy a PWA on iOS as an app
AngularJS is a JavaScript framework made by Google for building complex client-side applications.
Angular.js is a MVW (Model-View-Whatever) open-source JavaScript web framework that facilitates the creation of single-page applications (SPA) and data-driven apps.
Angular projects have a somewhat different structure than other JavaScript MVC frameworks, but it can be highly modular and easy to maintain once you understand the structure.
AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, and maintainable front-end applications
Controller is a JavaScript constructor function that is used to augment the Angular Scope. Controllers are the place where we define our application behaviors by defining properties and functions.
Orchard Harvest 2014 - The Future of Widgets?Steve Taylor
Presented on June 9th 2014 at the Orchard Harvest 2014 event which was held at Microsoft's HQ in Redmond, WA.
Many technologies, past and present have tried to "componentize" HTML. Each with their own implementations and approaches. Web Components are a standard implementation backed by the W3C that aim to tackle this.
Polymer is a library from Google that sits on top of Web Components and makes the creation of custom elements a lot easier. The presentation, talks on how Web Components & Polymer can be used within Orchard CMS.
AtlasCamp 2015: Using add-ons to build add-onsAtlassian
Daniel Wester, Wittified
Join Daniel Wester from Wittified as he shares his company secrets on tackling the everyday problems of add-on development and generating unique add-on ideas. Learn how you can apply his methods to your product development process and how you can make development easier with Web Fragment Finder.
AtlasCamp 2015: Connect everywhere - Cloud and ServerAtlassian
Patrick Streule
You have an idea for an add-on? You want to tap into both the Atlassian Cloud and Server customer base without writing and maintaining it twice? Patrick illustrates some techniques you can use today to share most of your code between the Connect and the P2 add-on implementation.
AtlasCamp 2015: Web technologies you should be using nowAtlassian
Dallas Tester, Atlassian
Get a primer on the latest web technologies that you can leverage to build better applications. Topics covered include code re-use, loading JavaScript efficiently, and managing asynchronous operations using promises and Web workers.
Presented at 3|SHARE's EVOLVE'14 - The Adobe Experience Manager Community Summit on Tuesday November 18th, 2014 at the Hard Rock Hotel in San Diego, CA. evolve14.com
AngularJS is a popular JavaScript framework. It is intended to make the implementation of RIA (Rich Internet Applications) easier and convenient. AngularJS is created and maintained by Google. It is relatively, a new JavaScript framework, which is designed to make the front-end development as simple as possible. AngularJS is a useful tool for standardizing the web application structure and it provides a future template to ensure that the client-side applications are developed much effectively.
This document by RapidValue is written by Gourav Ajmani, Technical Lead, who has been working on AngularJS for a while, and has read many tutorials and blogs on it. According to Gourav, he could never find any article which gives a clear, concise and step-by-step guide to create the project structure and execute the project. So, he has written this document which will help you to create the Project structure and then execute it in a simple manner.
Android is an open source and Linux-based Operating System for mobile devices such as smartphones and tablet computers.
Android offers a unified approach to application development for mobile devices which means developers need only develop for Android, and their applications should be able to run on different devices powered by Android.
Multiple companies producing Android phones like Samsung, HTC, LG, Motorola,LAVA and many others.
Building Progressive Web Apps for Android and iOSFITC
Presented at Web Unleashed 2017. More info at www.fitc.ca/webu
Presented by Simon MacDonald, Adobe
Overview
Progressive Web Apps are the new hotness with Google pressing hard to make them the defacto choice for building mobile applications but what’s to be done about iOS where many of the key API’s are not supported. That’s where Apache Cordova/PhoneGap comes in by polyfilling the missing functionality. In this talk Simon will show you how to create a PWA that runs on the web, Android and iOS from a single code base. Take advantage of some new tools to easily deploy and test your PWA.
Beginning with a brief overview of Progressive Web Apps, what features make your web app progressive and which API’s you can take advantage of, Simon will discuss the availability of these API’s on various platforms, taking care not to completely dump on Apple for falling behind. No, that’s a lie, he will jokingly take Apple to task.
He will introduce Apache Cordova/PhoneGap, explaining how you can use Apache Cordova/PhoneGap to deploy a web application to Android and iOS; explaining how Cordova plugins allow us to polyfil the missing functionality on iOS.
Simon will demo a PWA running on the desktop in Chrome, Android in Chrome and as a compiled hybrid app on iOS all from the same codebase.
Objective
To introduce developers to building progressive web apps for all platforms.
Target Audience
Web application developers
Five Things Audience Members Will Learn
What are Progressive Web Apps
How to build a progressive web app
The differences between PWA’s on Chrome and Safari
How to use a single code base to target web, Android and iOS
How to deploy a PWA on iOS as an app
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosLearnimtactics
AngularJs is next big thing. Have a read for making strong your skills in AngularJs. We are sharing with you basic model of angularjs, How it is work and what are his basics. Enjoy the information.
Presentations includes following topics :-
Introduction of ReactJS.
Component workflow.
State management and useful life-cycles.
React hooks.
Server Side Rendering.
Introduction to AngularJS
مقدمة عن AngularJS
Follow us on Egyptian NodeJs Community on google+
https://plus.google.com/u/0/communities/110403046378899425503
AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, declarative and maintainable front-end applications which provide solutions to standard infrastructure concerns.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
3. 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
4. Why Angular?
If you’re 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
6. 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.
8. 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.
10. A client-side JavaScript Framework for adding interactivity to HTML.
app.jsindex.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?
11. <!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 callindex.html
Controller(){
ng-controller="StoreController">
15. 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...
16. Creating Our First Module
Dependencies
Other libraries we might need.
We have none... for now…
Application
Name
AngularJS
var app = angular.module('store', [ ]);
18. 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
19. 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>
22. Working With Data
...just a simple
object we want to
print to the page.
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
}.
23. Controllers
app.js
Notice that controller is attached to (inside) our app.
Controllers are where we define our app’s 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(){
});
24. 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(){
});
25. <!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
Let’s load our data into
this part of the page.
}
index.html
29. 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>
32. 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?
Directives tothe rescue!
<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>
33. 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.
34.
35. </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
>
36. </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">
37. </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">
39. 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?
Maybe a
Directive?
app.controller('StoreController', function(){
this.products = gems
});
;
So we have multiple products...
40. 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>
41. 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">
42. 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...
43. 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">
44. 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
48. Shaping Up with Angular.JS
Level 2: Filters, Directives, and Cleaner Code
49. ng-app – attach the Application Module to the page
Directives We Know & Love
ng-controller – attach a Controller function to the page
ng-show / ng-hide – display a section based on an Expression
ng-repeat – repeat a section for each item in an Array
<html ng-app="store">
<body ng-controller="StoreController as store">
<h1 ng-show="name"> Hello, {{name}}! </h1>
<li ng-repeat="product in store.products"> {{product.name}} </li>
50. Our Current Code
<body ng-controller="StoreController as store">
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3>
{{product.name}}
index.html
<em class="pull-right">${{product.price </em>}}
</h3>
</li>
</ul>
</body>
There’s a better way
to print out prices.
$2
51. Our First Filter
Pipe - “send the output into”
Format this into currency
Notice it gives the dollar sign (localized)
Specifies number of decimals
index.html
<em class="pull-right">{{product.price | currency </em>}}
<body ng-controller="StoreController as store">
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3>
{{product.name}}
</h3>
</li>
</ul>
</body>
$2.00
52. {{ data | filter:options }}
Formatting with Filters
*Our Recipe
{{'1388123412323' | date:'MM/dd/yyyy @ h:mma'}}
date
12/27/2013 @ 12:50AM
{{'octagon gem' | uppercase}}
uppercase & lowercase
OCTAGON GEM
{{'My Description' | limitTo:8}}
limitTo
My Descr
<li ng-repeat="product in store.products | orderBy:'-price'">
orderBy Will list products by descending price.
Without the - products would list in ascending order.
<li ng-repeat="product in store.products | limitTo:3">
* *
53. var gems = [
{ name: 'Dodecahedron Gem',
price: 2.95,
description: '. . .',
images: [
{
full: 'dodecahedron-01-full.jpg',
thumb: 'dodecahedron-01-thumb.jpg'
},
{
full: "dodecahedron-02-full.jpg",
. . .
Adding an Image Array to our Product Array
Our New Array
Image Object
To display the first image in a product: {{product.images[0].full}}
app.js
54. <body ng-controller="StoreController as store">
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3>
{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
<img ng-src="{{product.images[0].full}}"/>
</h3>
</li>
</ul>
</body> index.html
Using ng-src for Images
NG-SOURCE
to the rescue!
…the browser tries to load the image
before the Expression evaluates.
Using Angular Expressions inside a src attribute causes an error!
<img src="{{product.images[0].full}}"/>
58. A Simple Set of Tabs
index.html
<section>
<ul class="nav nav-pills”>
<li> <a href
<li> <a href
<li> <a href
>Description</a> </li>
>Specifications</a> </li>
>Reviews</a> </li>
</ul>
</section>
59. Introducing a new Directive!
index.html
Assigning a value to tab.
For now just print this value to the screen.
<section>
<ul class="nav nav-pills”>
<li> <a href
<li> <a href
<li> <a href
>Description</a> </li>
>Specifications</a> </li>
>Reviews</a> </li>
{{tab}}
ng-click="tab = 1"
ng-click="tab = 2"
ng-click="tab = 3"
</ul>
</section>
61. When ng-click changes the value of tab …
… the {{tab}} expression automatically gets updated!
!
Expressions define a 2-way Data Binding ...
this means Expressions are re-evaluated when a property changes.
Whoa, it’s dynamic and stuff...
62. <div class="panel"
<div class="panel"
Let’s add the tab content panels
How do we make the tabs trigger the panel to show?
<h4>Description</h4>
<p>{{product.description}}</p>
</div>
<div class="panel"
<h4>Specifications</h4>
<blockquote>None yet</blockquote>
</div>
<h4>Reviews</h4>
<blockquote>None yet</blockquote>
</div>
>
>
>
tabs are up here...
. . .
63. Let’s add the tab content panels
Now when a tab is selected it will show the appropriate panel!
<div class="panel" >
>
>
<h4>Description</h4>
<p>{{product.description}}</p>
</div>
<h4>Specifications</h4>
<blockquote>None yet</blockquote>
</div>
<h4>Reviews</h4>
<blockquote>None yet</blockquote>
</div>
ng-show="tab === 1"
ng-show="tab === 2"
ng-show="tab === 3"<div class="panel"
<div class="panel"
show the panel
if tab is the
right number
67. Setting the Active Class
We need to set the class to active if current tab is selected ...
index.html
</ul>
ng-init="tab = 1">
<ul class="nav nav-pills”>
>Description</a>
>Specifications</a>
>Reviews</a>
ng-click="tab = 1"
ng-click="tab = 2"
ng-click="tab = 3"
<section
<li
<li
<li
>
>
>
<a href
<a href
<a href
</li>
</li>
</li>
68. The ng-class directive
Name of the class to set.
Expression to evaluate
If true, set class to “active”,
otherwise nothing.
index.html
ng-init="tab = 1"><section
<ul class="nav nav-pills”>
<li
<li
<li
ng-click="tab = 1"
ng-click="tab = 2"
ng-click="tab = 3"
>Description</a>
>Specifications</a>
>Reviews</a>
</li>
</li>
</li>
</ul>
. . .
>
>
>
ng-class="{ active:tab === 1 }"
ng-class="{ active:tab === 2 }"
ng-class="{ active:tab === 3 }"
<a href
<a href
<a href
85. With Live Preview,.
index.html
<blockquote>
<b>Stars: {{review.stars}}</b>
{{review.body}}
<cite>by: {{review.author}}</cite>
</blockquote>
How do we bind this review
object to the form?
<option value="1">1 star</option>
<option value="2">2 stars</option>
. . .
</select>
<textarea></textarea>
<label>by:</label>
<input type="email" />
<input type="submit" value="Submit" />
</form>
<select>
<form name="reviewForm">
86. Introducing ng-model&,
index.html
ng-model="review.stars"
ng-model="review.body"
ng-model="review.author"
<select >
<option value="1">1 star</option>
<option value="2">2 stars</option>
. . .
</select>
<textarea ></textarea>
<label>by:</label>
<input type="email" />
<input type="submit" value="Submit" />
</form>
<form name="reviewForm">
<blockquote>
<b>Stars: {{review.stars}}</b>
{{review.body}}
<cite>by: {{review.author}}</cite>
</blockquote>
ng-model binds the
form element value
to the property
87. Live Preview In Action
But how do we actually add the new review?
88. <input ng-model="review.terms" type="checkbox" /> I agree to the terms
Two More Binding Examples
With a Checkbox
With Radio Buttons
Sets value to true or false
Sets the proper value based on which is selected
What color would you like?
<input ng-model="review.color" type="radio" value="red" /> Red
<input ng-model="review.color" type="radio" value="blue" /> Blue
<input ng-model="review.color" type="radio" value="green" /> Green
90. We need to Initialize the Review
index.html
We could do ng-init, but
we’re better off
creating a controller.
<label>by:</label>
<input ng-model="review.author" type="email" />
<input type="submit" value="Submit" />
</form>
<form name="reviewForm">
<b>Stars: {{review.stars}}</b>
{{review.body}}
<cite>by: {{review.author}}</cite>
</blockquote>
<blockquote>
<select ng-model="review.stars">
<option value="1">1 star</option>
<option value="2">2 stars</option>
. . .
</select>
<textarea ng-model="review.body"></textarea>
91. Creating the Review Controller&
app.js
Now we need to update
all the Expressions to use
this controller alias.
index.html
ng-controller="ReviewController as reviewCtrl"<form name="reviewForm" >
<b>Stars: {{review.stars}}</b>
{{review.body}}
<cite>by: {{review.author}}</cite>
</blockquote>
<select ng-model="review.stars">
<option value="1">1 star</option>
<option value="2">2 stars</option>
. . .
</select>
<textarea ng-model="review.body"></textarea>
<blockquote>
app.controller("ReviewController", function(){
this.review = {};
});
93. Using ng-submit to make the Form Work^
app.js
index.html
ng-submit="reviewCtrl.addReview(product)"
We need to define
this function.
ng-submit allows us to call a function when the form is submitted.
app.controller("ReviewController", function(){
this.review = {};
});
reviewCtrl.
reviewCtrl.
reviewCtrl.
ng-controller="ReviewController as reviewCtrl"<form name="reviewForm"
<blockquote>
<b>Stars: {{ review.stars}}</b>
{{ review.body}}
<cite>by: {{ review.author}}</cite>
</blockquote>
>
96. <form name="reviewForm" ng-controller="ReviewController as reviewCtrl"
ng-submit="reviewCtrl.addReview(product)">
<blockquote>
<b>Stars: {{reviewCtrl.review.stars}}</b>
{{reviewCtrl.review.body}}
<cite>by: {{reviewCtrl.review.author}}</cite>
</blockquote>
Resetting the Form on Submit
app.js
index.html
Clear out the review, so the form will reset.
app.controller("ReviewController", function(){
this.review = {};
});
this.addReview = function(product) {
product.reviews.push(this.review);
};
this.review = {};
97. This Time the Form Resets However, if we refresh,
the reviews get reset!
We’re not saving the
reviews anywhere yet...
103. <form name="reviewForm" ng-controller="ReviewController as reviewCtrl"
ng-submit="reviewCtrl.addReview(product)" novalidate>
Preventing the Submit
index.html
We only want this method to be called
if reviewForm.$valid is true.
104. <form name="reviewForm" ng-controller="ReviewController as reviewCtrl"
ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
Preventing the Submit
index.html
If valid is false, then addReview is
never called.
105. Doesn’t Submit an Invalid Form
How might we give a hint to the user
why their form is invalid?
106. The Input Classes index.html
Source before typing email
<input name="author" ng-model="reviewCtrl.review.author" type="email" required />
<input name="author" . . . class="ng-pristine ng-invalid">
Source after typing, with invalid email
<input name="author". . . class="ng-dirty ng-invalid">
Source after typing, with valid email
<input name="author" . . . class="ng-dirty ng-valid">
So, let’s highlight the form field using classes after we start typing,
showing if a field is valid or invalid. ng-valid ng-invalid
ng-dirty
109. Web forms usually have rules around valid input:
• Angular JS has built-in validations for common input types:
HTML5-based type validations
<input type="email" name="email">
min=1 max=10
Can also define min
& max with numbers
<input type="url" name="homepage">
<input type="number" name="quantity">
110.
111.
112. Shaping Up with Angular JS
Level 4: Creating a Directive with an
Associated Controller
113. Decluttering our Code
index.html
We’re going to have multiple pages that want to reuse this HTML
snippet.
How do we eliminate this duplication?
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3>
{{product.name}}
<em class="pull-right">${{product.price}}</em>
</h3>
<section ng-controller="PanelController as panel">
. . .
114. Using ng-include for Templates
index.html
product-title.html
<h3 ng-include="'product-title.html'" class="ng-scope">
<span class="ng-scope ng-binding">Awesome Multi-touch Keyboard</span>
<em class="pull-right ng-scope ng-binding">$250.00</em>
</h3>
generated html
ng-include is expecting a variable with the name of the file to include.
To pass the name directly as a string, use single quotes ('...')
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3 name of file to includeng-include="'product-title.html'"
</h3>
<section ng-controller="PanelController as panel">
>
{{product.name}}
<em class="pull-right">${{product.price}}</em>
115.
116. Web Server
HTML JavaScript
Response with Webpage & Assets
Web Browser
URL Request to server
HTML Returned
Fetches ng-included file HTML
Browser loads up
Angular app.
117. <h3 ng-include="'product-title.html'"></h3>
Creating our First Custom Directive
index.html
Custom Directive
Using ng-include...
Our old code and our custom Directive will do the same thing...
with some additional code.
<product-title></product-title> index.html
Why write a Directive?
118. Why Directives?
Directives allow you to write HTML that expresses the behavior
of your application.
Can you tell what
this does?<aside class="col-sm-3">
<book-cover></book-cover>
<h4><book-rating></book-rating></h4>
</aside>
<div class="col-sm-9">
<h3><book-title></book-title></h3>
<book-authors></book-authors>
<book-review-text></book-review-text>
<book-genres></book-genres>
</div>
119. Template-expanding Directives are the simplest:
• define a custom tag or attribute that is expanded or replaced
• can include Controller logic, if needed
Writing Custom Directives
Directives can also be used for:
•Expressing complex UI
•Calling events and registering event handlers
•Reusing common components
121. app.directive('productTitle', function(){
return {
!
!
};
});
How to Build Custom Directives
app.js
<product-title></product-title> index.html
<h3>
{{product.name}}
<em class="pull-right">$250.00</em>
</h3>
index.html
Type of Directive
(E for Element)
Url of a template
generates
into
restrict: 'E',
templateUrl: 'product-title.html'
camelCase in JavaScriptdash in HTML translates to ...
122.
123. index.html
Attribute vs Element Directives
Element Directive
Attribute Directive
…some browsers don’t like self-closing tags.
Use Element Directives for UI widgets and Attribute Directives for
mixin behaviors... like a tooltip.
index.html
Notice we’re not using a self-closing tag…
<product-title></product-title>
<h3 product-title></h3>
<product-title/>
124. index.html
Defining an Attribute Directive
app.js
<h3>
{{product.name}}
<em class="pull-right">$250.00</em>
</h3>
index.html
generates
into
<h3 product-title></h3>
app.directive('productTitle', function(){
return {
!
};
});
Though normally attributes would be for mixin behaviors ...
restrict: 'A',
templateUrl: 'product-title.html'
Type of Directive
(A for Attribute)
125. When you think of a dynamic web application, do you think
you’ll be able to understand the functionality just by looking at
the HTML?
Directives allow you to write better HTML
When you're writing an Angular JS application, you should be
able to understand the behavior and intent from just the HTML.
No, right?
And you’re likely using custom directives to write expressive
HTML.
130. Now write the Directive ...
app.js
index.html
ng-controller="PanelController as panels"
. . .
</product-panels>
<product-panels >
app.directive('productPanels', function(){
return {
restrict: 'E',
templateUrl: 'product-panels.html'
};
});
131. What about the Controller?
app.js
index.html
ng-controller="PanelController as panels"
. . .
</product-panels>
<product-panels >
app.directive('productPanels', function(){
return {
restrict: 'E',
templateUrl: 'product-panels.html'
};
});
app.controller('PanelController', function(){
. . .
});
First we need to move the functionality inside the directive
132. Moving the Controller Inside
app.js
index.html
ng-controller="PanelController as panels"
. . .
</product-panels>
<product-panels >
app.directive('productPanels', function(){
return {
restrict: 'E',
templateUrl: 'product-panels.html'
};
});
,
Next, move the alias inside
function(){
. . .
controller:
}
133. Need to Specify the Alias
app.js
index.html
Now it works, using panels as our Controller Alias.
. . .
</product-panels>
<product-panels>
controllerAs: 'panels'
};
});
app.directive('productPanels', function(){
return {
restrict: 'E',
templateUrl: 'product-panels.html'
};
});
,
,
function(){
. . .
controller:
}
141. (function(){
var app = angular.module('store', [
Make a new Module
app.js
. . .
})();
app.controller('StoreController', function(){ . . . });
]);
products.js
(function(){
var app = angular.module('store
})();
-products', [ ]);
Define a new module just
for Product stuff...
Module Name
Different closure
means different
app variable.
app.directive('productTitle', function(){ . . . });
!
app.directive('productGallery', function(){ . . . });
!
app.directive('productPanels', function(){ . . . });
142. (function(){
var app = angular.module('store', [
Add it to the dependencies ...
app.js
. . .
})();
app.controller('StoreController', function(){ . . . });
]);
app.directive('productTitle', function(){ . . . });
app.directive('productGallery', function(){ . . . });
app.directive('productPanels', function(){ . . . });
products.js
(function(){
var app = angular.module('store
})();
-products', [ ]);
'store-products'
Module Name
store depends on
store-products
143. <!DOCTYPE html>
<html ng-app="store">
<head> . . . </head>
<body ng-controller="StoreController as store">
. . .
<script src="angular.js"></script>
<script src="app.js"></script>
We’ll also need to include the file
index.html
</body>
</html>
<script src="products.js"></script>
144.
145. Best to split Modules around functionality:
• app.js – top-level module attached via ng-app
• products.js – all the functionality for products and only products
How should I organize my application Modules?
147. Does this feel strange?
app.js
What is all this data
doing here?
Where can we put it?
Shouldn't we fetch this from an API?
(function(){
var app = angular.module('store', [ 'store-products' ]);
app.controller('StoreController', function(){
this.products = [
{ name: '. . .', price: 1.99, . . . },
{ name: '. . .', price: 1.99, . . . },
{ name: '. . .', price: 1.99, . . . },
. . .
});
})();
. . .
];
148. How do we get that data?
app.js
How do we fetch our
products from an API?
http://api.example.com/products.json
(function(){
var app = angular.module('store', [ 'store-products' ]);
app.controller('StoreController', function(){
this.products = ???;
. . .
});
})();
{ name: '. . .', price: 1.99, . . . },
{ name: '. . .', price: 1.99, . . . },
{ name: '. . .', price: 1.99, . . . },
[
. . .
]
149. Services give your Controller additional functionality, like ...
• Fetching JSON data from a web service with $http
• Logging messages to the JavaScript console with $log
• Filtering an array with $filter
We need a Service!
All built-in Services
start with a $
sign ...
150. The $http Service is how we make an async request to a server ...
• By using $http as a function with an options object:
Introducing the $http Service!
So how do we use it?
$http({ method: 'GET', url: '/products.json' });
• Or using one of the shortcut methods:
$http.get('/products.json', { apiKey: 'myApiKey' });
• Both return a Promise object with .success() and .error()
• If we tell $http to fetch JSON, the result will be automatically
decoded into JavaScript objects and arrays
151. Use this funky array syntax:
app.controller('SomeController', [ '$http', function($http){
} ]);
How does a Controller use a Service like $http?
Service name
Service name as an argument
Dependency Injection!
app.controller('SomeController', [ '$http', '$log', function($http, $log){
} ]);
If you needed more than one
152. When Angular is Loaded Services are Registered
SomeController $http
Injector
$log
app.controller('SomeController', [ '$http', '$log', function($http, $log){
} ]);
153. app.controller('SomeController', [ '$http', '$log', function($http, $log){
} ]);
A Controller is Initialized
SomeController $http
Injector
$log
and $log, too ...
I need $http ...
Psst...
When I run...
154. app.controller('SomeController', [ '$http', '$log', function($http, $log){
} ]);
Then When the Controller runs ...
SomeController $http
Injector
$log
Here ya go!
Dependency Injection!
155. (function(){
var app = angular.module('store', [ 'store-products' ]);
app.controller('StoreController',
So where were we?
app.js
){function(
this.products = ???;
);}
})();
156. (function(){
var app = angular.module('store', [ 'store-products' ]);
app.controller('StoreController',
Time for your injection!
app.js
){function(
this.products = ???;
);}
})();
[ '$http',
StoreController needs
the $http Service...
...so $http
gets injected
as an argument!
Now what?
$http
]
157. (function(){
var app = angular.module('store', [ 'store-products' ]);
app.controller('StoreController',
Let’s use our Service!
app.js
){function(
this.products = ???;
);}
})();
[ '$http', $http
$http.get('/products.json')
Fetch the contents of
products.json...
]
158. (function(){
var app = angular.module('store', [ 'store-products' ]);
app.controller('StoreController',
Our Service will Return Data
app.js
){function(
this.products = ???;
);}
})();
[ '$http', $http
$http.get('/products.json').success(function(data){
???
});
= data;
$http returns a Promise, so
success() gets the data...
What do we assign
data to, though...?
]
159. (function(){
var app = angular.module('store', [ 'store-products' ]);
app.controller('StoreController',
Storing the Data for use in our Page
app.js
){function(
);}
})();
[ '$http', $http
$http.get('/products.json').success(function(data){
});
= data;
var store = this;
store.products
We need to store what this is ...
... and now we have somewhere
to put our data!
But the page might look funny until the data loads.
]
160. (function(){
var app = angular.module('store', [ 'store-products' ]);
app.controller('StoreController',
Initialize Products to be a Blank Array
app.js
){function(
);}
})();
[ '$http', $http
$http.get('/products.json').success(function(data){
});
= data;
var store = this;
store.products
store.products = [ ];
We need to initialize products to an empty
array, since the page will render before our
data returns from our get request.
]
161.
162. $http.post('/path/to/resource.json', { param: 'value' });
Additional $http functionality
$http({ method: 'PATCH', url: '/path/to/resource.json' });
$http({ method: 'TRACE', url: '/path/to/resource.json' });
In addition to get() requests, $http can post(), put(), delete()...
$http.delete('/path/to/resource.json');
$http({ method: 'OPTIONS', url: '/path/to/resource.json' });
...or any other HTTP method by using a config object: