This document provides an overview of AngularJS including: - Recommended text editors for AngularJS development - The basics of AngularJS including directives, data binding, modules, controllers, routing, and services - Best practices for structuring AngularJS applications into modular, maintainable code including recommendations to organize files by feature and type

1. Devcon Summit 2016
Christian John Felix

2. “The A1”
Christian John Felix
Kick Start

3. It takes the front end development
to the next level.
Why AngularJS?

4. Two things before you start:
1. Text Editor
• Download Sublimetext 3
• Others
• Brackets etc.
• Atom,
• Notepad ++,
• Dreamweaver,
• VSCode,
• Visual Studio 2015 (Community Edition)
2. AngularJS
• Download AngularJS 1 (Library)

5. https://angularjs.org
Click to DOWNLOAD the library

6. https://www.sublimetext.com/3
Or type in google
sublimetext 3 then click the
first link and read the
instructions.

7. The Basics

8. Directive and Data Binding

9. • AngularJS Data-Binding in Angular apps is the automatic
synchronization of data between the model and view
components.
• AngularJS Directives are extended HTML attributes with the
prefix ng- .

11. DEMO

12. The ng-model directive binds the value of HTML controls
(input, select, textarea) to application data.
The ng-app directive initializes an AngularJS application.

13. Modules and Controllers

14. Module - A module is a collection of services, directives,
controllers, filters, and configuration information.

15. Controller - controls the flow of data in the application.
A controller is defined using ng-controller directive.

16. DEMO

17. Routing

18. The ngRoute module helps your application to become a Single Page
Application.
INJECTED
ng-view is the directive that angular uses as a container to switch between views.
NOTE: Your application needs a container to put the content provided by the routing.

19. DEMO

20. Service

21. Services - Angular services are substitutable objects that are wired together using
dependency injection (DI). You can use services to organize and share code across your app.

22. DEMO

23. Different emotional feelings using
AngularJS

24. I owe you Controller!
First encounter with data binding and controller
Data Binding ROCKS!

25. First encounter with Services

26. DI (Dependency Injection)
WHO ARE YOU!!!!!

27. I’m DONE!
Going back
to JQEURY!

28. When you or your team
understand how it works!

29. When building a large scale app
You need to plan.

30. Structuring application

31. AngularJS is a MVW
“Model View Whatever”

32. app/
controllers/
services/
views/
directives/
filters/
By Type • OK for demo or start up
• Not advisable on a large scale app.
• Hard to maintain.

33. Common Starting Structure

34. When your application grows.

35. When your application grows.

36. Where is that controller!

37. app/
app.js
config.js
customer/
filter.js
orders/
products/
service.js
By Feature • Good way to start.
• Based on user story.
• Much better than by type.

38. When your application grows.

39. Combining the two
app/
app.js
config.js
customer/
controllers/
services/
views/
orders/
controllers/
services/
views/
products/
controllers/
services/
views/
By feature &
by type
• Manageable and maintainable.
• Easier to locate the files.
• Easier to work with another
feature.

40. Modular Application

41. Modular Application
ModApp

42. customer module
customer/
customer.module.js
controllers/
views/
services/
order module
order/
order.module.js
controllers/
views/
services/
Main module
product module
product/
product.module.js
controllers/
views/
services/
INJECTED

43. datatables
toastr
ngRoute
blockUI
ngMaterial
core
common
order
module
customer
module
user
module
product
module
package
module
ngMessages ngAnimate
ui.bootstrap
Main module

44. customer
module
product
module
package
module
reports
module
order
module
Different Modules with Different
Developers

45. Code Pattern

46. AngularJS
https://angularjs.org/
AngularJS Style Guide
https://github.com/johnpapa/angular-styleguid
Block UI
https://github.com/McNull/angular-block-ui
ToastR
https://github.com/Foxandxss/angular-toastr
$http Promises
http://blog.ninja-squad.com/2015/05/28/angularjs-promises/
Bootstrap
https://getbootstrap.com

47. TIPS

48. To God be the Glory
#HappyCoding
#angularjsPH

49. END