Download - The A1 by Christian John Felix
![Page 1: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/1.jpg)
Devcon Summit 2016
Christian John Felix
![Page 2: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/2.jpg)
“The A1”
Christian John Felix
Kick Start
![Page 3: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/3.jpg)
It takes the front end development
to the next level.
Why AngularJS?
![Page 4: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/4.jpg)
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)
![Page 5: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/5.jpg)
https://angularjs.org
Click to DOWNLOAD the library
![Page 6: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/6.jpg)
https://www.sublimetext.com/3
Or type in google sublimetext 3 then click the first link and read the instructions.
![Page 7: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/7.jpg)
The Basics
![Page 8: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/8.jpg)
Directive and Data Binding
![Page 9: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/9.jpg)
• 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- .
![Page 10: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/10.jpg)
![Page 11: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/11.jpg)
DEMO
![Page 12: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/12.jpg)
The ng-model directive binds the value of HTML controls(input, select, textarea) to application data.
The ng-app directive initializes an AngularJS application.
![Page 13: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/13.jpg)
Modules and Controllers
![Page 14: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/14.jpg)
Module - A module is a collection of services, directives, controllers, filters, and configuration information.
![Page 15: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/15.jpg)
Controller - controls the flow of data in the application.
A controller is defined using ng-controller directive.
![Page 16: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/16.jpg)
DEMO
![Page 17: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/17.jpg)
Routing
![Page 18: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/18.jpg)
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.
![Page 19: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/19.jpg)
DEMO
![Page 20: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/20.jpg)
Service
![Page 21: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/21.jpg)
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.
![Page 22: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/22.jpg)
DEMO
![Page 23: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/23.jpg)
Different emotional feelings using
AngularJS
![Page 24: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/24.jpg)
I owe you Controller!
First encounter with data binding and controller
Data Binding ROCKS!
![Page 25: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/25.jpg)
First encounter with Services
![Page 26: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/26.jpg)
DI (Dependency Injection)
WHO ARE YOU!!!!!
![Page 27: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/27.jpg)
I’m DONE!
Going back
to JQEURY!
![Page 28: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/28.jpg)
When you or your team
understand how it works!
![Page 29: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/29.jpg)
When building a large scale app
You need to plan.
![Page 30: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/30.jpg)
Structuring application
![Page 31: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/31.jpg)
AngularJS is a MVW
“Model View Whatever”
![Page 32: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/32.jpg)
app/controllers/services/views/directives/filters/
By Type • OK for demo or start up• Not advisable on a large scale app.• Hard to maintain.
![Page 33: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/33.jpg)
Common Starting Structure
![Page 34: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/34.jpg)
When your application grows.
![Page 35: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/35.jpg)
When your application grows.
![Page 36: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/36.jpg)
Where is that controller!
![Page 37: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/37.jpg)
app/app.jsconfig.js customer/filter.jsorders/products/service.js
By Feature• Good way to start.• Based on user story.• Much better than by type.
![Page 38: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/38.jpg)
When your application grows.
![Page 39: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/39.jpg)
Combining the two
app/app.jsconfig.jscustomer/
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.
![Page 40: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/40.jpg)
Modular Application
![Page 41: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/41.jpg)
Modular Application
ModApp
![Page 42: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/42.jpg)
customer module
customer/customer.module.jscontrollers/views/services/
order module
order/order.module.jscontrollers/views/services/
Main module
product module
product/product.module.jscontrollers/views/services/
INJECTED
![Page 43: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/43.jpg)
datatables
toastr
ngRoute
blockUI
ngMaterial
core
common
order module
customer module
user module
product module
package module
ngMessages ngAnimate
ui.bootstrap
Main module
![Page 44: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/44.jpg)
customer module
product module
package module
reports module
order module
Different Modules with Different
Developers
![Page 45: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/45.jpg)
Code Pattern
![Page 46: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/46.jpg)
AngularJShttps://angularjs.org/
AngularJS Style Guidehttps://github.com/johnpapa/angular-styleguid
Block UIhttps://github.com/McNull/angular-block-ui
ToastRhttps://github.com/Foxandxss/angular-toastr
$http Promiseshttp://blog.ninja-squad.com/2015/05/28/angularjs-promises/
Bootstraphttps://getbootstrap.com
![Page 47: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/47.jpg)
TIPS
![Page 48: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/48.jpg)
To God be the Glory
#HappyCoding
#angularjsPH
![Page 49: The A1 by Christian John Felix](https://reader031.vdocuments.us/reader031/viewer/2022030305/587278eb1a28abc7068b4d25/html5/thumbnails/49.jpg)
END