Short introduction to angular

1. Building single page applications with Angular.js
Dieter De Mesmaeker

2. What is Angular Js?
Open source javascript framework
Single page applications
Created by Misko Hevery at Google
Heavy focus on testing
Augmented HTML

3. Introduction

4. Introduction

5. Introduction

6. Introduction

7. Introduction

8. MVC

9. Concepts

10. Controllers
Set up the initial state of the $scope
object

11. Controllers
Add behaviour to a $scope object

12. Controllers
Do NOT use controllers for DOM
manipulation or presentation logic!
(use Directives instead)
Only business Logic!
Why? Testability!

13. $scope
Refers to the application model
Glues the controller with its view
$scope inheritance

14. $scope

15. $scope

16. $scope
Why child scope for ng-repeat?

17. Services
View independent business logic

18. Services
View independent business logic

19. Services
Factory creates a single instance
Everything that is dependent on the
service gets a reference to that
instance
(Think of it as a singleton)

20. Directives
Extending HTML
DOM Manipulation

21. Directives

22. Directives
More useful example

23. Directives

24. Two-way data
binding
src: http:/
/www.slideshare.net/cloudvis/angularjs-framework

25. Two-way data
binding
src: http:/
/www.slideshare.net/cloudvis/angularjs-framework

26. Two-way data
binding
Classical template systems
Angular templates

27. Dependency
Injection

28. Dependency
Injection

29. $location service
Navigating in Angular

30. ng-Route

31. Bootstrapping the
Application

32. Hands on
Yeoman
Grunt
Bower
Depends on Node.js

33. Hands on
Step 1: Install node
http:/
/lmgtfy.com/?q=install+node
Step 2: Install Yeoman
npm install -g yo

34. Hands on
Install the angular-generator
https:/
/github.com/yeoman/
generator-angular