ashleyvernon/README.md

## README.md

      
    Raw
  

              README.md
            
          
    ##Creating an App using Angular
Keys to Remember About Angular:


In your HTML, always prefix angular element attributes with ng-* (ex. an angular-style href is called ng-href)


These ng-* attributes are called directives, and they allow us to add behavior to HTML.  Directive HTML tags tell Angular to run or reference Angular code


Important directives to remember:

ng-app turns ordinary HTML into an Angular application. You will need Angular loaded into your project (via a package manager or CDN) for this to work
ng-controller connects a controller (a JavaScript file containing logic) to a section of our application.
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


Blocks of code within {{}} are called expressions. You can put working JavaScript inside of an expression


##Steps to Create Your App:
Step 1. Inform your index.html that it's supposed to use Angular by placing the ng-app directive equal to the app name in your html tag:
example:
<html lang="en" ng-app="appName">
Step 2. Define your controllers in app.js.  Most applications will have several controllers. Each controller controls a different part of the application.
example:
angular
  .module('appName',[])
  .controller('appController', appController);

  function AlbumsIndexController() {
      var vm = this;
    vm.thing = {};
    vm.func = function(){};
    // more logic here
  }
To use your controllers in the View declare them in index.html:
example:
<div ng-controller="AlbumsIndexController as albumsIndexCtrl">
    <!--placeholder for now-->
</div>
Note: using this as syntax, specifies an abbreviated name, albumsIndexCtrl, for referring to the controller in the HTML.
Step 3. To use an input element to create a piece of accessible data, use ng-model in your index.html.
example:
<div ng-controller="SampleCtrl">

    <span>Enter your name:</span>
    <input type="text" ng-model="myName">

    <h1>{{ myName }}</h1>

  </div>
##Setting up CRUD methods with Angular:
Step 1. To run Angular's $http service, which is similar to JQuery's $.Ajax, first tell Angular that we'd like to have it available by injecting it. To do this, we include one extra line with the controller function definition.