Your First App
Lesson 1 of 1
  1. 1
    Hello AngularJS I
    AngularJS is a JavaScript web framework aimed to make web apps simple to build and easy to maintain. We’ll start by building a simple AngularJS app. After making this app, we’ll generalize a few s…
    Start
  2. 2
    Hello AngularJS II
    Awesome! You built an AngularJS app. How does it work? 1. In app.js, we created a new module named myApp. A module contains the different components of an AngularJS app. 2. Then, in **inde…
    Start
  3. 3
    Workflow
    So far this is our typical workflow when making an AngularJS app: 1. Create a module, and use ng-app in the view to define the application scope. 2. Create a controller, and use ng-controller in th…
    Start
  4. 4
    Filters I
    Well done! In the controller, you used an object to group together related data about a product. Then in the view, you used dot notation to display the values.
    Start
  5. 5
    Filters II
    Great! The product price changed from a number to a formatted currency. How does it work? 1. AngularJS gets the value of product.price. 2. It sends this number into the currency filter. The pipe s…
    Start
  6. 6
    ng-repeat I
    Let’s do a quick review: * A module contains the different components of an AngularJS app * A controller manages the app’s data * An expression displays values on the page * A *filter…
    Start
  7. 7
    ng-repeat II
    Well done! You got both books in $scope.products to show up in the view. How does it work? 1. In the controller, we used products to store an array containing two objects. 2. Then in the view, we …
    Start
  8. 8
    Directives
    We’ve used a few directives so far - ng-app, ng-controller, ng-repeat, and ng-src. What can we generalize about directives? Directives bind behavior to HTML elements. When the app runs, AngularJS …
    Start
  9. 9
    ng-click I
    So far we’ve made a static AngularJS app by adding properties in the controller and displaying them in the view. AngularJS is a framework for building dynamic web apps, so let’s start to make this …
    Start
  10. 10
    ng-click II
    Great! Each time you click on the number of likes, the number goes up. How does it work? 1. The ng-click is a directive. When is clicked, ng-click tells AngularJS to run the plusOne() function i…
    Start
  11. 11
    Generalizations
    Congratulations! You built an AngularJS app from scratch. What can we generalize so far? 1. A user visits the AngularJS app. 2. The view presents the app’s data through the use of expressions,…
    Start

What you'll create

Portfolio projects that showcase your new skills

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory