Friday, February 17, 2017

Angular 2 Final Part 2 : Setting up Angular 2 with Asp .Net Core

There are an number of ways to start an Angular project.
A few of  them are GitHub copy, AngularCli, yo.
Setting up Angular with Asp .Net Core is easy with yo aspnetcore-spa. yeoman or yo is a code generator.

For working with yo first node and npm (Node  Package Manager have to be installed.


Once npm is installed yo can be installed  with the command  
npm install -g yo. 
-g is used to install it globally.





Since yo is ready now generator for Asp .Net Core can be installed with the command
npm install -g generator-aspnet.




Now  it's possible to create different type of Asp .Net project like  Empty Web Application, Web Appllication Basic, Web Application (with Identity), etc.




Generator for Asp .Net Core Single Page Application can be installed by typing
npm install -g yo generator-aspnetcore-spa.


A new Angular project can be created with the comman
yo aspnetcore-spa.

This generator can be used to create not only Angular project but also Knockout, React, etc.

I am going with Angular 2. It will be prompting the Visual Studio Version, Whether you want Unit Testing the Project, the Project name, etc.

I am sticking on with Visual Studio 2015, with no Unit Testing.


Once the project is created you can open it in any editor or IDE. My preferred editor is Visual Studio Code.
By typing code . the project can be opened in Visual Studio Code.


Visual Studio Code terminal can be invoked with Ctrl+~.

Since this  is a  Asp .Net Core project it can be run with the command dotnet run.

The output can be seen by opening a browser and type http://localhost:5000 as mentioned in the output.


Thursday, February 16, 2017

Angular 2 Final: Part 1 Getting Started


Angular is a Single Page Application framework from Google.  Angular 2 was released on September 14,  2016 after two years of development.


Setting a local development environment requires installing node. 



With Plunker Getting Started with Angular 2 is very easy.













app.ts

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Shalvin'
  }
}

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


Component

The basic building block of Angular is a component. A component is a reusable piece of functionality like a Partial View in Asp .Net MVC or an User Control in Web Forms.


  A Component is a collection of TypeScript code, HTML Template and Directive. You can write components using ES5, ES6, TypeScript or Dart.  Typescript is the most preferred option. Angular 2 is developed using TypeScript. The TypeScript will get transpiled to ES5 so that browsers can understand.


The component stars with import  statements which imports the necessary modules from packages.  In this example we are using Component and NgModule from @angular.core package, and BrowserModule from @angular/platform-browser. Angular 2 is a framework which can be used to create Mobile application (Ionic 2), multi platform applications (Electron), etc. Here we are specifying that it is a browser application using BrowserModule.



NgModule is used to create  Module. Module  is a  unit of functionality. It is a collection of components directives, etc.


A Component Directive is like attributes in .Net. Here the selector property is given the name my-app. In the HML page we will be making use of this template using <my-app></my-app> tags.


template property is used to define the HTML. Alternatively templateUrl can be used used for specifying an HTML document containing the UI.


 Inside the class App I have defined a memory variable called name and assigned it a value 'Shalvin'. TypeScript supports types. I have defined name of type string. That name variable is used inside HTML using interpolation syntax, ie. enclosed within double curly brackets.


main.ts

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

platformBrowserDynamic().bootstrapModule(AppModule)


main.ts is the  starting point of the application. It bootstraps AppModule, which in turn bootstraps App component.


index.html

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>



 

In the index.html page we are instantiating the template using <my-app></my-app> tags.




Property Binding


Property Binding enables binding property value in the component to DOM.


 template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    Name <input type = "text" [value] = name/>
    
  `,


[] is the Property Binding syntax.  Here the name variable is bound to the value property of input. Likewise it is possible to bind to any any attributes of HTML elements like src of img, href of anchor, etc.
Plunker output.


Event Binding

Suppose you have a function in the component and you want to bind that to the click event of a button. This can be done using Event binding.  Enclose the event you want to bind to within ().


@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <div>
    Name <input type ="text" [value]= name/>
     <div>
     <div>
      <input type ="button" value = "About Me" (click)="Hello()"/>
     </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Shalvin'
  }
  
  Hello()
  {
    alert('.Net and Angular Consultant and Trainer');
  }
}


Plunker output.


Two-way data binding

The data binding in Angular is unidirectional. Property Binding happens from component to view. Event Binding happens from view to component.

By merging both Property Binding syntax [] and Event Binding syntaxt () it is possible to have Two-way data binding.

For implementing two way data binding FormsModule of  @angular/forms package is required.



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


imports array



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



imports array of  AppModule is used to consolidate features belonging to
 different modules. So the FormsModule have to be added to import array.



@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 *ngIf="name">{{name}} is specializing in {{specialization}}</h2>
    </div>
    <div>
    Name <input type ="text" [(ngModel)]= name/>
     <div>
     <div>
    Specialization <input type ="text" [(ngModel)]= specialization/>
     <div>
  `,
})
export class App {
  name:string;
  specialization:string;
}



