An introduction to AngularJS at Wikilogia

1. AngularJS
HTML enhanced for web app
@MhdAljuboori

2. HTML Enhanced?
● Static pages.
● Using JavaScript (DOM & AJAX).
● JQuery made our life easier.
HTML ENHANCED

3. JQuery in large apps
● Real-time in just one page.
● Single-page application.
JQUERY GENERATION

4. AngularJS
● An open-source web application framework.
● Created by Misko Hevery 2009.
● Implements futuristic Web standards now.
● Maintained by Google and a community of
individual developers.
● Data Binding frameworks like (Ember, Knockout, …
etc).
INTRODUCTION

5. AngularJS
● Single-page applications.
● Based on the Model
View Controller concept
(MVC).
DATA BINDING FRAMEWORKS

6. AngularJS
Provide solutions for:
● Routing - handling updates to the URL
● Templating - dynamically creating and updating HTML
based on templates and models
● Data binding - synchronize the model and user interface
DATA BINDING FRAMEWORKS

7. Easiest Way to create tabs
<div class="tabbable">
<ul class="nav nav-tabs" >
<li class="active"><a href="#tab1" data-toggle ="tab">First title </a></li>
<li><a href="#tab2" data-toggle ="tab">Second title </a></li>
</ul>
<div class="tab-content" >
<div class="tab-pane active" id="tab1">
First static content
</div>
<div class="tab-pane" id="tab2">
Second static content
</div>
</div>
</div>
TABS

8. Tabs in AngularJS
<tabset>
<tab heading="First title">First static
content</tab>
<tab heading="Second title">Second static
content</tab>
</tabset>
TABS

9. Using AngularJS
EXAMPLES
Examples
https://github.com/MhdAljuboori/ng-examples

10. Bootstrapping AngularJS
● Declare the app with ng-app.
● Create a new module.
● Add some dependencies.
● Create your first controller.
BOOTSTRAPPING ANGULAR

11. AngularJS Now
● Angular 2.0
● Microsoft get involved
● AtScript (ES6)
● Easier and Faster
● Does not look like Angular 1.x at all!
ANGULAR NOW

12. AngularJS in App
● Without backend, use Backend as a Service
(BaaS) Service like Firebase.
● With backend, we have two approaches
○ Single-page app.
○ Real-time only in one page.
THE LIFE EASIER

13. Summery
● Where were we.
● Introduction to AngularJS.
● Examples.
● AngularJS in Apps
SUMMERY

14. We are done
FINISHING
Questions?

15. FINISHING
Thanks