Angular.js for beginners
-
Upload
basia-madej -
Category
Technology
-
view
296 -
download
0
description
Transcript of Angular.js for beginners
![Page 1: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/1.jpg)
● Workshophttps://github.com/basiam/angular-beginnershttps://github.com/basiam/angular-beginners/archive/master.zip
● Text editorhttp://www.sublimetext.com/
![Page 2: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/2.jpg)
Angular.jsAngular.js for beginners
![Page 3: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/3.jpg)
Me?
https://twitter.com/basiamadej
http://github.com/basiam
![Page 4: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/4.jpg)
Resources● Angular.js https://angularjs.org/
● Twitter Bootstrap http://getbootstrap.com/
● AngularUIhttp://angular-ui.github.io/bootstrap/
![Page 5: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/5.jpg)
JavaScript● programming language,
● most commonly used as part of web browsers
● allows client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed
![Page 6: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/6.jpg)
jQuery vs vanilla JavaScript// jQuery
$.post('//example.com', { username: username }, function (data) {
// code
});
// Vanilla
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function (data) {
// code
}
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.open('POST', url);
httpRequest.send('username=' + encodeURIComponent(username));
![Page 7: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/7.jpg)
About Angular.js
● JavaScript framework
● for Single Page Applications
● developed by Google
![Page 8: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/8.jpg)
Cool things about Angular● directives● two-way data bindings● Model-View-Controller● modules● history● jQLite
![Page 9: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/9.jpg)
Directive“At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.”
Cool way to extend HTML easily by simply adding attributes, elements or comments.
![Page 10: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/10.jpg)
Basic direcitves● ngApp ● ngModel● ngBind● ngIf● ngRepeat● …….● …….
![Page 11: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/11.jpg)
Two-Way Data Binding Automatic synchronization of data between the model and view components
![Page 12: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/12.jpg)
ngApp, ngModel, ngBind● ngApp
● ngModel
● ngBind
![Page 13: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/13.jpg)
ngBind or {{ }}
FOUCFlash of unstyled content
extra html tags
![Page 14: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/14.jpg)
Workshop
![Page 15: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/15.jpg)
Angular already included
![Page 16: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/16.jpg)
Part 0 1. Open tasks/part0/index.html
2. Add missing code to enable angular on this page
3. Display the value of text input in 'greeting' header
![Page 17: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/17.jpg)
ngSrc● src vs ngSrc
![Page 18: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/18.jpg)
ngInit, ngRepeat● ngInit
● ngRepeat
![Page 19: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/19.jpg)
Filters ● filter using ngModel
● lowercase, uppercase, date, currency, orderBy
![Page 20: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/20.jpg)
Part 1 1. Open tasks/part1/index.html
2. Add at least one superhero, then display all of the
3. Enable filtering superheros based on 'search' input
![Page 21: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/21.jpg)
expand ngInit?● expand ngInit ?
![Page 22: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/22.jpg)
Views and Controllers
![Page 23: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/23.jpg)
ngController
![Page 24: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/24.jpg)
Controllers
![Page 25: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/25.jpg)
Part21. Open tasks/part2/superheros_controller.js
2. Open tasks/part2/index.html
3. Add missing code to display list of superheros
4. Add more superheros to SuperherosController
5. Display information about superpowers
6. Use form to add more superheros
![Page 26: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/26.jpg)
ngSubmit, ngClick, ngIf● ngSubmit
● ngIf
● ngClick
![Page 27: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/27.jpg)
Module● container
● to keep code clear● to keep code separated● to easily include all need parts
![Page 28: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/28.jpg)
Part3 - tasks/part3/superheros_app.js
![Page 29: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/29.jpg)
Part3 - tasks/part3/superheros_controllers.js
![Page 30: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/30.jpg)
UI Bootstraphttp://angular-ui.github.io/bootstrap/
![Page 31: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/31.jpg)
Part31. Open tasks/part3/index.html
2. Add 'ui.bootstrap' to superheroApp
3. Make sure we only display image when hero.image is present
4. Run 'showBigImage' on click
![Page 32: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/32.jpg)
Routes (basic)
![Page 33: Angular.js for beginners](https://reader033.fdocuments.in/reader033/viewer/2022052412/55935c771a28ab5e648b45b9/html5/thumbnails/33.jpg)
Resources● “AngularJS in 60 Minutes” by Dan Wahlin● https://docs.angularjs.org/● http://pl.wikipedia.org/wiki/JavaScript● https://gist.github.com/liamcurry/2597326●