AngularJS Basics

ng-app Specifies where our app exists on the page ng-model Binds the value of the input to the variable, in both directions

{{ name }} Add dynamic content (in this case, the variable name) to our static HTML by wrapping it in double curly braces {{ }}

Controller manages some portion of our application or a scope on our page

Directive

A directive is a marker on an HTML tag that tells Angular to run or reference some JavaScript code. Directives is how we bind the behaviour

For example ng-controller, ng-app, ng-model etc.

ng-hide and ng-show hide and show things respectively, based on boolean values. For example:

<button ng-show="store.product.canPurchase">Add to Cart</button>

will only show the ‘Add to Cart’ button if canPurchase is set to true..

ng-repeat will repeat (loop) the properties of an array, like the jQuery each() method.

<div ng-repeat="product in store.products" class="product row">
  <h3>
    {{product.name}}
    <em class="pull-right">${{product.price}}</em>
  </h3>
</div>

Modules

Modules are where we write pieces of our Angular application. Where we define dependencies for our app.

Expressions

Expressions allow you to insert dynamic values in your HTML

For example: {{ name }}, {{ title }} etc.

<p>{{ 4 + 6 }}</p>

will output

<p>10</p>

Similarly

<p>{{ "hello " + "you" }}</p>

will output

<p>hello you</p>

Controllers

Controllers are where we define our app’s behavior by defining functions and values.