A quick intro to AngularJS. In this presentation you will find out why AngularJS is so popular among web developers and learn how to make a web app in 5 easy steps. You can download the FREE app for your Android and Fire OS device here: http://www.amazon.com/dp/B019OQKACS/ref=cm_sw_r_fa_dp_uPzEwb07QK1VT

1. Introduction to AngularJS
Cristian-Dan Bara
Roessingh Research and Development
www.rrd.nl
12.nov.2015

2. What is it? Why use it?
“AngularJS is a structural framework for dynamic web apps. It lets you use HTML
as your template language and lets you extend HTML's syntax to express your
application's components clearly and succinctly. Angular's data binding and
dependency injection eliminate much of the code you would otherwise have to
write.”
from angularjs.org

3. What is it?
“AngularJS is a structural framework for dynamic web apps. It lets you use HTML
as your template language and lets you extend HTML's syntax to express your
application's components clearly and succinctly. Angular's data binding and
dependency injection eliminate much of the code you would otherwise have to
write.”
from angularjs.org

4. Why use it? ... because MVC
AngularJS uses the model-view-controller
Model
View
Controller

5. Enough talk. Let’s code
Most apps are actually lists.
Let’s make our own to do list
I use Google Web Designer to build
the ‘view’.

6. 1.Defining an angular app and module
index.html
app.js
The app and module need to have the same name

7. 2. Define an app controller
index.html
app.js
The controller must have the same name in both files

8. 3. Make/get the model and link it to the controller
app.js
Our app knows what data to use, only when it is assigned to its $scope.
This is the link between the model and the controller

9. 4. Link the controller to the view
This is a complex procedure. We will use several directives.
!Important: the controller knows only what is in its $scope

10. 4.1 Angular directives
Directives are extended HTML attributes with the prefix ng-
index.html
In our app we use:
ng-repeat: will repeat through our model’s
data set
ng-class: will attach a class to our to-do
item when the item.done is true
ng-switch: will switch according to
item.done flag
ng-switch-when: will display or hide it’s
HTML <div> if the ng-switch expression
matches the ng-switch-when value
ng-click: will call it’s function when the user
clicks on the <div>

11. 4.2 Angular data binding
The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application.
The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.
(docs.angularjs.org)
In index.html, I bind the item text to the text displayed on each to-do element in the view. In angular this
is done through {{ }} double brackets.

12. 4.Link the controller to the view
What I’m asking the controller to do is:
“For each item in the model set, create
a view and display the item data
according to the view’s composition
and style rules”.

13. 5. Let’s make the buttons work
The $scope can define functions which add logic to the view.
5.1. Marking an item as done.
in app.js I defined a function which marks the
element at the index as done.
in index.html I’m calling the markAsDone function when there is click on the check mark.

14. 5. Let’s make the buttons work
5.2 Remove an item from the list.
in app.js I defined a function which removes
the item at the index position from the model.
in index.html I’m calling the removeToDo function when there
is click on the x mark.

15. 5. Let’s make the buttons work
5.3 Add new items to the list.
in app.js I defined a function which
pushes a new item to the model.
in index.html I’m calling the addToDo function when there is click on the + button.

16. Thank you :)
You can download all the code from:
https://github.com/cristianbara/intro2angularjs
The package is structure in 3 folders:
view - contains the Google Web Designer project.
compiled-view - contains a simplified view (I use this for the app)
finished-app - the working AngularJS app