introduction to angularjs for the python web developer

26
Intro to AngularJS for the Python Web Developer By Paul Bailey - bit.ly/PizzaPanther

Upload: jprakash0205

Post on 08-Jul-2016

26 views

Category:

Documents


0 download

DESCRIPTION

Introduction to AngularJS for the Python Web Developer

TRANSCRIPT

Page 1: Introduction to AngularJS for the Python Web Developer

Intro to AngularJS for the Python Web Developer

By Paul Bailey - bit.ly/PizzaPanther

Page 2: Introduction to AngularJS for the Python Web Developer

About Me

Web Developer for:

DramaFever.com NeutronDrive.com

Page 3: Introduction to AngularJS for the Python Web Developer

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

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

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

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

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

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

That’s Cool but What About Python?

Angular JS + Python RESTful Backend =

Page 10: Introduction to AngularJS for the Python Web Developer

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

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

Controllers

Page 13: Introduction to AngularJS for the Python Web Developer

Controllers

Page 14: Introduction to AngularJS for the Python Web Developer

Controllers

Page 15: Introduction to AngularJS for the Python Web Developer

Controllers

Page 16: Introduction to AngularJS for the Python Web Developer

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

Directives

Page 18: Introduction to AngularJS for the Python Web Developer

Directives

Page 19: Introduction to AngularJS for the Python Web Developer

Services, Factories, Providers

Page 20: Introduction to AngularJS for the Python Web Developer

Routing

Page 21: Introduction to AngularJS for the Python Web Developer

Tips & Tricks

Page 22: Introduction to AngularJS for the Python Web Developer

CSRF Cookies

$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;

Page 23: Introduction to AngularJS for the Python Web Developer

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

Changing Template Tags

During app.config:$interpolateProvider.startSymbol('[[');$interpolateProvider.endSymbol(']]');

changes: {{ variable }} to [[ variable ]]

Page 25: Introduction to AngularJS for the Python Web Developer

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