Post 6 - Tabs inside Angular

Ng-Click

This responses to user click on the tab and display the data that were bind.

Given the example like below , where we can use ng-click inside the page :

<div class="section">
        <ul class="nav nav-pills nav-sm">
          <li><a href ng-click="tab = 1">Personal Info</a></li>
          <li><a href ng-click="tab = 2">Career</a></li>
          <li><a href ng-click="tab = 3">Study</a></li>
        </ul>
       {{ tab }}
 </div>

From the example, when ng-click changes the value inside a tab. The {{ tab }} expression automatically get updated.

Now lets define our tab panel,

<div class="panel" ng-show="tab === 1">
     <h4> {{ product.name }} </h4>
     <p> {{ product.description }}</p>
 </div>
<div class="panel" ng-show="tab === 2">
     <h4> {{ product.name }} </h4>
     <p> {{ product.description }} </p>
</div>

Ng-Init

As you can see, our panel will be displayed if the correct number of tab is equal to value of ng-show. Product name and description will display accordingly. However , when we refresh the page none of the panel will show up. This comes ng-init property where we set initial tab section to be shown first to a corresponding panel.

<div class="section" ng-init="tab = 1" >
        <ul class="nav nav-pills nav-sm">
          <li><a href ng-click="tab = 1">Personal Info</a></li>
          <li><a href ng-click="tab = 2">Career</a></li>
          <li><a href ng-click="tab = 3">Study</a></li>
        </ul>
       {{ tab }}
 </div>

Ng-Class

Now that we learn to set initial value for a tab when the user comes at the first time to see our page. The first tab panel will be display to them . However, when user changing the tab. It is important to set the current active tab to easily track on their navigation.

<div class="section" ng-init="tab = 1" >
        <ul class="nav nav-pills nav-sm">
          <li ng-class= "{ active:tab === 1 }">
             <a href ng-click="tab = 1">Personal Info</a>
          </li>
          <li ng-class= "{ active:tab === 2 }">
             <a href ng-click="tab = 2">Career</a>
          </li>
          <li ng-class= "{ active:tab === 3}">
             <a href ng-click="tab = 3">Study</a>
          </li>
        </ul>
       {{ tab }}
 </div>

Create Controller Function(s)

To do a cleaner code we should set all controller things inside our controller. First, we can create a controller called "TabController" which we can compare the current active tab and set the value of tab that being changed.

app.controller('TabController', function(){
    this.tab = 1;
    
   // to set tab value and change the panel
    this.selectTab = function(setTab){
      this.tab = setTab;
    };
    
    // to check and set current active tab
    this.isSelectedSet = function(checkTab){
      return this.tab === checkTab;
    };
    
  });

And then in our page we can write it like this :

<div class="section" ng-controller = "TabController as panel">
        <ul class="nav nav-pills nav-sm">
          <li ng-class= "{ panel.isSelected(1) }">
             <a href ng-click="panel.selectTab(1)">Personal Info</a>
          </li>
          <li ng-class= "{ panel.isSelected(2) }">             <a href ng-click="panel.selectTab(2)">Career</a>          </li>
          <li ng-class= "{ panel.isSelected(3) ">             <a href ng-click="panel.selectTab(3)">Study</a>          </li>
        </ul>
       {{ tab }}
 </div>

References :

https://material.angularjs.org/latest/demo/tabs
http://campus.codeschool.com/courses/shaping-up-with-angularjs/level/2/section/2/tabs-inside-out

Post 5 - Filters in Angular

Good things in angular we have proper standard way to present our data into our page using filters. With filters , items in array will be displayed in constant way. For example, if we include the  any price decimal value inside our application. The filters has a way to control those.

For Example : 

<div ng-controller="StoreController as store" style="padding:20px;">
          <div ng-repeat="productss in store.product">
            <h1> {{productss.name}}</h1>
            <h2> ${{productss.price | currency }}</h2>
            <p>{{productss.description}}</p>

            <button ng-show="productss.canPurchase">Add to Cart </button>
          </div>
        </div>

From the example , we can observe that the prices inside ng-repeat were filtered using currency option. This will standardize the decimal price to be displayed.  If the current price stated is 

$2 , it turns out will be 2 decimal place ( $2.00 ) .

There are many other filters that we can found inside angular JS documentation.

The global understand format filters are :

{{ data* |  filter:options* }}

Type of Filters : 

1. date

{{  '1388123412323' | date:'MM/dd/yyyy @ h:mma' }}  //12/27/2013@12:50AM

2. uppercase&lowercase

{{  'diamond gem' | uppercase }}  //DIAMOND GEM

3. limitTo

{{  'My Project' | limitTo:5 }}  //My Pr

4. orderBy

