Introduction to AngularJames Kahng

Terms

• Framework• Template/environment constructed in the language where you fill in details

with code

• Library• Set of provided functions that do things people often need in their code

Why Angular?

• Single page applications are becoming very popular• Gmail• Google Docs• Trello• Todoist• Others

• BUT HTML, CSS, JS was designed for static websites• Web applications written in these languages can quickly become

complex, unreadable and hack-y

Enter Angular.js

• Released in 2009• Framework that reimagines HTML for web application development• HTML can now communicate with JS code. How does it do this?• Directives

Directives

• Marker (custom attribute) in HTML tag that tells Angular to run some JS code• Demo• The ng-app and ng-controller markers are built-in Angular directives• More later

Expressions

• 2-way data binding• Changes in HTML change our JS variable and vice-versa

• Syntax: {{data}}• Demo

Controllers

• Behavior (Javascript) bound to our H TML• It communicates with the “data model” for our view data• The data you can see

• For example, a controller can hold an array of row entries for a table• Demo

Directives Revisited

• Directives can be used to create reusable DOM elements/attributes/classes• These can add HTML or do some kind of function

• This is how we can produce dynamically rendered pages• Demo• Demo 2

Services

• So far, directives are for DOM manipulation• Controllers are for managing view data• Services are for heavy lifting in the background (application data)• HTTP requests, calculations, storage• Persistent

• Angular has built-in services that include $http, $route• You can also write custom services to better modularize your

application

When to use Angular

• Large-scale dynamic web applications• Scales very well• Organized• Modular and reusable (directives, controllers, services)

• CRUD• Create, Read, Update, Delete

Small-scale?

• Use jQuery and design patterns (Module design pattern)

Rewrite SOONTM

• Angular 2.0 announced (article also explains best practices)• Release ~late 2015-early 2016?• New features and simpler• Will not be backwards-compatible aka your code will break• BUT Learning Angular 1 is great for learning other frameworks and JS

Examples

• Angular Cellar• Cafe Townsend• Angular 2048 (tutorial here)

Resources

Beautiful• Intro video• Part of intro tutorial set (FREE)

• Walkthrough• Explanation of $scope• Incremental examplesNice• Set of tutorial videos

Coding challenge

• Write a simple Angular app using what we learned• Copying is fine, but type it yourself (honor system)• Bear in mind, the most creative app will win• E-mail your entry to iwdsacode@gmail.com• May the best man/woman win!