modern web applications using angularjs
DESCRIPTION
An introductory session about #AngularJS, Kinda mentions history but focuses more on Angular's features, and what it introduces to Web Development.The session was introduced in Google Dev Fest 2014 in Cairo, Egypt . And then revised and presented in #CATScipe14.TRANSCRIPT
![Page 1: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/1.jpg)
Modern Web Applicationsusing
![Page 2: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/2.jpg)
Ibrahim Abdel Fattah MohamedWeb Development & Software Engineer
@bingorabbithttp://bingorabbit.com
![Page 3: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/3.jpg)
![Page 4: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/4.jpg)
Agenda
![Page 5: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/5.jpg)
Whatis
Angular JS?
![Page 6: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/6.jpg)
.js
![Page 7: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/7.jpg)
~17,000Lines of code
![Page 8: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/8.jpg)
~1,000Lines of code
![Page 9: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/9.jpg)
یا راجل؟
![Page 10: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/10.jpg)
![Page 11: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/11.jpg)
Whatis
Angular JS?
![Page 12: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/12.jpg)
.js
![Page 13: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/13.jpg)
Library
![Page 14: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/14.jpg)
Framework
![Page 15: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/15.jpg)
Whatis
Angular JS?
![Page 16: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/16.jpg)
.js
![Page 17: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/17.jpg)
Single Page Applications
![Page 18: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/18.jpg)
You already know about it..
![Page 19: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/19.jpg)
“Angular is what HTML would
have been..”-- Angular Documentation
![Page 20: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/20.jpg)
Why?
![Page 21: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/21.jpg)
Simplicityis the ultimate sophistication...
-- Leonardo Da Vinci
![Page 22: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/22.jpg)
Before1| <!DOCTYPE html>2| <html lang="en">3| <head>4| <title>Index</title>5| </head>6| <body>7| Name: <input type="text" id="myInputBox">8| Hello, <span id="nameSpan"></span>9| <script>10| var inputElement = document.getElementById("myInputBox");11| inputElement.addEventListener('keyup', function(){12| var text = inputElement.value;13| nameElement.innerHTML = text;14| });15| </script>17| </body>18| </html>
![Page 23: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/23.jpg)
1| <!DOCTYPE html>2| <html lang="en">3| <head>4| <title>Index</title>5| <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>6| </head>7| <body>8| Name: <input type="text" id="myInputBox">9| Hello, <span id="nameSpan"></span>10| <script>11| $("#myInputBox").keyup(function(){12| $("#nameSpan").text($("#myInputBox").val());13| });14| </script>15| </body>16| </html>
Beforeeven a better version..
![Page 24: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/24.jpg)
1| <!DOCTYPE html>2| <html lang="en" ng-app>3| <head>4| <title>Index</title>5| <script src="angular.min.js"></script>6| </head>7| <body>8| Name: <input type="text" ng-model=”nameModel” />9| Hello, {{ nameModel }}10| </body>11| </html>
After
![Page 25: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/25.jpg)
W
![Page 26: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/26.jpg)
![Page 27: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/27.jpg)
Modularity
![Page 28: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/28.jpg)
Reusability
![Page 29: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/29.jpg)
Community
![Page 30: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/30.jpg)
AngularJS HOT FeaturesSome
![Page 31: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/31.jpg)
Data Binding
![Page 32: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/32.jpg)
Angular Directives
![Page 33: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/33.jpg)
Angular Filters
![Page 34: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/34.jpg)
Routing
![Page 35: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/35.jpg)
![Page 36: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/36.jpg)
STOP the ****** nonsense and show
me some CODE!github repo used in session:
-http://github.com/bingorabbit/shebbak-http://github.com/bingorabbit/bondera
![Page 37: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/37.jpg)
Keywords- Declarative vs. Imperative
Programming- Web Components- Promise Objects- History of AngularJS- angularjs.org- ng-book- W3Schools Angular: http:
//goo.gl/vQjSKp- http://todomvc.com
![Page 38: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/38.jpg)
Applications using AngularJS
Built with AngularJS: http://goo.gl/r2c2at
![Page 39: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/39.jpg)
![Page 40: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/40.jpg)
![Page 41: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/41.jpg)
![Page 42: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/42.jpg)
![Page 43: Modern Web Applications using AngularJS](https://reader034.vdocuments.net/reader034/viewer/2022042521/559445661a28abfa2f8b4820/html5/thumbnails/43.jpg)
Q?s