SharePoint Online AddIns

protected void Page_Load(object sender, EventArgs e)
        {
 
            var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);

            using (var clientContext = spContext.CreateUserClientContextForSPHost())
            {
                clientContext.Load(clientContext.Site);
                clientContext.Load(clientContext.Web, web => web);
                clientContext.Load(clientContext.Web.Lists);
                clientContext.ExecuteQuery();
                ListBox1.Items.Add(clientContext.Site.Url);
                ListBox1.Items.Add(clientContext.Web.Title);
                ListBox1.Items.Add(clientContext.Web.Url);
            }
        }

Angular 2 Contact Management: Part 1 Getting Started

appmodule.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

appcomponent.ts

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

export class Contact {
  id: number;
  name: string;
  spec:string;
}

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>{{contact.name}} details!</h2>
    <div><label>id: </label>{{contact.id}}</div>
    
    <div>
      <label>name: </label>
      <input [(ngModel)]="contact.name" placeholder="name">
    </div>
     <div>
      <label>specialization: </label>
      <input [value]="contact.spec" placeholder="name">
    </div>
   
    `
})
export class AppComponent {
  title = 'Contact Management';
  contact: Contact = {
    id: 1,
    name: 'Shalvin',
    spec: 'Angular'
  };
  
  
}

index.html

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Angular 2 Contact Management Part 3: Components

contact.ts

export class Contact {
  id: number;
  name: string;
  specialization:string;
}

app.component.ts

import { Component } from '@angular/core';
import {Contact} from './contact';


const CONTACTS: Contact[] = [
  { id: 11, name: 'Shalvin', specialization : '.Net' },
  { id: 12, name: 'Praveen', specialization : 'Big Data' },
  { id: 13, name: 'Anuraj', specialization : 'Asp .Net Core' },
  { id: 14, name: 'Praseed', specialization :'C++' },
  { id: 14, name: 'Yaneesh', specialization :'.Net' }
];

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>My Contacts</h2>
    <ul class="Contactes">
      <li  *ngFor="let Contact of Contacts"
        [class.selected]="Contact === selectedContact"
        (click)="onSelect(Contact)">
         {{Contact.name}}
      </li>
    </ul>
    <my-hero-detail [contact]="selectedContact"></my-hero-detail>
  `
})
export class AppComponent {
  title = 'Contact Management 2';
  Contacts = CONTACTS;
  selectedContact: Contact;

  onSelect(contact: Contact): void {
    this.selectedContact = contact;
  }
}

hero-detail.component.ts

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

import { Contact } from './contact';
@Component({
  selector: 'my-contact-detail',
  template: `
    <div *ngIf="contact">
      <h2>{{contact.name}} details!</h2>
      <div><label>id: </label>{{contact.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="contact.name" placeholder="name"/>
      </div>
     
    </div>
     
  `
})
export class HeroDetailComponent {
  @Input()
  contact: Contact;
}

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './app.component';
import { HeroDetailComponent } from './contact-detail.component';
@NgModule({
    imports: [
    BrowserModule,
    FormsModule
    ],
      declarations: [
        AppComponent,
        HeroDetailComponent
      ],
      bootstrap: [ AppComponent ]
    })
    export class AppModule { }

Angular 2 Contact Management Part 2 :Binding to Array of Class

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

On to the existing app.module.ts import FormModule which is essential for implementing two way data binding.

app.component.ts

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

export class Contact {
  id: number;
  name: string;
  specialization:string;
}

const CONTACTS: Contact[] = [
  { id: 11, name: 'Shalvin', specialization : '.Net' },
  { id: 12, name: 'Praveen', specialization : 'Big Data' },
  { id: 13, name: 'Anuraj', specialization : 'Asp .Net Core' },
  { id: 14, name: 'Praseed', specialization :'C++' },
  { id: 14, name: 'Yaneesh', specialization :'.Net' }
];

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>My Contacts</h2>
    <ul>
      <li  *ngFor="let Contact of Contacts"
         (click)="onSelect(Contact)">
         {{Contact.name}}
      </li>
    </ul>
    <div *ngIf="selectedContact">
      <h2>{{selectedContact.name}} details!</h2>
      <div><label>id: </label>{{selectedContact.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="selectedContact.name" placeholder="name"/>
      </div>
       <div>
        <label>Specailization: </label>
        <input [(ngModel)]="selectedContact.specialization" placeholder="specialization"/>
      </div>
    </div>
  `
})
export class AppComponent {
  title = 'Contact Management';
  Contacts = CONTACTS;
  selectedContact: Contact;

  onSelect(Contact: Contact): void {
    this.selectedContact = Contact;
  }
}

 

 Clicking on a Contact it's details will be displayed below.

TypeScript Part 2 : Classes

TypeScript class

class Contact{
    constructor(
        public name: string, public location: string)
    {

    }
}

var aPerson: Contact = new Contact("Shalvin", "Kochi")
alert('I am ' + aPerson.name + ' from '+ aPerson.location);

ES5

var Contact = (function () {
    function Contact(name, location) {
        this.name = name;
        this.location = location;
    }
    return Contact;
}());
var aPerson = new Contact("Shalvin", "Kochi");
alert('I am ' + aPerson.name + ' from ' + aPerson.location);

TypeScript Part 1: DataTypes and Array

TypeScript is an open source, cross platform and  strongly typed super set of  JavaScript. TypeScript can be  transcompiled into ES5, so that it can be used along with HTML.

TypeScript Data Types

var sName: string = 'Shalvin';
alert(sName);

ES5

var sName = 'Shalvin';
alert(sName);

let

let can also be use to declare memory variable. let can be used to circumvent “hoisting”.

let sName: string = 'Shalvin';
alert(sName);

Tryout


TypeScript Array

var myArr: Array<number> = [1, 2, 3];
for (let n of myArr) {
    alert(n);
}

JavaScript

var myArr = [1, 2, 3];
for (var _i = 0, myArr_1 = myArr; _i < myArr_1.length; _i++) {
    var n = myArr_1[_i];
    alert(n);
}

Bootstrap MVC Layout with Left navigation bar

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
        
    <div class="nav navbar-fixed-top">
        @Html.ActionLink("Shalvin Institute Management", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
    </div>

    <div class="row">
        <div class="row col-md-2">
            <div class="navbar navbar-inverse">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                       
                    </div>

                    <div class="row">
                        <ul class="nav">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row col-md-10">
            @RenderBody()
        </div>
    </div>
    
    <div class="container body-content">
       
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Shalvin P D</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>