AngularJS 1.x is still used widely in enterprise environments and thus still relevant. These slides are used to prepare participants with fundamental knowledge on how to build and maintain AngularJS 1.x applications. It covers the basic concepts of the framework, and uses exercises to walk participants through.

1. AngularJS 1.x
Training
Roberto Ramadhin
May 2017

2. AngularJS 1.x
Your trainer

3. Why AngularJS?
AngularJS is a framework which … extends HTML with new attributes
… is perfect for single-page applications
… reduces complexity
… keeps your JavaScript code maintainable
… and much more

4. What is AngularJS?
MVC or MV* framework
Design pattern
Separation of concerns
Improves readability & maintainability

5. What is AngularJS?
Conceptual overview
Template Directives Model Scope Expressions Compiler
Filter View Data binding Controller Dependency Injection
Injector Module Service
https://docs.angularjs.org/guide/concepts

6. How to use AngularJS?
Let’s setup our local development environment
1. Go to plnkr.co
2. Launch the Editor
3. Add AngularJS (1.6.x)
4. Add Bootstrap CSS (latest)

7. How to use AngularJS?
Modules & Directives
Let’s build our first application
1. Register a new Angular application using angular.module()
2. Load the application using the ng-app directive
3. Verify the application works by using ng-init and expressions
https://docs.angularjs.org/api

8. How to use AngularJS?
Data-binding
Synchronizing between the model and the view
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>

9. How to use AngularJS?
Controllers & Scope
Control the data of an AngularJS application
app.controller(‘myController’, function() {
});
<div ng-controller=“myController”>
</div>
JavaScript HTML

10. Control the data of an AngularJS application
app.controller(‘myController’,
function($scope) {
$scope.name = ‘Roberto’;
});
<div ng-controller=“myController”>
<p ng-bind=“name”> </p>
</div>
JavaScript HTML
$scope glues it together
How to use AngularJS?
Controllers & Scope

11. How to use AngularJS?
Exercise
Create invoice app to calculate quantity * cost
Invoice
Quantity:
Cost:
Total: $2.00
1
2
Tip: Use ng-model on the inputs and an expression for the total

12. How to use AngularJS?
Filters
Are used to control the representation of data
Explore more filters
https://docs.angularjs.org/api/ng/filter
Expression
{{ name | uppercase }}
{{ amount | currency }}
Using $filter service
$filter(‘uppercase’)(name)
$filter(‘amount’)(currency)

13. How to use AngularJS?
Exercise
How to create your own filter
Filter guide
https://docs.angularjs.org/guide/filter
Assignment
Create a custom filter that Capitalizes the first letter of a string
So that ‘rotterdam’ becomes ‘Rotterdam’
Hint - your filter should:
return string.charAt(0).toUpperCase() + string.slice(1);

14. How to use AngularJS?
Dependency Injection
Allows program designs to be loosely coupled
Application
1
Services Filters
Application
2
Services Filters

15. How to use AngularJS?
Exercise
Separate the filters of your application for re-use
Dependency Injection guide
https://docs.angularjs.org/guide/di
Assignment
1. Create a new file called filters.js
2. Create new module
3. Move filter logic to new module
4. Add dependency in main app

16. How to use AngularJS?
Built-in directives
ng-repeat instantiates a template once per item from a collection
Model
[‘volkswagen’, ‘audi’, ‘mercedes’, ‘bmw’]
View
• Volkswagen
• Audi
• Mercedes
• BMW

17. How to use AngularJS?
Built-in directives
ng-repeat instantiates a template once per item from a collection
Model
[
{name: ‘iPhone 7’, price: 650},
{name: ‘Galaxy S8’, price: 730},
{name: ‘OnePlus 3T’, price: 440}
]
View
Name Price
iPhone 7 650
Galaxy S8 730
OnePlus 3T 440
https://www.w3schools.com/angular/angular_directives.asp

18. How to use AngularJS?
Exercise
Use ng-repeat in combination with filters: currency & orderBy
View
Name Price
OnePlus 3T $ 440
iPhone 7 $ 650
Galaxy S8 $ 730
Order by price
No decimals
https://www.w3schools.com/angular/ng_filter_orderby.asp

19. How to use AngularJS?
Services
Sharing data and/or functionality across controllers and modules
Built-in services (+/- 30)
$location, $http, $filter, …
Build your own
app.service(‘myService’, function () {
this.myMethod = function () {
return something;
}
});
https://docs.angularjs.org/api/ng/service

20. How to use AngularJS?
Exercise
Build a tax calculation service
Hint – your method should: return price + (price*vat)
View
Name Price Price (incl. VAT)
OnePlus 3T $ 440 $ 532
iPhone 7 $ 650 $ 787
Galaxy S8 $ 730 $ 883
Service
Includes a variable VAT = 0.21 (21%)
Includes a method which calculates the
totalPrice

21. How to use AngularJS?
Exercise
Add a ‘filter’ filter to search through results
https://www.w3schools.com/angular/angular_filters.asp
View
Search:
Name Price Price (incl. VAT)
iPhone 7 $ 650 $ 787
iPho
Use ng-model for two-way data binding

22. How to use AngularJS?
Custom directives
Create reusable DOM components
https://www.sitepoint.com/practical-guide-angularjs-directives/

23. How to use AngularJS?
DOM Control & Events
Essential to provide a good user experience
https://www.w3schools.com/angular/angular_htmldom.asp
ng-disabled ng-show ng-hide
ng-click ng-blur ng-mouseover

24. How to use AngularJS?
$http
A service to read data from (remote) servers
https://www.w3schools.com/angular/angular_http.asp
Let’s externalize our data

25. How to use AngularJS?
Routing
Managing states in your application
Step1:
Data entry
Step 2:
Choose product
Step 3:
Confirmation
https://github.com/angular-ui/ui-router

26. How to use AngularJS?
Practice
Follow this tutorial to practice your skills
https://www.codeschool.com/courses/shaping-up-with-angularjs

27. References
W3Schools AngularJS
https://www.w3schools.com/angular/default.asp
AngularJS Conceptual Overview
https://docs.angularjs.org/guide/concepts
What is the difference between AngularJs and Angular 2?
https://www.quora.com/What-is-the-difference-between-AngularJs-and-Angular-2
Where to look for more
information?