Thursday 15 January 2015

javascript - How to load templates from views folder with angularjs and asp.net MVC4 -


Apparently I'm very new to angularJS and asp.net mVC4. Here's the scenario:

I have a simple MVC4 project that has 1 controller and 1 view (i.e .: home.cshtml). Now I have added the HTML file (i.e.: search) to a folder named "Templates" located on the main directory of the project (outside the view folder). What do I need "search.html" to load with angular JS so that I can include it in "home.ctml", how can I do this? Here's what I've got so far:

Angular Module: (located in the Scripts folder)

  var bfapp = angular.module ( "Blogfinder", []). Config (function ($ route provider) {$ routeProvider.when ('/ search', {templateURL: '/ Templates / search.html', Controller: 'SearchController'}); $ route provider otherwise ({redirectirect redirect: '/ search '});}); Bfapp.controller ('SearchController', function () {});   

Hope this is clear for you. Any help would be appreciated! Thanks ..

It took me a while to figure out how to work with asp.net mvc Doing - this is not 100% in the way you did it, but you may want to reconsider this approach (it is not very different anyway)

  var AccountApp = angular.module ( "AccountApp", ['$ Strap.directives', 'ngResource', 'ngGrid', 'filepeakers']). When ('/', {Administrator: EditCtrl, templateUrl: 'Templates / Account / List'}) when ('/', {Controller: List Ctrl, Template URL: Account / Edit '}). Otherwise ({redirectTo: '/'});});   

OK, note that I'm calling templates / accounts / lists.

My route config. How to

  routes.MapRoute (name: "template", url: "template / {controller} / {template}", default: new { Action = "template"});   

Now in each controller, I have this related task that directs the call to the appropriate partial view:

  public function template (string template) {Switch (Template.ToLower ()) {case "list": Back partial view ("~ / scene / account / partial / list.cshtml"); Case "Create": Back partial view ("~ / scene / account / partial / create.cshtml"); Case "edit": back partial view ("~ / scene / account / partial / editing.cshtml"); Case "detail": back partial view ("~ / / scene / account / partial / detail.cshtml"); Default: New exception throw ("template is not known"); }}   

It all starts with an index () verb in the controller.

  Public Performance Index () {return View (); }   

By keeping it together, my directory structure looks like this.

  / view / account / partial list.cshtml Create.cshtml edit.cshtml Detail .cshtml Index.cshtml   

I am biased because this is my viewpoint But I think that it makes things simple and well organized. In index.cshtml, ng-view and other parts of the application are partly included in partial scenes that were loaded through the template action Go. Hope it helps.

No comments:

Post a Comment