muhammadghazali/step-0.md

## step-0.md

      
    Raw
  

              step-0.md
            
          
    ng-app directive

In step 0 I learn how the AngularJS use the ng-app directive to flag an element which Angular should consider to be the root element of our application. By doing this, it gives us a freedom to tell Angular if the entire html page or only a portion of it should be treated as the Angular application.
Example 1:
<!doctype html>
<html lang="en" ng-app>
<head>
  <meta charset="utf-8">
  <title>My HTML File</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular/angular.js"></script>
</head>
<body>
 
  <p>Nothing here {{'yet' + '!'}}</p>
 
</body>
</html>
Example 2:
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My HTML File</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular/angular.js"></script>
</head>
<body ng-app>
 
  <p>Nothing here {{'yet' + '!'}}</p>
 
</body>
</html>
Boostrap: Automatic initialization

Also, I learn how the AngularJS bootstraping the app by initialize it automatically. By what I've seen so far, many example or application was using automatic initialization during bootstrapping.
Double-curly binding

I learn how the core feature of Angular's templating capabilities – a binding, denoted by double-curlies works. The binding tells Angular that it should evaluate an expression and insert the result into the DOM in place of the binding.
Here are some of the expressions used on the tutorials:
<p>Nothing here {{'yet' + '!'}}</p>

<p>1 + 2 = {{ 1 + 2 }}</p>


## step-1.md

      
    Raw
  

              step-1.md
            
          
    On this step, there is nothing important to notes, it just telling us the readers to setting up some static templates, so on the next step we can see the power of Angular to dynamically display the same result with any set of data.

  
## step-2.md

      
    Raw
  

              step-2.md
            
          
    Using MVC to structure the code

On step 2, I learn how to structure the code. There is many way to structure the code and they suggesting us to structure the code based on the Model View Controller design pattern. I've already familiar with this design pattern, so no need to worry about it.
Using Directive to display the phone list dynamically

On step 1, the tutorial setting up some static template to display the phone list. On this step 2, I learn how to use directive to display the list dynamically using the ngRepeat directive. I don't know a lot about this directive things, so I might come back on this one later to dig dive more about it.
Scope

The interesting part is the tutorial introducing me about the scope, and this scope was a lot of things.

The concept of a scope in Angular is crucial; a scope can be seen as the glue which allows the template, model and controller to work together. Angular uses scopes, along with the information contained in the template, data model, and controller, to keep models and views separate, but in sync. Any changes made to the model are reflected in the view; any changes that occur in the view are reflected in the model.


## step-3.md

      
    Raw
  

              step-3.md
            
          
    Using Filter

On step 3, I learn how to use the $filter function to process the input for the directive. This step show us how phone list on the page changes depending on what a user types into the search box.
<div class="span2">
    <!--Sidebar content-->
    Search: <input ng-model="query">
</div>

<div class="span10">
    <!--Body content-->
    <ul class="phones">
        <li ng-repeat="phone in phones | filter:query">
        {{phone.name}}
        <p>{{phone.snippet}}</p>
        </li>
    </ul>
</div>

Run end to end testing

AngularJS was designed from ground up to be testable and based on what I've learned from the tutorial it seems to be so easy to setup a new test suite and run the test. On this step they show us how to run end-to-end scenario. By the way, they are using Karma.

  
## step-4.md

      
    Raw
  

              step-4.md
            
          
    Using orderBy filter

On step 4, I learn how to use orderBy filter to sort the phone list and see how the magic works. On this step, I use the orderBy filter to list the pones by age and name.
They claimed no bloated DOM manipulation code is necessary. I think it's true and by what I've seen here, it's very handy to use it.