Visual Studio Angular Project without using Templates

There are several Visual Studio templates which quick start your Angular development. I also created one template. If you are interested please go over to here. You can also download the source code of this blog at my github site.

These templates are great for a quick start, but one issue is that these templates create more or less functionality than we really need. Another issue is that we may not understand the purpose of all the files. If you are like me, then you want to know the plumbing code. In this blog I will go over step by step instructions on building an MVC Angular project without using Visual Studio Templates.

In my project I am planning to include the following javascript libraries. Please see below the list of libraries along with its purpose and location where you can download them. Where ever possible let’s download the non-minified version, we will use our .NET bundling to bundle these files. Alternatively you can use CDN also.

• AngularJS

         https://angularjs.org  

• AngularJS Route – For routing with our single page application

         https://angularjs.org  

• Bootstrap – We will use this primarily for layout and responsive design. If need you can also use its JavaScript components such as DatePicker (you may need bootstrap directives for this)

         http://getbootstrap.com/getting-started/#download

• Kendo UI Core with Angular Directives – These are open source UI controls from Telerik. These includes Angular directives. This is optional

         https://github.com/telerik/kendo-ui-core/

• JQuery – You may not need this but if you are using KendoUI then you need this

         http://jquery.com/download/

In addition to these javascript libraries we also need some nuget packages, they are:

• Microsoft ASP.NET MVC – For the start up file
• Microsoft ASP.NET Web API – For Ajax requests from Angular
• Microsoft.AspNet.Web.Optimization – For bundling and minification of javascript and css

As our project main UI components are Angular, Kendo & Bootstrap, let us call our project as AngularKendoBootstrap. So let’s get started.

Fire up Visual Studio to create our project.

• In Visual Studio 2013 create an ASP.NET Web Project and give the name as AngularKendoBootstrap     

• While creating the project select an empty template

• As you see we have a blank project in our solution explorer

• Using Nuget Install ASP.NET MVC

• Similarly install Web API

• Using Nuget install the ASP.NET Web Optimization framework. This is used for bundling and minification

• After installing using Nuget, create the following folder structure. As you are aware this is a typical MVC folder structure with an addition “app” folder

• As per the MVC folder structure let’s include the files
• Under the script folder include all the javascript files we downloaded

• Similarly include the css files under the content folder

• As recommended by MVC add the config files in the App_Start folder. These are the standard config file for any typical MVC & Web API project.

• Add global.asax file and call our configs from it

protected void Application_Start(object sender, EventArgs e)

{

    WebApiConfig.Register(GlobalConfiguration.Configuration);

    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

    RouteConfig.RegisterRoutes(RouteTable.Routes);

    BundleConfig.RegisterBundles(BundleTable.Bundles);

}

• Let’s bundle all out javascripts and css files using Bundle.config. In addition let’s also bundle all the our javascript files (that we place under app folder)

//including all the libraries used in our app such as angular

bundles.Add(

    new ScriptBundle("~/scripts/libraries")

        .Include("~/scripts/angular/angular.js")

        .Include("~/scripts/angular/angular-route.js")

        .Include("~/scripts/bootstrap.js")

        .Include("~/scripts/jquery.js")

        .Include("~/scripts/kendo/kendo.ui.core.js")

    );

//including all the css used in our app

bundles.Add(

    new StyleBundle("~/content/css")

        .Include("~/content/normalize.css")

        .Include("~/content/bootstrap/bootstrap.css")

        .Include("~/content/bootstrap/bootstrap-theme.css")

        .Include("~/content/kendo/kendo.common.css")

        .Include("~/content/kendo/kendo.blueopal.css")

        .Include("~/content/app.css")

    );

//including the javascript files in our app
bundles.Add(
     new ScriptBundle("~/scripts/app")
     .Include("~/app/app.js")
     .IncludeDirectory("~/app", "*.js", true)
      );

• Let’s create a HomeController and a correspond view. This serves the starting page for our angular app. Here is code for our MVC view

<html data-ng-app="AngularKendoBootstrapApp">

<head>

    <meta name="viewport" content="width=device-width" />

    <title> Angular Kendo Bootstrap Application</title>

    @Styles.Render("~/Content/css")

</head>

<body>

    <a href="/home">Home</a> <a href="/contact">Contact</a>

    <div data-ng-view>

        <div id="splash" class="splash">

            Loading ...

        </div>

    </div>

        @Scripts.Render("~/scripts/libraries")

        @Scripts.Render("~/scripts/app")

</body>

</html>

In the above as you see we defined an angular app “AngularKendoBootstrapApp” and included all the necessary javascript files

This completes our MVC setup. Let move to the Javascript part of our setup

• Create the following directory structure for app folder. This is the directory structure we will use for our angular scripts.

• In our app.js define the routing for our pages in the app as shown below:

angular.module('AngularKendoBootstrapApp', ['ngRoute'])

  .config(function ($routeProvider, $locationProvider) {

    $routeProvider

        .when("/home", {

                controller: "home",

                templateUrl: "/app/home/home.html"

            })

        .when("/contact", {

            controller: "contact",

            templateUrl: "/app/contact/contact.html"

        })

        .otherwise({ redirectTo: "/home" });

    $locationProvider.html5Mode(true);

});

We are done J. We built an Angular app from scratch without using any templates. Compile your project and run it.

You can find the source code of this project at my github site

You can also download the Visual Studio template file for this project from here.