How to build an Angular app from scratch

angular-app-instructions

# Steps to create Angular App from scratch

## Step One
  ### 1.1
    First, we have to make sure that angular is loaded up on the page.
    You can do this through either:
    1. Include a script tag with the CDN for the Angularjs library in your html file.  
    Like this: 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    Or, 
    2: Include a package manager with the script tag <script src="/vendor/angular/angular.min.js"></script>
  ### 1.2
    In your HTML tag at the very top of your index.html file, add 'ng-app="<name of your app>"'
    --> That is a directive!  
    --> ng- are your angular directives
        --> ng-controller: connects controller (JS file containing logic) to section of app
        --> ng-model: ties together (binds) values in HTML and data in the controller
        --> ng-repeat: iterates over a collection and can display a chunk of HTML once for each element in the collection
  ### 1.3
    Then, inside of your index.html file, add the directive ng-model="<name of value you want to manipulate>" to the 
    HTML line you're targetting.
    ex: <input type="text" ng-model="name" /> 
  ### 1.4
    Still in your index.html file, target with brackets {{ }} the name of the value you're targetting.  
    --> This will be your Data Binding Expression
## Step Two
  ### 2.1
    In your app.js file, first, add the lines:
      angular
        .module('<name of app>', [])
        .controller('<name of controller>', <name of controller>);
          --> These lines are setting up your angular controller which will be referenced with ng-controller in your HTML
  ### 2.2
    In your app.js file, define a function inside of your controller
      ex: function <name of controller> () {
        var vm = this; --> It's convention to declare a variable vm that will equal 'this'
        vm.thing = {}; --> an empty object
        vm.func = function(){}; --> A function that can be added to later
  ### 2.3
    Once this function has been defined in your app.js file, in your controller function, it must be declared somewhere in the 
    HTML file in order to be used
  ### 2.4
    To do this, we will choose a section of the HTML to target with our controller 
      ex: <div ng-controller = "<name of controller>" as <name of controller>" --> usually written as Controller as Ctrl
          </div>
        --> The 'as' syntax assigns a name to the controller and that's the name that has to match every time you're 
        referencing that controller
      ex: {{<Ctrl.thing}} or {{Ctrl.func()}} 
## Step Three
  ### 3.1 
    Next, to use input elements to create accessible data, use ng-model within the <input> tag in the HTML
    Using expressions {{ }}, you can display the current value of the value of ng-model as it changes!
      ex: <input type="text" ng-model="name">
      <p>{{ name }}</p>
## Step Four
  ### 4.1 
    Routes!  Where do they go?  How do we use them? 
    Once you have added your models and controllers where you want them within the HTML file, go to your app.js file and 
    we'll start building up our controller function.
  ### 4.2
    In the app.js file, after <name of controller>, add .$inject = ['$http']; 
  ### 4.3
    Within the function, add the argument ($http) to the function <name of controller>
      Then, underneath the new album, add the $http call 'GET' to display the information you want to display
        ex: $http({
              method: 'GET',
              url: '/api/name of endpoint you're targetting'
            }).then(function successCallback(response) {
              vm.example = response.data;
            }, function errorCallback(response) {
              console.log('There was an error getting the data', response);
            });
  ### 4.4
    For every call you want to make, this is the format you would follow generally. 
    --> With the 'put' and 'delete' method, you would need to add data: underneath the url
    
    
## Yay!  This would make a functional Angular app!  This would include an ng-controller, ng-model and one http GET request.