Your First App
Get up and running quickly by building an AngularJS app from scratch.
Start
- 1AngularJS 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…
- 2Awesome! 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…
- 3So 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…
- 4Well 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.
- 5Great! 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…
- 6Let’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…
- 7Well 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 …
- 8We’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 …
- 9So 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 …
- 10Great! 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…
- 11Congratulations! 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,…
What you'll create
Portfolio projects that showcase your new skills
Bolt Network 1
In this project, you'll create a movie review board using a controller and a view.
Pizza Planet
It's time to build fluency in AngularJS fundamentals. In this next Pro Project, we're going to practice $scope in AngularJS so you can hone your skills and feel confident taking them to the real world. Why? $scope holds the ""state"" of your app and is a crucial part of any AngularJS app. What's next? Pizza Planet, building a delicious menu, more AngularJS. You got this!
MOVE Log
It's time to build fluency in AngularJS fundamentals. In this next Pro Project, we're going to practice $scope in AngularJS so you can hone your skills and feel confident taking them to the real world. Why? Practicing using $scope will help you build AngularJS apps more efficiently. What's next? Moving with MOVE, assigning reps, more AngularJS. You got this!
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory
Your First App
Start