We recently released Visual Studio 2010\2012 project template to support integrating of AngularJS with ASP.Net MVC 4. This post outlines what exactly happens underneath the hood. How can we make AngularJS and MVC play nicely with with each other. The approach that we highlight here has been packaged into a project template and released to community to minimized the effort required to setup AngularJS for the first time.
For a typical ASP.Net MVC \ WebAPI setup the information flow can be described by the following diagram
As you can see in the diagram the basic infrastructure on the server remains the same, but things change on client. Since AnuglarJS is a Single Page Application (SPA) framework it brings with it a host of functionality that helps in providing a true SPA experience to user.
In a typical MVC application you load a view, perform some operation and navigate to another view. This is done by making standard http calls to server to load html and related content, typically a full page refresh.
In an AngularJS things are a little different, after a initial view is loaded there is never a page refresh. Some content area is marked within the html where views are swapped when navigation occurs.
Thing to keep in mind is that AngularJS is not a typical javascript library which once declared under script tag is ready to be used. It is a full blown SPA framework and hence requires some amount of configuration and structuring of the server artifacts so that ASP.Net MVC and AngularJS can play well together.
Setup
Before we can start setting up server infrastructure it is important to understand how AngularJS routing works.
AngularJS Routing
Once AngularJS is in place it intercepts all the url navigation requests (
<a> tags) and stops the browser form full page refresh. How it happens is- It starts with user navigating to the app home(such as http://localhost/home). This is a standard HTML request which gets data from a server view.
- The browser then loads the necessary html and scripts and sets up the AngularJS configuration.
- AngularJS navigation ($location service) kicks in and hence forth the only requests that are send are to load partial views into a specific page section (
ng-vieworng-include).
Keeping this in mind we start setting up the view.
Setting up Views
AngularJS has it own view engine (templating engine) therefore we can have either use standard HTML files or razor views to return html content to browser. With standard html files we do not get the goodies that come part of dynamic views (
cshtml, vbhtml), where you can generate view content using server side model and html helpers and we have the complete request context to play with.
This post details setting up views using razor views.
Master Page (_layout.cshtml)
To start with a typical masterpage html looks like this when integrated with AnuglarJS
Notice the
ng-app declation was done on body tag and we also declared a RootController on the body. AngularJS bootstraps the framework once it sees the ng-app declaration.
The next step then is to setup the container HTML for the home page (it fills the
@RenderBody()area)Container HTML View (home/index.cshtml)
A typical container view could be as simple as this
<div data-ng-view=""></div>
The
ng-view declaration here is a AngularJS directive which complement the $route service (which internally is dependent on $location service) by including the rendered template of the current route into the main layout (index.cshtml) file.
This div now acts as a container for other partial views to load into. Whenever route (url) changes content in this div is replace by partials loaded from server.
Other Partial Views
These are standard ASP.Net MVC partial views which do not declare any master page templates.
Since the request made for these partials are not full page request only partial html fragments are required.
This is the standard setup for view. The next part is routing
Routing Setup
Routing setup in AngularJS is done at the config stage using
$routeProvider. The following diagram shows how route in AngularJS is mapped to partial views
If your read the section AngularJS routing, this would immediately start to make sense. On browser url change, the framework requests the partials that has been configured in $routeProvider. For example
Browser Url : http://localhost/#/demoPartial requested : http://localhost/home/demo
Now you can understand how the AngularJS and MVC routing plays along each other nicely.
The last step here is to setup the scripts file for AnglarJS app development.
AngularJS App Scripts
The building blocks for AngularJS are controllers, directives, filters and services. Some conventions that can help us organize our application code in AngularJS are.
- Create one file each for common directives, filters and services
- Create one file for each of the partial view, which would contain controllers specific to the view
- Create a app.js file which is used to configure common AngularJS settings and bootstrap the application
The final organization looks something like this
These script files then can be minified and bundled with the ASP.Net MVC bundler framework so one gets best of both world. Easy to debug and maintain during development and as performant when deployed to production.
Conclusion
As you can see, setting up AngularJS require some effort and this is the place where the project template \ starter kit we have created can help fill the gap. Hope this post helped everyone understand how thing work when we add a framework like AngularJS on top a a server framework ASP.Net MVC.
This comment has been removed by the author.
ReplyDeleteTHANK YOU SHARING the Information keep Rocking AngularJS Online Course Bangalore
ReplyDelete