Introduction to AngularJS for the Python Web Developer
-
Upload
jprakash0205 -
Category
Documents
-
view
19 -
download
0
description
Transcript of Introduction to AngularJS for the Python Web Developer
![Page 1: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/1.jpg)
Intro to AngularJS for the Python Web Developer
By Paul Bailey - bit.ly/PizzaPanther
![Page 2: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/2.jpg)
About Me
Web Developer for:
DramaFever.com NeutronDrive.com
![Page 3: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/3.jpg)
jQuery
A great tool but use the right tool for the right job
Angular JS
Angular JS
![Page 4: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/4.jpg)
So What is Angular Good For?
➔ Single Page Web Apps
➔ Complex frontend interactions
➔ Making frontend code unit testable
➔ Creating Reusable Components
![Page 5: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/5.jpg)
Single Page Web Apps➢ HTML templates processed in the
browser○ GMail○ Github (kind of)○ Chrome Apps - Neutron Drive 😻○ Hybrid Mobile Apps
➢ Provide an ehanced user experience or a more app like experience to the web
![Page 6: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/6.jpg)
Complex frontend interactions
➢ Move from manipulating HTML to just manipulating your data.
var html = generate_table(data);$(“#myTables”).html(html);$(“#myDiv”).toggleClass(‘visible’);
$scope.table = data;
<table ng-if=”table” ng-repeat=”row in table”>....
jQuery Angular
![Page 7: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/7.jpg)
Making frontend code unit testable➢ Always good to do integration testing with
tools like Selenium
➢ Additionally makes it easier to unit test because of separation of concerns
![Page 8: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/8.jpg)
Creating Reusable Components<input type=”text” autocomplete ng-model=”search”>
<material-slider ng-model="myValue" min="5" max="500"></material-slider>
![Page 9: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/9.jpg)
That’s Cool but What About Python?
Angular JS + Python RESTful Backend =
![Page 10: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/10.jpg)
Python RESTful APIs
Checkout:REST API Design 101by Sheila Allen on Sunday @ 1pm
Django REST Frameworkhttp://www.django-rest-framework.org/
![Page 11: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/11.jpg)
AngularJS Concepts
➢ Controllers - templating, data binding
➢ Directives - resuable components
➢ Services - communication to your backend
➢ Routing - route URLs to templates and
controllers
➢ Extras - Localization, Form Validation, and more!
![Page 12: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/12.jpg)
Controllers
![Page 13: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/13.jpg)
Controllers
![Page 14: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/14.jpg)
Controllers
![Page 15: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/15.jpg)
Controllers
![Page 16: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/16.jpg)
Directives
➢ Custom reusable HTML tags○ <autocomplete></autocomplete>
➢ Custom attributes○ <input autocomplete=”data_list”>
➢ Class and Comment Directives
![Page 17: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/17.jpg)
Directives
![Page 18: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/18.jpg)
Directives
![Page 19: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/19.jpg)
Services, Factories, Providers
![Page 20: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/20.jpg)
Routing
![Page 21: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/21.jpg)
Tips & Tricks
![Page 22: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/22.jpg)
CSRF Cookies
$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
![Page 23: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/23.jpg)
Don’t Repeat Your Templates
➢ Pre-render for search engines: prerender.io
➢ Pre-render for user experience. Probably use Node.js 😞
➢ Load initial data with initial request○ Service checks for initial data before calling
backend
![Page 24: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/24.jpg)
Changing Template Tags
During app.config:$interpolateProvider.startSymbol('[[');$interpolateProvider.endSymbol(']]');
changes: {{ variable }} to [[ variable ]]
![Page 25: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/25.jpg)
Angular Libraries
➢ Extras: Route, Cookies, Animate, etc:
code.angularjs.org/1.2.25/
➢ AngularUI: angular-ui.github.io
➢ Material Angular: material.angularjs.org
➢ Karma (testing): karma-runner.github.io
![Page 26: Introduction to AngularJS for the Python Web Developer](https://reader035.fdocuments.in/reader035/viewer/2022062411/577c79c41a28abe05493f062/html5/thumbnails/26.jpg)