Here the ngModel is enclosed within [()] and assigned the value of the component which makes it two-way data bindable. As the value are entered into input fields the values will be reflected at the top.

Plunker output




Thursday, January 19, 2017

K-MUG TECHDAY JAN 2017

Agenda
9:30 AM - 9:45 AM - Networking and Community Updates
9:45 AM - 10:30 AM - Block Chain and Eethereum - Praseed Pai
10:30 AM - 11:15 AM - Introduction to Typescript - Naveen
11:15 AM - 11:25 AM - Tea Break and Networking
11:25 AM - 12:00 PM - JVM Internals - Sarath
12:00 PM - 12:40 PM - Office 365 Development - Abhilash Ashok
12:40 PM - 1 PM - Ask Experts - Q&A Session

Venue
Orion India Systems Pvt. Ltd
2nd Floor, LuLu Cyber Tower
Infopark, Kakkanad, Kochi
India, 682042

Register

Thursday, December 22, 2016

Thing to remember while embracing online payment

While making online payment it's better not to use your primary account. Have a secondary account and transfer small amount of money as required.

A few years back I had a funny experience. I went to a Cloud Computing seminar of a company. They said about the trial account. After the seminar I thought of making a try. The trial account creation required  card number. I gave the card no. of my secondary debit card with very less money to start the account. After that I forgot about the whole think since that was not my technology focus.

After a few months I started  receiving mails stating they couldn't charge $586 and my account will be suspended.


I was safe.

Thursday, December 15, 2016

K-MUG TECHDAY DECEMBER 2016

Agenda
9:30 AM - 9:45 AM - Networking and Community Updates
9:45 AM - 10:30 AM - Introduction to Angular 2 - Leo P Joy
10:30 AM - 11:00 AM - Introduction to DevOps - Praveen Nair
11:00 AM - 11:10 AM - Tea Break and Networking
11:10 AM - 11:50 AM - Basic of ASP.NET MVC - Tinu
11:50 AM - 12:20 PM - Unit Testing on .NET Core - Anuraj12:20 PM - 12:45 PM - Service Fabric - Microservices - Rajneesh
12:45 PM - 1 PM - Ask Experts - Q&A Session

Venue
Orion India Systems Pvt. Ltd
2nd Floor, LuLu Cyber Tower
Infopark, Kakkanad, Kochi
India, 682042

Date and Time

Sat, December 17, 2016
9:30 AM – 1:00 PM IST

Register

Tuesday, October 11, 2016

Asp .Net Core Part 2 : Using Visual Studio

Visual Studio 2015 is the most preferred tool for creating Asp .Net Core Applications. I am starting an Asp .Net Core Web Application from New Project option.


Staring with an Empty project so that we can gradually build the application instead of getting overwhelmed with a plenty of options.


In the Solution Explorer we can see project.json which we already explore in Part 1,




When I run the application I get the Hello World output.





public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            loggerFactory.AddConsole();

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Hello World from Shalvin!");
            });
        }

I am making alteration in WriteAsync method within Configure method.

By running the application again you can see the new output.





Asp .Net Core Part 1 : dotnet tool and Console application


Asp .Net Core is an cross platform and open source MVC framework from Microsoft. Asp .Net core is characterized by  low memory footprint.


First let's create a Console application with Asp .Net Core.  Asp .Net Core gets  installed as a part of Visual Studio Update 3.
Asp .Net Core is not tied to Visual Studio. You can use any editor for creating Asp .Net Core Application.

Here I am going to demonstrate creating a simple Console application using dotnet tool.

 I can go to command prompt and type dotnet --help.


dotnet  is the .Net Command Line Tool.

For creating an new project we can use the comman dotnet new.


The project is having two files: Project.json and Program.cs.

Project.json file is having all the dependencies. 

{
  "version": "1.0.0-*",
  "buildOptions": {
    "debugType": "portable",
    "emitEntryPoint": true
  },
  "dependencies": {},
  "frameworks": {
    "netcoreapp1.0": {
      "dependencies": {
        "Microsoft.NETCore.App": {
          "type": "platform",
          "version": "1.0.0"
        }
      },
      "imports": "dnxcore50"
    }
  }
}

Program.cs is having the actual code.

using System;

namespace ConsoleApplication
{
    public class Program
    {
        public static void Main(string[] args)
        {
            Console.WriteLine("Hello World!");
        }
    }
}

dotnet restore command is used to restore the project with dependencies form Nuget based on the entries in Project.json,

We can see the output with dotnet run command.


Thursday, March 17, 2016

March Kerala Microsoft User Group Meeting

Venue
2nd Floor, Orion India Systems - LuLu Cyber Tower - 1 Infopark, Kochi 682042, India 

Time

Saturday, March 19, 2016 from 9:30 AM to 1:00 PM (IST)

AngularJS and JavaScript Day - By Arun Tharakan and Praseed Pai


The event will be more like a workshop. Try to bring your laptop.

Register