Get up and running quickly by building an AngularJS app from scratch.

Your First App

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 `<p class="likes">` is clicked, `ng-click` tells AngularJS to run the `plusOne()` function in the controller.
2. The `plusOne()` function gets the index of the product that was clicked, and then adds one to that product's `likes` property.

Notice that the `plusOne()` doesn't interact with the view at all; it just updates the controller. Any change made to the controller shows up in the view.


ng-click II

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** formats the value of an expression


ng-repeat I

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 walks through each HTML element looking for directives. When it finds one, AngularJS triggers that behavior (like attaching a scope or looping through an array).


Directives

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.

Filters 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 app interactive.


ng-click I

A diagram detailing the relationship of a user with an Angular JS app. It is numbered 1 through 5 showing the connections between user, browser, view, and controller. The text "Page does not reload during this process" encompasses the ties between View and Controller.

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_, _filters_, and _directives_. Directives bind new behavior to HTML elements.
3. A user clicks an element in the view. If the element has a directive, AngularJS runs the function.
4. The function in the _controller_ updates the state of the data. 
5. The view automatically changes and displays the updated data. The page doesn't need to reload at any point.

Generalizations

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 the view to define the controller scope.
3. Add data to `$scope` in the controller so they can be displayed with expressions in the view.


Workflow

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 symbol (`|`) takes the output on the left and "pipes" it to the right.
3. The filter outputs a formatted currency with the dollar sign and the correct decimal places.

In this way, filters help to separate the content in the controller from its presentation in the view.


Filters 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 **index.html** we added `<body ng-app="myApp">`. The `ng-app` is called a _directive_. It tells AngularJS that the `myApp` module will live within the `<body>` element, termed the application's _scope_. In other words, we used the `ng-app` directive to define the application scope.
3. In **MainController.js** we created a new _controller_ named `MainController`. A _controller_ manages the app's data. Here we use the property `title` to store a string, and attach it to `$scope`.
4. Then, in **index.html**, we added `<div class="main" ng-controller="MainController">`. Like `ng-app`, `ng-controller` is a _directive_ that defines the controller scope. This means that properties attached to `$scope` in `MainController` become available to use within `<div class="main">`.
5. Inside `<div class="main">` we accessed `$scope.title` using `{{ title }}`. This is called an _expression_. Expressions are used to display values on the page.
6. The value of `title` showed up when we viewed the app in the browser.

Hello AngularJS 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 added `<div ng-repeat="product in products">`. Like `ng-app` and `ng-controller`, the `ng-repeat` is a directive. It loops through an array and displays each element. Here, the `ng-repeat` repeats all the HTML inside `<div class="col-md-6">` for each element in the `products` array.

In this way, `ng-repeat` shows both products in the `$scope.products` array. Instead of writing the same HTML twice as before, we just use `ng-repeat` to generate the HTML twice.


ng-repeat II

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 steps that can be used to build more complex apps. By the end of this course, you'll be able to use this sequence of steps to jumpstart your own AngularJS apps.