Angular CLI shortcuts

by Admin 16. September 2016 03:06

 

Angular CLI shortcuts
To install Angular CLI, run: $ npm install -g angular-cli

Generate a my-sample application: $ ng new my-sample


# Generate a new component
$ ng generate component my-new-component

# Generate a new directive
$ ng generate directive my-new-directive

# Generate a new pipe
$ ng generate pipe my-new-pipe

# Generate a new service
$ ng generate service my-new-service

# Generate a new class
$ ng generate class my-new-class

# Generate a new interface
$ ng generate interface my-new-interface

# Generate a new enum
$ ng generate enum my-new-enum

Tags:

Angular2 stuff

by Admin 6. September 2016 07:23

 

The * before the ngFor denotes the fact that *ngFor is what is called a structural directive, a directive that is going to affect the DOM in some way adding or removing elements to it.

 

Backtick (`) are used to define the new ES6 template strings. They are a new great feature of ES6 that let’s you write multiline strings natively and insert any expression directly within a string with a very straightforward syntax.

 

Why don’t we use the Injectable decorator in components? 

Well that’s because the Component decorator enables dependency injection directly.

 

Angular 2 has support for these data-bindings:

1. Interpolation: One-way data binding from the component to the template. Let’s you display information from the component into the template. Example: {{user.name}}.

2. Property bindings: One-way data binding from the component to the template. Let’s you bind data from the component into the template. Example: [src]="user.imageUrl".

3. Event bindings: One-way data binding from the template to the component. Let’s you bind template events to the component. Example [click)="selectuser(user)".

4. [(ngModel)]: Two-way data binding from the component to the template and vice versa. Example [(ngModel)]="user.name".

Tags:

VS 2015 Error Install-Package : Unable to load the service index for source https://api.nuget.org/v3/index.json

by Admin 8. May 2016 07:56

Visual Studio 2015 Error Install-Package : Unable to load the service index for source https://api.nuget.org/v3/index.json

Fix : 

1. Close your Visual Studio 2015

2. Navigate to %AppData%\NuGet\ folder 

3. Delete the NuGet.config file

4. Now open Visual Studio. You can notice that a new NuGet.Config file is generated

This fixes the issue

Tags:

RenderPartialViewToString / Return multiple partial views in JSON - MVC6

by Admin 5. May 2016 00:00

I got a situation where we need to dynamically render multiple partial views and bid on the view in MVC6

So Here is the solution.

This is the common method for rendering the partial views as strings

protected string RenderPartialViewToString(string viewName, object model)

        {

            if (string.IsNullOrEmpty(viewName))

                viewName = ActionContext.ActionDescriptor.Name;

 

            ViewData.Model = model;

 

            using (var sw = new StringWriter())

            {

                var engine = Resolver.GetService(typeof(ICompositeViewEngine))

                    as ICompositeViewEngine;

                var viewResult = engine.FindPartialView(ActionContext, viewName);

 

                var viewContext = new ViewContext(

                    ActionContext,

                    viewResult.View,

                    ViewData,

                    TempData,

                    sw,

                    new HtmlHelperOptions()

                );

                //Everything is async now!

                var t = viewResult.View.RenderAsync(viewContext);

                t.Wait();

                return sw.GetStringBuilder().ToString();

            }

        }

 

Here is the method for the view which returns multiple partial view results as JSON

public async Task<ActionResult> GetMultiplePartialsAsync(Your input parameters go here)

        {

            var viewModel = await _myService.FetchDatasAsync(Your input parameters go here);

   //For brevity I am assigning the same view model to all the partial views.

   //You can have sub models in the view model too

                var json = Json(new

                {

                    FilterPartialViewHtml = RenderPartialViewToString("PagedResults", viewModel),

                    CountriesPartialViewHtml = RenderPartialViewToString("Countries", viewModel),

                    NamesPartialViewHtml = RenderPartialViewToString("Names", viewModel)

                });

                return json;

 

        }

 

Here is my View which load all the 3 partial views on load & on click of a checkbox

Note that the paritals are loaded on load as well as gets reladed on all onchange events of the checkbox for countries & Names

@model ResultViewModel

@{

    Layout = "~/Views/Shared/_DemoLayout.cshtml";

}

<div id="wrapper">

    <main id="content" role="main">

            

            <div class="filtering">

                <div class="filter-form">

                    <div class="inner-block">

                        <form method="get" action="Filter">

                            <div class="filter text-filter">

                                <label class="legend" for="finder-keyword-search">Search</label>

                                <input value="" type="text" name="Keywords" id="Keywords" aria-controls="js-search-results-info" class="text">

                            </div>

                            <div id="divCenturies">

                            </div>

                            <div id="divLastNames">

                            </div>

                        </form>

                    </div>

                </div>

                <div class="js-live-search-results-block">

                    <div class="filtered-results">

                            <div id="searchResults">

                            </div>

                            

                    </div>

                </div>

            </div>

    </main>

</div>

<script>

    var url = '@Url.Action("GetMultiplePartialsAsync", "Search")';

 

    $(window).load(function () {

        SearchData();

        $('#searchResults').hide();

    });

 

    $(document).ready(function () {

        $('#searchResults').hide();

        $('#divCenturies').hide();

        $('#divLastNames').hide();

        $(document).on("change", "input[type=checkbox]", function () {

            SearchData();

        });

 

        $("#Keywords").change(function () {

            SearchData();

        });

        $("#Keywords").keypress(function (e) {

            if ((e.keyCode || e.which) == 13) {

                e.preventDefault();

                SearchData();

            }

        });

    });

 

    function SearchData() {

        $.get(url, { Your input parameters here },

                function (data) {

                    $("#searchResults").html(data.FilterPartialViewHtml);

                    $("#divCenturies").html(data.CountriesPartialViewHtml);

                    $("#divLastNames").html(data.NamesPartialViewHtml);

                });

        $('#searchResults').show();

        $('#divCenturies').show();

        $('#divLastNames').show();

    }

</script>

 

Tags:

.NET core features

by Admin 7. April 2016 02:26

 

.NET core

DNX – Dot Net Execution Environment

Native process for hosting the CLR (dnx.exe)

Includes compiler and xpat tools for building .NET apps

Xpat/ OSS friendly project system (project.json)

Package based (install, restore, pack)

Side by side versioning (Manage DNX’s with the .Net Version Manager (DNVM)

Rosyln compiler  

Tags:

Angular2 Stuff

by Admin 1. April 2016 02:13


Angular2 Style guide 

https://angular.io/styleguide

IDE to use

Visual studio code

https://code.visualstudio.com/docs/introvideos/overview

Other Nice Editors 

1. Atom: https://atom.io/ (Free editor, created by the Github guys. Allows you to add plugins and change appearance with third-party packages)

2. Sublime: https://www.sublimetext.com/ (very modular. Allows you to add plugins and change appearance with third-party packages.)

TypeScript

TypeScript is the language of choice for Angular 2 development. It’s a superset to JavaScript which gets compiled into plain JavaScript. The main feature it

adds are the Types, which make development easier (autocompletion etc.) and less error-prone (compiler errors).

Visual studio code nice intro videos which has got Typescript debugging

https://code.visualstudio.com/docs/introvideos/overview?utm_expid=101350005-29.Dor1By5yTmynP2dmCMGGtw.1&start=true

Tags:

Autofac Dependency Injection in ASP.NET 5

by Admin 21. March 2016 11:50

A. Add the following Autofac reference in the project.json file

                        "Autofac.Extensions.DependencyInjection": "4.0.0-rc1-177"

               Note: the version number might change based on the new releases

B. Introduce the following changes in the Startup.CS file

1. Change the method return type from Void to IServiceProvider like this

                         public IServiceProvider ConfigureServices(IServiceCollection services)

2. Add the following line items after  // Add application services.

            //Autofac DI 

            var builder = new ContainerBuilder();

            //builder.RegisterModule<DataModule>();

            builder.RegisterType<TestService>().As<ITestService>().InstancePerDependency();   // This is a test class and interface I have added on to the              project.

            builder.Populate(services);

            var container = builder.Build();

            return container.Resolve<IServiceProvider>();

3. Usage is quite straight forward as in previous versions

   I have tried implementing in the HomeController.

private readonly ITestService _testService;

        public HomeController(ITestService testService)

        {

            _testService = testService;

        }

        public IActionResult Index()

        {

            ViewData["temp"] = _testService.GetTestString();

            return View();

        }

Thats it!         

 

 

Tags:

Resharper keyboard shortcuts not working in VS2015

by Admin 18. March 2016 11:00

I had an issue earlier with Resharper shortcuts not working in Visual Studio 2015.

I had to follow to use these steps to make Resharper work again

1. Tools > Options > Keyboard > Click on the Reset button (top right) and click ok.

2. Tools > Options > Resharper > Options > Click on Apply Scheme and click Save.

Now close and re-open your visual studio. Hope the Reharper shortcuts are back to life again!

Ctrl + T :)

Tags:

Git stuff

by Admin 15. March 2016 12:50


Setting Identity in GIT
$ git config --global user.name "UserName"
$ git config --global user.email "venkat@VenkatRangala.com"

To unblock the proxy

$ git config --global http.proxy "http://xx.xx.xx.xx:8080/"
$ git config --global https.proxy "http://xx.xx.xx.xx:8080/"


gitignore file creation in Windows
$ touch .gitignore


Create a Branch in GIT
$ git branch <BranchName>

To switch to the branch name
$ git checkout <BranchName>

Create Branch & checkout

git checkout -b "<BranchName>"


Add a file from command in GIT
$ touch <filename>
Eg: $ touch styles.css
A new styles.css file gets added to the git repository


$ git checkout master
Will switch you to the main branch


$ git mergetool
uses a tool like tortisegit or winmerge to perform merge a little more effeciently

 

Best way to merge a git branch into master

My work on test branch is complete and I am ready to merge it back to master

git checkout master

git pull origin master

git merge test

git push origin master

 

Useful Links

http://juristr.com/blog/2013/04/git-explained/

https://dzone.com/articles/git-visual-studio-and-net

https://visualstudiogallery.msdn.microsoft.com/abafc7d6-dcaa-40f4-8a5e-d6724bdb980c

Tags:

Publishing to an Azure Web App with Continuous Deployment

by Admin 22. January 2016 07:28

Publishing to an Azure Web App with Continuous Deployment

http://docs.asp.net/en/latest/publishing/azure-continuous-deployment.html

Tags:

TextBox

Tag cloud