How to set up an AngularJS App

AngularApp_Setup.md

##Initial Steps to set up an Angular App

1)Install all necessary dependencies (npm/bower)

2)Include Angular via download or CDN

3. app.js

• Include angular, .module("AppName", [ng-routes]), and the name of your controller(s)

angular
.module('tunely', [])
.controller('NameOfController', NameOfController);

• Define controller

function NameOfController () {
var vm = this;
vm.nameOfDataForHtml = {};

vm.nameOfDataForHtml = {
   keyName1: valueName1,
   keyName2: valueName2,
     etc.
};
}

• IF making an $HTTP requests (Angular's AJAX equivalent), set up the controller with $http service

  • App.js

  NameOfController.$inject = ['$http'];
  function NameOfController (  $http  ) {
    	$http({
      method: 'TBD',
      url: 'restful route'
  

}).then(successCallback, errorCallback);

function successCallback(response) {
	console.log('response for all projects:', response);
}

function errorCallback(error) {
	console.log('There was an error getting the data', error);
}

4) index.html

 * Include ng-app="appName" in the html tag

```

• Create a div that will contain the HTML and declare Angular controller that will act upon it

(ng-controller='Name of controller in app.js' as 'controller alias')

<div ng-controller="NameOfController as NameOfCtrl">
       <!--code-->
</div>

• For every input associated with the controller, make the data available to the controller with ng-model="Controller alias"

 <span>Data being displayed:</span>
     <input type="text" ng-model="NameOfCtrl.nameOfDataForHtml.keyName2">
   ```
   
* To display data, use {{ }} to wrap the data variable to be displayed

{{ NameOfCtrl.nameOfDataForHtml.keyName2 }}

* IF there is a collection of data that needs to be shown on the HTML, include ng-repeat in the div that contains the data variables that will be iterated through

div ng-repeat="album in albumsIndexCtrl.albums | orderBy: 'name' | filter: searchText" class="row">