## Lesson Objectives
1. Complete `install_test_api.md`
1. Set up Angular
1. Create App/Controller
## Describe the elements of the MEAN stack
MEAN stack is just a collection of tech that work well together
- Mongo
- Express
- Angular
- Node.js
## Move into working with static files
1. in the `public` directory, we'll be working with `index.html` and `/js/app.js`
## Set up Angular
**In `index.html`:**
1. Include Angular cdn link in the `head` tag
1. Set up app, by including `ng-app` inside the `html` tag
1. Test {{}}, inside the `body` tag, but doing something simple like summing `2 + 2`
1. Open `localhost:3004` to test
```html
{{2+2}}
```
## Create App/Controller
**In `js/app.js`**
```javascript
app.controller('MainController', ['$http', function ($http) {
this.h5 = 'Holidays! Celebrate!'
}])
```
**Note**: We may be tempted to write `()=>{}` as the callback in `app.controller`, but it won't work as expected, we have to use `function(){}` for this particular callback
**Note 2**: We are not using the $http service yet, but we will!
**In `index.html`:**
1. set `ng-app` value to `HolidaysApp` in the `html` tag
1. add script tag for `/js/app.js` inside the `head` tag, below the angular cdn
1. set `ng-controller` to `MainController` in the `body` tag in `index.html`
1. set `MainController` to have an alias of `ctrl
1. create a `div` with the class of `container`
1. remove: `{{ 2 + 2 }}`
1. Insde the `container div`, add `
{{ ctrl.h5 }}
` (h1 is a bit too big and distracting, despite being more semantically accurate - we can polish html/css later)
public/index.html:
```html
Holiday Celebrations
{{ ctrl.h5 }}
```
**Note**: We are using an tag for speed, not sematics, best practice would be to use an h1 and use css to properly resize it. But we still have a lot of code to write, so let's see if we have time at the end to fix this.
We now should have our browser look like this:
## Take Aways
Setting up angular takes a few steps, but going slowly and testing one step at a time can make us sure we're ready for success
## Onwards
Continue to [angular_create.md](angular_create.md)