CheapASPNETHostingReview.com | Best and cheap ASP.NET MVC hosting. AngularJS and ASP.NET C# MVC are both MVC frameworks for creating web applications. AngularJS is a JavaScript framework for creating web applications while ASP.NET MVC is a framework for creating web applications using HTML, JavaScript and server side programming language like C# etc. In this tutorial series, we’ll see how to create a web application using both ASP.NET MVC 4 and AngularJS. This tutorial would focus on how to use AngularJS for .net developers.
How To Creating a Web App Using ASP.NET MVC 4 and AngularJS ?
Let’s get started from scratch by creating a ASP.NET MVC 4 empty template project. Once the project has been created it shoud empty without any default code. I did this so that you can get a feel of how to get started from the very scratch and understand how thing really work. So, moving on, first we’ll add a layout to our web application. A layout is like a master page that we have in asp.net web form’s project. In our project’s view directory create a folder called Shared and inside that directory create a file called _Layout.cshtml. Here is how it looks like:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html lang="en">Creating a Web App Using AngularJS and ASP.NET <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>CodeHandbook</title> @Styles.Render("~/bundles/bootstrap") </head> <body> <div class="container"> <div class="header clearfix"> <nav> <ul class="nav nav-pills pull-right"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="/Login/ShowSignIn">Sign In</a></li> <li role="presentation"><a href="/Login/ShowSignUp">Sign Up</a></li> </ul> </nav> <h3 class="text-muted"> CodeHandbook</h3> </div> <div class="jumbotron"> @RenderBody() </div> <footer class="footer"> <p>&copy; 2015 Codehandbook, Inc.</p> </footer> </div> </body> </html> |
Now there are a couple of things in the above HTML code that would be confusing to a beginner. Let’s take them one by one.
1 | @Styles.Render("~/bundles/bootstrap") |
The above code renders the bootstrap related CSS files that we would define in the BundleConfig.cs file in the App_Start folder. Let’s create the BundleConfig.cs class in the App_Start folder. Inside BundleConfig.cs we need to register the routes. Here is how it would look like:
1 2 3 4 5 6 7 | public static void RegisterBundles(BundleCollection bundles) { bundles.IgnoreList.Clear(); bundles.Add(new StyleBundle("~/bundles/bootstrap").Include( "~/Style/bootstrap.min.css", "~/Style/jumbotron-narrow.css")); } |
Why do we need to use bundle ? Why not include the files directly like we do in web forms ?
Well, bundling helps to compress the JavaScript file and style sheets into a single file to save bandwidth and that’s why we use it.
Add the following line of code in the Global.asax file in the Application_Start :
1 | BundleConfig.RegisterBundles(BundleTable.Bundles); |
Next thing that may look odd in the above code is the @RenderBody(). This is the section of the layout page where the content is rendered each time a new request is received.
For the _Layout.cshtml to be accepted as the layout page for our application we need to define it in another file called _ViewStart.cshtml. Inside Views create a file called _ViewStart.cshtml and add the following code :
1 2 3 | @{ Layout = "~/Views/Shared/_Layout.cshtml"; } |
Ok now we are all set with the layout code for our web application. Now let’s add a controller inside the Controllers folder called LoginController. Inside the LoginController define a method called ShowDefault which would render a default view.
Here is the ShowDefault method :
1 2 3 4 | public ActionResult ShowDefault() { return View(); } |
Right click on the ShowDefault method and add a view with the same name, ShowDefault. Now a file should get created in the Views/Login/. Add the following code to the ShowDefault.cshtml :
1 2 3 4 5 6 7 8 9 10 11 | @{ ViewBag.Title = "ShowDefault"; } <h1> Jumbotron heading</h1> <p class="lead"> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p> <a class="btn btn-lg btn-success" href="#" role="button">Sign up today</a></p> |
Set the default controller and action method to be called when the app start in the RouteConfig.cs file.
1 2 3 4 5 6 7 8 9 10 | public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Login", action = "ShowDefault", id = UrlParameter.Optional } ); } |
Save the changes and try running the application and you should be able to see the asp.net MVC 4 app in action.
Integrating AngularJS and ASP.NET MVC 4
To include AngularJS in your ASP.NET MVC web app, download the AngularJS file and place it in the Scripts folder in your web app. Inside the BundleConfig.cs file include the angular js file too.
1 2 | bundles.Add(new ScriptBundle("~/bundles/angularjs").Include( "~/Scripts/angular.js")); |
Inside the _Layout.cshtml file include the AngularJS script as shown :
1 | @Scripts.Render("~/bundles/angularjs") |
Add one more file called app.js in the Scripts folder which would be the root file of our AngularJS application.
Here is how app.js would look like:
1 | var app = angular.module('EmployeeApp', []); |
Include the app.js file as reference in the _Layout.cshtml page.
1 | @Scripts.Render("~/bundles/app") |
Inside the _Layout.cshtml file add the ngApp directive to the HTML tag.
1 | ng-app="EmployeeApp" |
And that’s it, AngularJS has been successfully added to the MVC web app and ready to use.