AngularJS tutorial for beginners. The tutorial code is on https://github.com/theRealImy/testAngular

1. AngularJS
Timea Turdean
www.timeaturdean.com

2. Agenda
 Introduction
 AngularJS – identify yourself
 AngularJS – where can I find you?
 AngularJS – what do I need to get started?
 Examples & building blocks
 Project work

3. Inroduction

4. AngularJS - identify yourself
 A JavaScript open-source-framework for frontend
 Created & maintained by people @Google since
2009
 Based on the single-page application(SPA) & based
on the MVC pattern
 Fun fact – the versions have funny names
 2014 1 .3.x unicorn-hydrafication
 2014 1.2.26 captivating-disinterest
 2010 0.9.0 dragon-breath

5. AngularJS – where can I find you?
 On the official website: angularjs.org
 Online videos: Dan Wahlin AngularJS in 20ish min,
AngularJS in 60ish min
 Confference: ngeurope.org
 Tutorials: w3schools.com, CodeSchool
 Before starting with AngularJS, you should have a
basic understanding of:
 HTML
 CSS
 JavaScript
 This tutorial is based on the code
@https://github.com/theRealImy/testAngular

6. AngularJS – what do I need to get started?
 angularDemo folder
 index.html
 index.html:
 <script src=“lib/angular.js”</script> from https://angularjs.org/
 OR
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2
6/angular.min.js"></script>
 Example 1 in tutorial

7. Let’s get started!

8. Before & After AngularJS

9. Before & After AngularJS
Example 5 in tutorial

10. AngularJS Directives
 AngularJS extends HTML with ng-directives.
 Examples
 ng-app Example 5 in tutorial
 ng-model Example 5 in tutorial
 ng-bind Example 6 in tutorial
 ng-init Example 9 in tutorial

11. AngularJS Modules
 Dan Wahling video (till 40:28)
 ng-controller Example 10 & 11 in tutorial
 ng-repeat Example 12 in tutorial

12. AngularJS Routes
 Routes are used for navigation between views
 Download or link angular-route.js
 https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/ang
ular-route.js
 Install a server (node/wamp/xampp)
 Dan Wahling video (42:04 - 44:45)
 Routes Example 13 in tutorial

13. AngularJS Factory
 Factory is a service in AngularJS
 module.factory( 'factoryName', function );
 Factory in Angular Example 14 in tutorial

14. AngularJS server side
 $http is an internal service of AngularJS
 $https example Example 15 in tutorial

15. Project work

16. Project work

17. Project work

18. Project Work
 Tutorial code:
https://github.com/theRealImy/testAngular
 Project work:
https://github.com/edemguru/angularWorkshop

19. THANK YOU for PARTICIPATING in
AngularJS
Timea Turdean
www.timeaturdean.com