How to create project asp.net with angukarJS part1?

1- Open Visual Studio

2- Go go File -> new -> project -> web -> ASP.NET MVC 4 web application -> Add project name -> select basic -> view engine select Razor

3- Go to download Angular JS (https://code.anguarjs.org)
-> dowload file Angular.js
-> download file angular.min.js
-> download file angular.route.js
-> download file angular.route.min.js

4- Add library to project

5- Add bundle for render AngularJS library file in the view

code here :

using System.Web;
using System.Web.Optimization;

namespace ANGjs
{
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.js",
"~/Scripts/angular-route.js"
));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));

// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
}
}
6- Modified _layOout.cshtml page for support AngularJS

7- Create one JS file (MyJs.js)

8- include js file (MyJS.js) to _layout.cshtml

code here :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body ng-app="MyJs" >
@RenderBody()

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/angular")
<script src="~/Scripts/MyJs.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>

9- include code to JS file (MyJS.js)

code here:

(function () {

var app = angular.module('MyJs', ['ngRoute']);

app.controller('HomeController', function ($scope) {

$scope.Message = "This this project test demo asp.net mvc with angularJS. post on youtube and www.xzondev.com";

});

})();

10- Add new controller (HomeController)

coder her :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ANGjs.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/

public ActionResult Index()
{
return View();
}

}
}

11- Add new action into controller for Get view