Skip to main content

AngularJS Tutorial

Sam Helman (MongoDB, Inc)
JavaScript - HTML5 - Web | Tools & Techniques
Portland 255
Tutorial Please note: to attend, your registration must include Tutorials.
Average rating: ****.
(4.24, 25 ratings)
Slides:   external link

THIS TUTORIAL HAS REQUIREMENTS AND INSTRUCTIONS LISTED BELOW

Introduction

  1. Some historical context – What is AngularJS? Where did it come from?
  2. MVC (Model-view-controller pattern)
  3. Angular vs. other web frameworks
  4. Declarative, rather than imperative, programming for UI

Basic setup

  1. Clone the repo
  2. Make sure starting the webserver works
  3. Structure of the app

Getting started with AngularJS

  1. Include AngularJS in the page
  2. Load a bare-bones AngularJS application into the page

First steps with AngularJS data binding

  1. Create and display a variable in AngularJS’s scope
  2. Bind the variable to an input element
  3. Demonstrate two-way data-binding and its benefits
  4. Discussion of ng-model
  5. Discussion of AngularJS expressions

(10 minute break for bathroom / refueling)

Controllers

  1. Create a controller for the application
  2. Demonstrate / utilize controller’s scope vs. root scope
  3. Brief discussion of scopes in AngularJS
  4. Use our controller for some simple application logic
  5. ng-repeat to display / manipulate a collection of items

Lab / exercise

  • Use the controller and ng-repeat to create an editable list

Directives

  1. What directives are (conceptually)
  2. Brief discussion of some useful built-in directives (ng-show, ng-class)
  3. Creating and using directives
  4. How scope works with directives
  5. Adding a custom directive into our app

Lab / exercise

  • Change the list to use individual directives for each element

(10 minute break for bathroom / refueling)

Services

  1. Dependency injection – what it is in general, and how it relates to and works in AngularJS
  2. The $http service
  3. Including $http in our controller
  4. Using $http to load data into our app

Lab / exercise

  • Choose from a few optional enhancements to the app

Questions

TUTORIAL REQUIREMENTS AND INSTRUCTIONS FOR ATTENDEES


  • Participants should have a basic knowledge of web applications and javascript (no knowledge of AngularJS required).
  • There is a git repository to clone which contains some (very minimal) scaffolding for the site we will build. You can get it with:
    git clone https://github.com/shelman/angular-tutorial.git
  • Additionally, you should have python installed. Python 2 is preferable but 3 will work as well.

QUESTIONS for the speaker?: Use the “Leave a Comment or Question” section at the bottom to address them.

Photo of Sam Helman

Sam Helman

MongoDB, Inc

Sam has been working as a software engineer at MongoDB since August 2012. Before that, he got his degree in Computer Science at Brown University, where in addition to spending huge amounts of time programming he made films, did comedy, and played music and soccer.

Leave a Comment or Question

Help us make this conference the best it can be for you. Have questions you'd like this speaker to address? Suggestions for issues that deserve extra attention? Feedback that you'd like to share with the speaker and other attendees?

Join the conversation here (requires login)

Comments

Picture of Sam Helman
07/21/2014 8:14am PDT

Absolutely, I just added the slides as a .pptx file to the github repo. If you pull the repo again they should be downloaded. Please let me know if there are any troubles with this or if you would like them in any other medium.

Cynthia Coleman
07/21/2014 7:12am PDT

It was a good presentation. Can we get a copy of the slides from somewhere?

Picture of Sam Helman
07/14/2014 10:39am PDT

You’re absolutely correct, I apologize. It should be fixed soon.

Picture of Erik Woods
07/14/2014 10:37am PDT

In the instructions it says “git clone https://github.com/shelman/angular-tutorial.git clone https://github.com/shelman/angular-tutorial.git” but it should just say “git clone https://github.com/shelman/angular-tutorial.git”

Picture of Sam Helman
07/11/2014 8:19am PDT

Absolutely, there is a git repository to clone which contains some (very minimal) scaffolding for the site we will build. You can get it with:

git clone https://github.com/shelman/angular-tutorial.git

Additionally, you should have python installed. Python 2 is preferable but 3 will work as well.

Any other questions (or issues cloning the repo), let me know!

07/11/2014 7:55am PDT

Is there anything we can download or install before arriving to save time/bandwidth?