Building an app with AngularJS

Take your existing JS/HTML/CSS skills and apply them to build advanced web-applications with AngularJS.

What you'll learn

• Model view controller, and how AngularJS implements the pattern
• How to extend HTML with your own controls and widgets via directives
• Communicating with servers with AngularJS's promise driven HTTP APIs
• Understand how to structure your project around Angular's module system

Outline

A taste of Angular - 15 minutes

• What problem is Angular solving -- making web apps -- lots of widgets -- widget code confused with app code -- MVC! separating presentation from logic -- dependencies between parts of code
• How? -- extending out HTML -- module system, DI
• Model view controller -- model -- view -- controller
• Impression of Angular -- quick demo
• The most important thing to remember about Angular -- it's just Javascript, we're using tools to wrap it to get benefits

Starting the app - 20 mins

• List view -- ng-repeat
• Scopes -- want to get data into the view -- we don't want a global data source
• Controller -- passes the model to the view -- doesn't touch the DOM

Communicating with the server - 20 mins

• Loading in pictures -- AJAX
• Services, and Angular's module system -- core idea -- don't get confused about verbiage
• CRUD with Angular -- resource

Routing - 20 mins

• Navigating between views
• Taking data from routes
• Configuring routes

Building our picture view - 20 mins

• Directives
• Communicating with rest of app: events and broadcasts
• Scopes

Focus on the tricky parts of Angular - 20 mins

• Directives -- How they work: compilation -- Advanced definitions -- Transclusion
• Scopes -- How they work -- Prototypal inheritance and scopes
• Module system -- Choosing a provider -- Using with module loaders

Animations - 10 mins

• List view
• Route animations

Round-up - 10 mins

• Testing
• Tools and plugins