Jessicanew / angularjs-learnable-example-code

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

About