Angular2 in ASP.NET MVC Nuget Package

Standard

To install Angular2 Template for MVC & WebAPI, run the following command in the Package Manager Console

Install-Package Angular2-Template-for-MVC-and-WebAPI

This Nuget Package will help you to integrate Angular2 JS framework into ASP.NET MVC or WebAPI applications

Package includes ASP.NET MVC compatible tsconfig.json, typings.json, systemjs.config.js, package.json files. Package also includes client side JS libraries reference and configuration for Angular2, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/http, @angular/platform-browser, core-js, lodash, rxjs, systemjs, zone.js. Package also contains sample SPA template implemented according to Angular2 Best Design Guidelines.

File Type INFO:

  1. File1: Package.json file
    package.json identifies npm package dependencies for the project.
    

    2. File2: tsconfig.json file

    This file defines how the TypeScript compiler generates JavaScript from the project’s files.
    

    3. File3: typings.json file

    This file provides additional definition files for libraries that the TypeScript compiler doesn’t natively recognize.
    

    Required Step: Install package.json file

    Open CMD and redirect to your application folder and Using npm from the command line, install the packages listed in package.json with the command:

      > npm install --save --save-dev
    

    wait for the installation to complete

    4. File4: systemjs.config.js file This file provides information to a module loader about where to find application modules, and registers all the necessary packages.

Project Usage:

  1. Folder name “App” in Scripts folder

    2. Application module file (App/app.module.ts)

    Angular itself is split into separate Angular Modules. This makes it possible for you to keep payload size small by only importing the parts of Angular that your application needs.Every Angular application has at least one module: the root module, named AppModule here.

    3. Component & add it to your application (App/app.component.ts)

    Every Angular application has at least one component: the root component, named AppComponent here.Components are the basic building blocks of Angular applications. A component controls a portion of the screen—a view—through its associated template.

    4. Start up file (App/main.ts)

    Now we need to tell Angular to start up your application.

    5. Index.cshtml in View Folders contain angular 2 directive

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

    6. _Layout.cshtml contain angular2 script reference and system.js startup configuration

     http://../../node_modules/core-js/client/shim.min.js
     http://../../node_modules/zone.js/dist/zone.js
     http://../../node_modules/reflect-metadata/Reflect.js
     http://../../node_modules/systemjs/dist/system.src.js
    
     <!-- 2. Configure SystemJS -->
     http://../../systemjs.config.js
     
         System.import('../../Scripts/App/main').catch(function (err) {
             console.error(err);
         });
     
    

ASP.NET: Install Nuget Package .nupkg file locally

Standard

There are two common ways to install local .nupkg nuget package in Visual Studio.

Solution 1:

Step1: Note down path of your local NUGET package

screenshot_22

Step2: Open NUGET manager by right click on project and click setting wheel as highlighted in below image

screenshot_23

Step3: Click on Add button to add new NUGET source for VS

screenshot_24

Step4: Add name and path of your local NUGET package to add it as a source in VS and click on update button

screenshot_25

Step5: newly added local path will be available as a source

screenshot_26

Step6: Click on package source and choose your newly added NUGET package source as highlighted in below image

screenshot_27

Step7: Now local NUGET package will be available under Browse tab in Manage NUGET Package window

screenshot_28

 

Solution 2:

You can also use the Package Manager Console and invoke the Install-Package by specifying the path to the directory that contains the package file in the -Source parameter:

Install-Package SomePackage -Source C:\PathToThePackageDir\

Elastic Search : Insert Documents in Index using NEST in .NET

Standard

Go through Create Index using NEST in .NET article in order to understand connection string and creating index using NEST package.

EsClient.Index(obj.value, i => i
                    .Index("employee")
                    .Type("myEmployee")
                    .Id(obj.counter)
                    .Refresh()
                    );

Breakdown of above code is a follow:

  • .Index(“employee”) => refers to referenced index in which documents will be stored
  • .Type(“myEmployee”) => refers to type schema for your index
  • .Id(obj.counter) => use this API in order to create cutom ID’s
  • .Refresh() => refresh the shards after performing operation

C# Snippet

using System;
using System.Collections.Generic;
using System.Linq;
using Nest;
 
namespace ElasticSearchDemo
{
    public class Employee
    {
        public int EmpId { set; get; }
 
        public string Name { set; get; }
 
        public string Department { set; get; }
 
        public int Salary { set; get; }
    }
    class Program
    {
        public static Uri EsNode;
        public static ConnectionSettings EsConfig;
        public static ElasticClient EsClient;
        static void Main(string[] args)
        {
            EsNode = new Uri("http://localhost:9200/");
            EsConfig = new ConnectionSettings(EsNode);
            EsClient = new ElasticClient(EsConfig);
 
            var settings = new IndexSettings {NumberOfReplicas = 1, NumberOfShards = 2};
 
            var indexConfig = new IndexState
            {
                Settings = settings
            };
 
            if (!EsClient.IndexExists("employee").Exists)
            {
                EsClient.CreateIndex("employee", c => c
                .InitializeUsing(indexConfig)
                .Mappings(m => m.Map<Employee>(mp => mp.AutoMap())));
            }
            
            InsertDocument();
        }
 
        public static void InsertDocument()
        {
            var lst = PopulateEmployees();
 
            foreach (var obj in lst.Select((value, counter) => new { counter, value }))
            {
                EsClient.Index(obj.value, i => i
                    .Index("employee")
                    .Type("myEmployee")
                    .Id(obj.counter)
                    .Refresh()
                    );
            }
 
        }
 
        public static List<Employee> PopulateEmployees()
        {
            return new List<Employee>
            {
                new Employee {EmpId = 1, Name = "John", Department = "IT", Salary = 45000},
                new Employee {EmpId = 2, Name = "Will", Department = "Dev", Salary = 35000},
                new Employee {EmpId = 3, Name = "Henry", Department = "Dev", Salary = 25000},
                new Employee {EmpId = 4, Name = "Eric", Department = "Dev", Salary = 15000},
                new Employee {EmpId = 5, Name = "Steve", Department = "Dev", Salary = 65000},
                new Employee {EmpId = 6, Name = "Mike", Department = "QA", Salary = 75000},
                new Employee {EmpId = 7, Name = "Mark", Department = "QA", Salary = 55000},
                new Employee {EmpId = 8, Name = "Kevin", Department = "QA", Salary = 45000},
                new Employee {EmpId = 9, Name = "Haddin", Department = "Dev", Salary = 25000},
                new Employee {EmpId = 10, Name = "Smith", Department = "Dev", Salary = 15000}
            };
        }
    }
}