Part 4 directive structure of ionic project

Understanding Tabs In Ionic Framework

The ion-tabs directive is made up of a few parts. First, the main directive that wraps everything related to the tabbed interface.

<ion-tabs> </ion-tabs>

On this main tag, we can control the look and style by assigning CSS classes. For example, to use the positive color scheme and have tabs with only icons, we can assign the tabs-positive class and the tabs-icon-onlyclass

./src/index.html

src/index.html is the main entry point for the app, though its purpose is to set up script and CSS includes and bootstrap, or start running, our app. We won’t spend much of our time in this file.

For your app to function, Ionic looks for the <ion-app> tag in your HTML. In this example we have:

<ion-app></ion-app>

And the following scripts near the bottom:

<script src="cordova.js"></script> <script src="build/main.js"></script>

./src/

Inside of the src directory we find our raw, uncompiled code. This is where most of the work for an Ionic app will take place. When we run ionic serve, our code inside of src/ is transpiled into the correct Javascript version that the browser understands (currently, ES5). That means we can work at a higher level using TypeScript, but compile down to the older form of Javascript the browser needs.

src/app/app.module.ts is the entry point for our app.

Near the top of the file, we should see this:

Part 3 setup visual studio code for ionic

to download vs code visit this link

https://code.visualstudio.com/download

Part 2 install ionic in windows

nodejs installation step

Installation Steps

1. Download the Windows installer from the Nodes.js® web site.
2. Run the installer (the .msi file you downloaded in the previous step.)
3. Follow the prompts in the installer (Accept the license agreement, click the NEXT button a bunch of times and accept the default installation settings).
4. Restart your computer. You won’t be able to run Node.js® until you restart your computer

Android studio installations 

Step 1: Install "Android Studio IDE" and "Android SDK"

(For Windows)

1. Check that environment variable JAVA_HOME is set to the JDK installation directory via command "set JAVA_HOME". Otherwise, set the JAVA_HOME via "Control Panel". Check the detail steps HERE.
2. Check the system requirements for Android Studio/SDK @ https://developer.android.com/sdk/index.html#Requirements.
3. Goto "Android Developer" @ https://developer.android.com/index.html ⇒ Select "Get Android Studio" ⇒ "Download Android Studio For Windows", e.g., android-studio-bundle-162.xxxxxx-windows.exe, which is a huge file of 1.8GB.
4. Run the downloaded installer. Follow the on-screen instruction and accept the defaults to complete the installation. You need about 5GB of free disk space! Take note (and take photo) on the installation locations of "Android Studio" and "Android SDK".

Take note that "Android Studio IDE" is installed in "C:\Program Files\Android\Android Studio" and "Android SDK" is installed in "C:\Users\your-username\AppData\Local\Android\sdk".

Install Ionic

First, install Node.js. Then, install the latest Cordova and Ionic command-line tools in your terminal. Follow the Android and iOS platform guides to install required tools for development.

type this command for install ionic using nodejs command promts

Install Ionic

npm install -g cordova ionic

once installation is successfully done than you can create new ioinc application.

if you have any error while installing above tools comments that with error i will resolve it for you. 

Part 12 filters in angular 2

Every application starts out with what seems like a simple task: get data, transform them, and show them to users. Getting data could be as simple as creating a local variable or as complex as streaming data over a WebSocket.

Once data arrive, you could push their raw toString values directly to the view, but that rarely makes for a good user experience. For example, in most use cases, users prefer to see a date in a simple format like April 15, 1988 rather than the raw string format Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time).

Clearly, some values benefit from a bit of editing. You may notice that you desire many of the same transformations repeatedly, both within and across many applications. You can almost think of them as styles. In fact, you might like to apply them in your HTML templates as you do styles.

import { Component } from '@angular/core';

