为非单页应用程序创建带有angular.js的mvc-4应用程序的指南？

Question

First of all i am confuse for my project whether it can use angular.js or not, although i have started using it and i created some customization module with this but when i started applying it for all project i got stuck on many things.

My project is a order taking project and it has structure like this. In the index page it has 3 panels.

left panle that draws all categories middle panel that draws all category specific productes and right panel that draws all the basket items with calculations.

On product click there also appears a model that draws all the customization.

I am using MVC-4.

Every thing on index that includes some layout is a partial view _leftpanl, _middlePnl, _rightPnl, _customziaion.

My concern is. If i define the routes to the module i created how to fix on ng-view because per scope there will be one ng-view only. and my application load atleast 3 partial views to index page at the same time. So how would i fix on ng-view. Just gimme some guide lines that i should follow to create this kind of application with angular.js. Or it is not possible with angular because i think it is not a single page application.

Answer 1

Use the Angular-Breeze SPA template provided by the ASP.Net team http://www.asp.net/single-page-application/overview/templates/breezeangular-template

Don't mix up the Razor view/partials with Angular. Use ASP.Net MVC to manage only the REST interface and use AngularJS to embrace the presentation layer.

Learn the Angular Routing and Templates to mimic your requirements. https://egghead.io/lessons/angularjs-routeprovider-api https://egghead.io/lessons/angularjs-ng-view

Answer 2

It seems you have a problem to define what you really need.

AngularJS primary purpose is to do some Single Page Application. Which is, code only in HTML/CSS/JS in the front-end, and reuse your abilities in the back-end to produce DATA only (REST-json is the most classic but you can choose whatever you want).

So if you use a tool outside its primary purpose, you have to do some compromises : Of course you can mix backend template with AngularJS, but in this case, you can forget the router and ng-view.

Use AngularJS if you think you have some complex web interface. If it is only some static text, or even a few input forms here and there you don't necesseraly have to AngularJS, you can just use your classic server-side display rendering.

Answer 3

You could use ng-include to include each of your three partials into one view. Then in each partial view you can specify the controller with ng-controller . For creating the modal popup I would probably use ui bootstrap's modal

Alternatively you could use ui-router to create multiple parallel views .

Answer 4

I have following guidelines here which i hope will help you.

1. Do not mix Server Side MVC and Client Side MVC. AngularJS is primarly meant to augment the HTML and browser capability. The two-way binding of angularjs is excellent and provides lots of dynamic behavior. MVC4 scores best when we have to do lot of server side processing using the .Net platform capabilities.

2. But as you spent some good effort on this project and the corresponding technologies, there is a way out. Convert all your Controlller Actions in MVC4 to produce JsonResult and when the angularjs needs data use that, eg in $http.get( .