<div ng-controller="StoreController as store" style="padding:20px;">
          <div ng-repeat="productss in store.product | orderBy:'price' ">  //ascending order or -price for descending
            <h1> {{productss.name}}</h1>
            <h2> ${{productss.price | currency }}</h2>
            <p>{{productss.description}}</p>

            <button ng-show="productss.canPurchase">Add to Cart </button>
          </div>
        </div>

References : 

https://docs.angularjs.org/api/ng/filter

Topic 4 - Array in Angular

Manual Array

Create an array is the basic thing in programming language. This happens when we are dealing we set of property. In angular Js we can define manually using expressions. The property inside StoreController which is product  can be iterate using array index.

<div ng-controller="StoreController as store" style="padding:20px;">
            <h1> {{store.product[0].name}}</h1>
            <h2> ${{store.product[0].price}}</h2>
            <p>{{store.product[0].description}}</p>

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

            <h1> {{store.product[1].name}}</h1>
            <h2> ${{store.product[1].price}}</h2>
            <p>{{store.product[1].description}}</p>

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

        </div>

Ng-repeat

There is a simple way when we are going to working around with array in angular. Luckily angular js provide an alternative way where developers can iterate property using ng-repeat directive.

  <div ng-controller="StoreController as store" style="padding:20px;">
          <div ng-repeat="productss in store.product">
            <h1> {{productss.name}}</h1>
            <h2> ${{productss.price}}</h2>
            <p>{{productss.description}}</p>

            <button ng-show="productss.canPurchase">Add to Cart </button>
          </div>
        </div>

This will produce a result like below : 

Topic 3 - Built-In Directives

Ng-Show Directives

In Angular, we are given with options to show attributes or elements that we want to be displayed on our pages.  Lets say we have a button "Add to Cart" we want to display. In <button> tag we can include our ngShow directive .

<div ng-controller="StoreController as store" style="padding:20px;">
        
            <h1> {{productss.name}}</h1>
            <h2> ${{productss.price}}</h2>
            <p>{{productss.description}}</p>

            <button ng-show="productss.canPurchase">Add to Cart </button>
      
        </div>

This will produce a result :

Ng-Hide Directives

Likewise, we also can hide elements that we dont want to be displayed in our screen. Ng-hide are purposely to control elements or section that we want to be displayed. Lets say in our body class we have a controller  directive called StoreController alias store. The ng-hide directive inside <div> tag is to control either the instance of property either have a soldOut element which if is true then the product will be hide from being displayed.

<body class="container" ng-controller="StoreController as store">
    <div ng-hide="store.product.soldOut" class="product row">
      <h3>
        {{store.product.name}}
        <em class="pull-right">${{store.product.price}}</em>
      </h3>
      <button ng-show="store.product.canPurchase">Add to Cart</button>
    </div>
  </body>

Topic 2 - Application Controller

Application Controller

Today we are going to explore a few things regarding controller inside ionic app. In controller we have a controller name , a dependency function and their properties.

Lets look at this example : 

.controller('StoreController',function(){
  this.product = gem;
});

In above example we can see that our controller was named as StoreController and the respect property is gem . This gem object will hold attributes variable that will define below : 

var gem = {
  name : 'emerald',
  price : 99.99,
  description : 'This gem is a rare shiny object',
}

After we have define the details of attributes variable gem that we appoint to product property we can call these attribute inside our html page . Lets say in our html we declare a div and a directive ng-controller to the controller we declare inside Angular JS file.

Index.html 

<div ng-controller="StoreController as store">
            <h1> {{store.product.name}}</h1>
            <h2> ${{store.product.price}}</h2>
            <p>{{store.product.description}}</p>
</div>

The result will be like this : 

Topic 1 - Angular Introduction

Getting Started

Angular is a another way from javascript to make use of html to be more readible an reduce response time between client and server side. This will create a dynamic and at the same time a responsive website application. Angular JS act as behind curtain to implement data that being load from server side without refreshing the whole page.


What basically happen ?

1. When user click on link this will create new HTTP request.
2. Server side will response in JSON data .
3. Client Side will update the browser using the response from server side.

Requirement

1. Download Angular 

2. Download CSS

Directives 

A directive is a marker on HTML tag that tells AngularJS to run or reference the javascript.

Example . In index.html 

<html>
   <body ng-controller="ExampleController">
   ....
   </body>
</html>

and in our javascript  app.js

function ExampleController(){
 alert('Hello!');
}

this will bind the html with Angular Javascript.

Module

Creating our first module which we can write in app.js file.

var app = angular.module ('store, []);

To include  our module inside our html we can use ng-app syntax and apply it in <html> tag. Like this :

<html ng-app = "store">

Expressions

Expressions allow developer to display dynamic value  into your html . The concept <? php echo ?> will be replace double curly bracket  {{    }} .

Numerical Operations example :

<p>  I am {{  4 + 6 }} years old </p> 

This will produce a result :  I am 10 years old

String Operations example : 

<p> {{ "Hello my name is " + "yourname"}}  </p> 

This will produce a result :  Hello my name is yourname