@Component({
selector: 'app-hero-birthday',
template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
birthday = new Date(1988, 3, 15); // April 15, 1988
}

<p>The hero's birthday is {{ birthday | date }}</p>

Part 11 ngFor directive in angular 2

With ngFor we can print this data to the screen under the form of a data table, by generating HTML similar to this:

<table>

<thead>

<th>Name</th>

</thead>

<tbody>

<tr>

<td>Superman</td>

</tr>

<tr>

<td>Batman</td>

</tr>

...

</tbody>

</table>

export class AppComponent {

title: string ="student Information";

students : any[]=[

{id: 'sid101',name: 'Rahul', lastname:'Jograna', gender:'Male',scholarship:10000,dob:'07/15/1997'},

{id: 'sid102',name: 'John', lastname:'carter', gender:'Male',scholarship:15000,dob:'07/15/1997'},

{id: 'sid103',name: 'Mark', lastname:'hamster', gender:'Male',scholarship:20000,dob:'07/15/1997'},

{id: 'sid104',name: 'Amit', lastname:'Jadeja', gender:'Male',scholarship:3000,dob:'07/15/1997'},

{id: 'sid106',name: 'merry', lastname:'johnson', gender:'female',scholarship:40000,dob:'07/15/1997'},

{id: 'sid106',name: 'merry', lastname:'johnson', gender:'female',scholarship:40000,dob:'07/15/1997'},

];

}

<!--The content below is only a placeholder and can be replaced.-->

<div style="text-align:center">

<h1>

Welcome to {{title}}!

</h1>

</div>

<div>

<table>

<tr>

<td>ID</td>

<td>First Name</td>

<td>Last Name</td>

<td>Gender</td>

<td>SS</td>

<td>DOB</td>

</tr>

<tr *ngFor="let student of students">

<td> {{student.id}} </td>

<td> {{student.name | uppercase}} </td>

<td> {{student.lastname | uppercase}} </td>

<td> {{student.gender | lowercase}} </td>

<td> {{student.scholarship | currency : 'USD':true}}</td>

<td> {{student.dob | date :'fullDate'}} </td>

</tr>

</table>

</div>

Part 10 events binding in angular 2

ASP.NET WEB API Call from Jquery

code for retrieving a web API from jquery


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using StudentData;

namespace StudentService.Controllers
{
    public class StudentsController : ApiController
    {
     
        public IEnumerable<studentTbl> Get()
        {
            using (studentDBEntities enti = new studentDBEntities())
            {
                return enti.studentTbls.ToList();
            }
        }

        public studentTbl Get(int id)
        {
            using (studentDBEntities enti = new studentDBEntities())
            {
                return enti.studentTbls.FirstOrDefault(e => e.Id == id);
            }
        }

        public HttpResponseMessage Post([FromBody]studentTbl student)
        {
            try {
            using(studentDBEntities enti = new studentDBEntities())
            {
                enti.studentTbls.Add(student);
                enti.SaveChanges();

                var msg = Request.CreateResponse(HttpStatusCode.Created, student);
                msg.Headers.Location = new Uri(Request.RequestUri + student.Id.ToString());

                return msg;
            }
                }
            catch (Exception ex)
            {
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ex);
            }
        }

        public HttpResponseMessage Delete(int id)
        {
            using(studentDBEntities enti = new studentDBEntities())
            {
                var enty = enti.studentTbls.FirstOrDefault(e => e.Id == id);
                if(enty == null)
                {
                    return Request.CreateErrorResponse(HttpStatusCode.NotFound, "Student with id " + id.ToString() + "not yet in database");
                }
                else
                {
                    enti.studentTbls.Remove(enty);
                    enti.SaveChanges();
                    return Request.CreateResponse(HttpStatusCode.OK);
                }
             
            }
        }


        public HttpResponseMessage Put(int id,[FromUri] studentTbl student)
        {
            using(studentDBEntities enti = new studentDBEntities())
            {
             
                var enty = enti.studentTbls.FirstOrDefault(e => e.Id == id);
                if(enty == null)
                {
                    return Request.CreateErrorResponse(HttpStatusCode.NotFound, "NOt yet availble");
                }
                else
                {
                enty.Name = student.Name;
                enty.Dept = student.Dept;
                enty.Age = student.Age;

                enti.SaveChanges();
                return Request.CreateResponse(HttpStatusCode.OK, enty);
                }
            }
        }
     
    }
}


html code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Students data</title>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var studentList = $('#studentList');

            $('#loadData').click(function () {
                $.ajax({
                    type: 'GET',
                    url: 'api/students',
                    dataType: 'json',
                    success: function (data) {
                        studentList.empty();

                        $.each(data, function (index, val) {
                            var Name = val.Id + " " + val.Name;
                            studentList.append('<li>' + Name + '</li>');
                        })
                    }

                });

            });

            $('#clear').click(function () {
                studentList.empty();
            });
        });

    </script>

</head>
<body>

    <input type="button" id="loadData" value="Show Students" />
    <input type="button" id="clear" value="CLear" />
    <ul id="studentList"></ul>
</body>
</html>