introduction to angularjs for the python web developer

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