Intro to Angular Challenges

Objectives
Start an Angular 1.4 app with `ng-app`
Setup a two way data binding with `ng-model`
Display a list with `ng-repeat`
Manipulate the DOM with `$scope`

Background

Angular is an opinionated yet flexible front end framework made for building robust single page web applications. It is written in JavaScript and created and maintained by Google.

View Controllers

AngularJS lets you attach controllers to bits and pieces of your view. Tomorrow we'll learn Angular Routing where we will learn how to map controllers to views and urls.

Create an index.html and an app.js file in a new folder.

In index.html put this template:

<!doctype html>
<html ng-app>
<head>
 <title>My Angular App</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>

 <input type="text" ng-model="term" />
 <p></p>

</body>
</html>

In app.js initialize an angular app called starterApp
```
angular.module('starterApp', [])
```

Now connect this script to your index.html and set starterApp to be the value of your ng-app directive. Check that everything works the same. Now you've linked your angular code to your template through ng-app.

<html ng-app="starterApp">
<head>
 <title>My Angular App</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
 <script src="app.js"></script>
</head>
...

Now add a controller to your app.js and connect it to your <body> tag with the directive ng-controller. We'll set a value of $scope.term to make sure that the controller is working.

angular.module('starterApp', [])
 .controller("MainCtrl", ['$scope', '$rootScope', function ($scope, $rootScope) {
   $scope.term = "cellar door"
 }])

<body ng-controller="MainCtrl">

Adding a function to $scope

$scope reflects the state of data, but it also holds functions that can fire to query an API, change the DOM, or filter or change the model. Let's add a simple function to $scope.

Add a button to your page and add the ng-click directive attribute to attach a click event activated function. Let's pass in the function as the value of the attribute: showAlert().
```
<button ng-click="showAlert()">Alert</button>
```

Now in our MainCtrl, let's add this function to $scope and have it create an alert with the value of $scope.term

angular.module('starterApp', [])
.controller("MainCtrl", ['$scope', '$rootScope', function ($scope, $rootScope) {
 $scope.term = "cellar door"
 $scope.showAlert = function() {
   alert($scope.term);
 }
}])

Try out your new function.

Base Challenges

Add bootstrap using the CDN. Using the bootstrap grid put your list of todos in the center third of the page.
Inside the create a
element and attach an Angular controller called TodoCtrl. (you guessed it! a todo app!)
Create this TodoCtrl in your app.js by dot-chaining it to the end of the MainCtrl.
Write a console log in the controller to make sure its working.
Assign an array of simple todo objects with the attribute "title" to $scope.todos.
Use <li ng-repeat="todo in todos"></li> to display the list of todos.
Above the list create an input field and use ng-model to bind the field to a variable in $scope called todo.title.
Make a button that has a click function that takes the $scope.todo and pushes it on to the $scope.todos array. After pushing the new todo, set $scope.todo.title to "".
Display a counter of how many todos you have.

Evening Challenges

Make a button on each todo that deletes that todo from the array of todos. Use ng-click="deleteTodo(todo). (Remember that to access the clicked element use the reserved word this)

Extra Challenges

Write a blog in AngularJS. It should have posts and the posts should have comments. (hint use post.comments.push($scope.comment) to push a comment into a comments attribute).