Angular js presentation at Datacom
-
Upload
david-xi-peng-yang -
Category
Engineering
-
view
157 -
download
1
Transcript of Angular js presentation at Datacom
![Page 1: Angular js presentation at Datacom](https://reader036.fdocuments.in/reader036/viewer/2022062307/55498ba5b4c905c26a8b50e9/html5/thumbnails/1.jpg)
An Introduction to Angular JS
![Page 2: Angular js presentation at Datacom](https://reader036.fdocuments.in/reader036/viewer/2022062307/55498ba5b4c905c26a8b50e9/html5/thumbnails/2.jpg)
AgendaOverview of Angular framework
Discuss the basic core features and functionality
Develop a demo web application
![Page 3: Angular js presentation at Datacom](https://reader036.fdocuments.in/reader036/viewer/2022062307/55498ba5b4c905c26a8b50e9/html5/thumbnails/3.jpg)
What is Angular JShttps://angularjs.org/
Angular JS is JavaScript framework for building rich
web application based on the power of JavaScript, CSS
and HTML5 in modern browsers.
Open Source (@ github)
Funded by Google
Cross Platform
![Page 4: Angular js presentation at Datacom](https://reader036.fdocuments.in/reader036/viewer/2022062307/55498ba5b4c905c26a8b50e9/html5/thumbnails/4.jpg)
Single Page Application
Reduce page reloading round trip
On-demand loading resources
Talks to API for data
SEO challenges
![Page 5: Angular js presentation at Datacom](https://reader036.fdocuments.in/reader036/viewer/2022062307/55498ba5b4c905c26a8b50e9/html5/thumbnails/5.jpg)
Application require more interactivityAutomatic refresh (notifications)
More Animations
Fast editing
More speed
![Page 6: Angular js presentation at Datacom](https://reader036.fdocuments.in/reader036/viewer/2022062307/55498ba5b4c905c26a8b50e9/html5/thumbnails/6.jpg)
Thick Server, Thin Client
Client Side • DOM Manipulation • Javascript• JQuery
Server Side • Routing• View Layer• Application Logic• Persistence
• ASP.NET• PHP• Ruby• JSP• XML
![Page 7: Angular js presentation at Datacom](https://reader036.fdocuments.in/reader036/viewer/2022062307/55498ba5b4c905c26a8b50e9/html5/thumbnails/7.jpg)
Thin Server, Thick Client
Client Side • DOM Manipulation• Animation• Routing• View layer• Application Logic
• Angular JS• Backbone• Ember• Knockout• Require JS
Server Side • Persistence • Node JS• REST
![Page 8: Angular js presentation at Datacom](https://reader036.fdocuments.in/reader036/viewer/2022062307/55498ba5b4c905c26a8b50e9/html5/thumbnails/8.jpg)
The Rise of JavaScript Libraries
![Page 9: Angular js presentation at Datacom](https://reader036.fdocuments.in/reader036/viewer/2022062307/55498ba5b4c905c26a8b50e9/html5/thumbnails/9.jpg)
Why AngularJSSeparation of concerns
Dependency Injection
Two way binding
Lots of built-in and open source directives
Routing support
Built with testability in mind
Filters and events
![Page 10: Angular js presentation at Datacom](https://reader036.fdocuments.in/reader036/viewer/2022062307/55498ba5b4c905c26a8b50e9/html5/thumbnails/10.jpg)
DirectiveIndex.html
<div ng-controller="Controller">
<div my-customer></div>
</div>
Scirpt.js.directive('myCustomer', function() {
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
![Page 11: Angular js presentation at Datacom](https://reader036.fdocuments.in/reader036/viewer/2022062307/55498ba5b4c905c26a8b50e9/html5/thumbnails/11.jpg)
Bootstrap
![Page 12: Angular js presentation at Datacom](https://reader036.fdocuments.in/reader036/viewer/2022062307/55498ba5b4c905c26a8b50e9/html5/thumbnails/12.jpg)
Digest cycle and $watch list
![Page 13: Angular js presentation at Datacom](https://reader036.fdocuments.in/reader036/viewer/2022062307/55498ba5b4c905c26a8b50e9/html5/thumbnails/13.jpg)
Demo – work flow
NPM Install core tools
Yeoman Create a new webapp
Bower Handle dependencies
Grunt Preview, test, build
Demo App URL: http://wordpress.com/fresh/ API: https
://public-api.wordpress.com/rest/v1/freshly-pressed?number=20&fields=editorial