Embed Size (px)
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.
Citation preview
Modern Web Applicationsusing
Ibrahim Abdel Fattah MohamedWeb Development & Software Engineer
@bingorabbithttp://bingorabbit.com
Agenda
Whatis
Angular JS?
.js
~17,000Lines of code
~1,000Lines of code
یا راجل؟
Whatis
Angular JS?
.js
Library
Framework
Whatis
Angular JS?
.js
Single Page Applications
You already know about it..
“Angular is what HTML would
have been..”-- Angular Documentation
Why?
Simplicityis the ultimate sophistication...
-- Leonardo Da Vinci
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>
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..
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
W
Modularity
Reusability
Community
AngularJS HOT FeaturesSome
Data Binding
Angular Directives
Angular Filters
Routing
STOP the ****** nonsense and show
me some CODE!github repo used in session:
-http://github.com/bingorabbit/shebbak-http://github.com/bingorabbit/bondera
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
Applications using AngularJS
Built with AngularJS: http://goo.gl/r2c2at
Q?s
![AngularJS Essentials - accorsi.netaccorsi.net/docs/AngularJS Essentials (Bravas[Packt]).pdf · AngularJS Essentials Design and construct reusable, maintainable, and modular web applications](https://img.pdfslide.net/doc/110x75/5e030726d9e2ea2f20416bcc/angularjs-essentials-essentials-bravaspacktpdf-angularjs-essentials-design.jpg)
![[Nuxeo World 2013] BUILDING APPLICATIONS WITH ANGULARJS - DAMIEN METZLER](https://img.pdfslide.net/doc/110x75/554a4919b4c9055a408b553f/nuxeo-world-2013-building-applications-with-angularjs-damien-metzler.jpg)
