Angular is a superb resource, however it took me a few time to identify a method to combine it elegantly along with ASP.NET MVC. This is essentially how I made it happen. First, you must build a new ASP.NET MVC app. Next step, install the Angular package through NuGet. Now for the customization.
The goal is to make use of the normal ASP. NET MVC navigation, unless for certain URLs, when we will permit Angular get over. So, http://www.yourdomain.com/Account/Login could be managed by ASP. NET (" ASP.NET-mode "), however http://www.yourdomain.com/#/Customers could be dealt with by Angular (" Angular-mode "). In fact, it is ASP.NET serving us the Customers page, however after that, we wish to use Angular for data-binding, navigation, routing, the forms, and so on.
Add a new Controller along with one method, Index (), which returns View (). Standard ASP. NET up till currently. I named mine AngularController.Next, add a View inside the corresponding folder (in my case :/Angular/Index. cshtml). During this view, found out your primary Angular view. Some thing such as:
@{
ViewBag.Title = "Index";
}
<div ng-app="app">
<div ng-controller="main as vm">
<div ng-view class="shuffle-animation"></div>
</div>
</div>
@section scripts {
@Scripts.Render("~/bundles/angular")
}
Now, when I am in "Angular-mode", I want my ASP.NET MVC include with Angular scripts. The Angular bundle looks something such as: (in /App_Start/BundleConfig.cs):
bundles.Add(new Bundle("~/bundles/angular").Include(
"~/Scripts/angular.js",
"~/Scripts/angular-animate.js",
"~/Scripts/angular-route.js",
"~/Scripts/angular-sanitize.js",
"~/Scripts/app/app.js",
"~/Scripts/app/config.js",
"~/Scripts/app/main.js",
"~/Scripts/app/customers/customers.js"));
The explanation I am not using a ScriptBundle is because we don't need ASP.NET to minify the Angular scripts. This leads to errors as a result of Angular generally depends on function arguments being certain strings.
In the meantime, minification is not necessary, however inside a production-environment, you'd need to make use of the minified Angular scripts. In app.js, config. js and main. js, I have place the required code to obtain Angular running. The most significant component is the getRoutes function in config.js :
function getRoutes() {
return [
{
url: '/customers',
templateUrl: '/Scripts/app/customers/customers.html'
}
];
}
Finally, the customers.html and customers.js include my Angular logic and HTML markup for that particular page. This currently lets you navigate to http://localhost:1578/Angular/#/ (your portnumber may differ of course).
There you've it. ASP.NET MVC is serving the HTML page which contains references to Angular scripts and templates, the browser downloads everything, after which Angular wires all of it along (In fact, you may wish to configure ASP. NET to make use of a totally different URL to the AngularController)
Adding the following code with your navigation is as easy as adding this tag within your _Layout. cshtml file:
<li><a href="https://www.blogger.com/Angular/#/customers">Customers</a></li>
Do not forget the hash. Next, lets add a second page. This'll build the distinction in among what I have been calling " ASP. NET-mode " and " Angular-mode " more clear. Add a new html file and also a new javascript file onto the/Scripts/app/customers/folder, add the route to config. js and add the javascript file in the Angular bundle in BundleConfig. cs. The link inside my case might currently be :
<a href="https://www.blogger.com/Angular/#/customers/create">Create new customer</a>
Next step, whenever you operate the app, navigating from/Angular/#/customers to, say,/Account/Login can load the complete new page. However navigating from/Angular/#/customers to/Anguler/#/customers/create stays inside Angular, and merely loads the new template, " staying within " your SPA. You are able to sort of notice as a result of loading a new page " within " the SPA feels faster. So, we have effectively combined ASP. NET MVC along with Angular.js, allowing us to select where we want/need that.