introduction to angularjs for the python web developer
DESCRIPTION
Introduction to AngularJS for the Python Web DeveloperTRANSCRIPT
Intro to AngularJS for the Python Web Developer
By Paul Bailey - bit.ly/PizzaPanther
About Me
Web Developer for:
DramaFever.com NeutronDrive.com
jQuery
A great tool but use the right tool for the right job
Angular JS
Angular JS
So What is Angular Good For?
➔ Single Page Web Apps
➔ Complex frontend interactions
➔ Making frontend code unit testable
➔ Creating Reusable Components
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
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
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
Creating Reusable Components<input type=”text” autocomplete ng-model=”search”>
<material-slider ng-model="myValue" min="5" max="500"></material-slider>
That’s Cool but What About Python?
Angular JS + Python RESTful Backend =
Python RESTful APIs
Checkout:REST API Design 101by Sheila Allen on Sunday @ 1pm
Django REST Frameworkhttp://www.django-rest-framework.org/
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!
Controllers
Controllers
Controllers
Controllers
Directives
➢ Custom reusable HTML tags○ <autocomplete></autocomplete>
➢ Custom attributes○ <input autocomplete=”data_list”>
➢ Class and Comment Directives
Directives
Directives
Services, Factories, Providers
Routing
Tips & Tricks
CSRF Cookies
$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
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
Changing Template Tags
During app.config:$interpolateProvider.startSymbol('[[');$interpolateProvider.endSymbol(']]');
changes: {{ variable }} to [[ variable ]]
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