Routage avec AngularJs Asp.Net Mvc

Je suis en train de construire un SPA avec Asp.Net MVC. pour cela, je suis en utilisant angularJs de routage .
C'est ma hiérarchie du projet.
Routage avec AngularJs Asp.Net Mvc

Ma Mise En Page.cshtl code

<html lang="en" ng-app="ProjectTrackingModule">
 <head>
   <script src="~/Scripts/jquery-2.1.0.min.js"></script>
   <script src="~/Scripts/angular.min.js"></script>
   <script src="~/Scripts/angular-route.min.js"></script>
   <script src="~/Scripts/app.js"></script>
</head>
<body>
<a href="#Home">Home</a>
<a href="#Projects">Projects</a>
   <div ng‐view style="margin‐left: 10%; margin‐right: 10%;">
    </div>
//... footer
</body>
</html>

Mon app.Js le code est comme suit:

var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/Home", {
        templateUrl: "/Views/Home/Home.cshtml",
        controller:"HomeController"
    })
    .when("/Projects", {
        templateUrl: "/Views/ProjectManagement/ProjectDetails.cshtml",
    controller: "ProjectsController"
    })
    .otherwise({redirectTo:"/Home"})
});

Je veux charger mon la Maison.Cshtml vue partielle à l'intérieur de ng-view. Mais quand je lance mon application, Il n'en montrer que la Maison vue partielle.

aussi quand je clique sur le Projet, alors il devrait rendre ProjectDetails.cshtml à l'intérieur de ng-view.

code à l'intérieur de ProjectDetails.cshtml

<div ng-controller="ProjectsController">
    <h2>ProjectDetails</h2>
</div>
ne fait pas sens, ne pas comparer angulaire de routage avec mvc de routage 🙁
Comment utiliser le routage avec mvc. Je veux dire, quand je clique sur la Maison anchor link ensuite, elle doit démontrer la Maison vue partielle.
veuillez consulter les mises à jour question.
:--) je l'ai mise à jour de ma réponse

OriginalL'auteur Amit Kumar | 2015-04-27

  1. 4

    Je pense que vous avez quelques misonceptions sur Angularjs les concepts de routage.

    MVC de Routage :

    ASP.NET routage vous permet d'utiliser des Url qui n'ont pas de carte à des fichiers spécifiques à un site Web. Parce que l'URL n'ont pas de carte dans un fichier, vous pouvez utiliser des Url qui sont descriptives de l'action de l'utilisateur et sont donc plus facilement compréhensible par les utilisateurs.

    Angulaire De Routage :

    Angular.js routage à l'aide de framework MVC ne pas utiliser MVC de routage.

    Comparable pièces sont les suivantes:

    Model ===== ng-module 
controller ===== ng-controller
view ===== ng-view

    De sorte que vous ne pouvez pas appeler le Contrôleur MVC dans votre angularjs route config. Est-il logique?

    Aussi s'il vous plaît réfléchir sur les différences entre cshtml et html.

    Angulaire de routage et MVC de routage sont totalement différent parce que:

    • Angulaire de routage est d'utiliser côté client
    • MVC de routage est utilisé côté serveur

    Les textes ci-dessus sont pour votre compréhension.

    Je pense que cette discussion va vous aider à :

    Comment utiliser ASP.NET MVC et AngularJS de routage?

    Mise à jour :

    La href est mauvais dans la balise d'Ancrage.

    Sa doit être href="#/Home", pas href="#Home"

    De sorte s'il vous plaît changer votre code 

     <a href="#/Home">Home</a>
    <a href="#/Projects">Projects</a>
    J'ai changé mon code. mais rien ne se passe. lorsque je clique sur le Projet, il n'a pas de chargement ProjectDetails.cshtml

    OriginalL'auteur Ramesh Rajendran

  2. 2

    Permet de comprendre le routage angulaire au premier. disons que votre url, dit

    http://www.example.com/Home/Index -- il des points à votre MVC HomeController et Index ActionMethod. Maintenant, ce que mvc est le cas, il vous renvoie à la première Vue seulement.

    dire que vous avez un point d'ancrage de la Charge de la Nouvelle Vue. En cliquant sur ce aboutira à une nouvelle Url http://www.example.com/Home/Index#/angular-route. Cette url sera encore frappé de la même MVC HomeController et ActionMethod.
    Mais vous avez une voie supplémentaire dans angulaire 

    `var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);
 app.config(function ($routeProvider) {
    $routeProvider
        .when("/angular-route", {
        templateUrl: "/Html/GetHtml?type=angular-route",
        controller:"AngularController"
    })   
    .otherwise({redirectTo:"/Home"})
});`

    Ici dans la section de code templateUrl: "/Html/GetHtml?type=angulaire de l'itinéraire",

    Html est MVC Contrôleur et GetHtml est ActionMethod. Cette ActionMethod vous renvoie le nouveau point de vue que vous souhaitez en fonction de l'angle de la route, c'est pourquoi nous envoyant un paramètre type trop pour nous aider à décider.

    contrôleur:"AngularController" dit que angulaires va appeler son contrôleur une fois que la page est retourné à partir de, vous mvc contrôleur. C'est Angulaire du Contrôleur et il n'a rien à voir avec votre contrôleur MVC.

    vous déclarez angulaire contrôleur comme ceci: 

     app.controller('AngularController',function($scope){
        alert("my js controller is called");
    });

    Espère que cela vous aide à trouver une solution.

    OriginalL'auteur vishwajeet kumar

  3. 2

    Ont un simple exemple peut s'appliquer à votre projet. Exemple notre application MVC a quatre pages d'Accueil, Contact, à Propos de l'Utilisateur, nous voulons créer un angularjs modèle pour chaque pages, de sorte comment nous le faisons de routage? comment faire angularjs contrôleur?

    Code de base comme suit:

    De routage: 

        $routeProvider
    .when('/', { //For Home Page
        templateUrl: '/AngularTemplates/Home.html',
        controller: 'HomeController'
     })
    .when('/Home/Contact', { //For Contact page
        templateUrl: '/AngularTemplates/Contact.html',
        controller: 'ContactController'
    })
    .when('/Home/About', { //For About page
        templateUrl: '/AngularTemplates/About.html',
        controller: 'AboutController'
    })
    .when('/Home/User/:userid', { //For User page with userid parameter
       templateUrl: '/AngularTemplates/User.html',
       controller: 'UserController'
    })
    .otherwise({   //This is when any route not matched => error
       controller: 'ErrorController'
    })
}]);

    Contrôleur:

    var app = angular.module('MyApp'); app.controller('UserController', ['$scope', '$routeParams', function ($scope, $routeParams) {
$scope.Message = "This is User  Page with query string id value = " + $routeParams.userid;}]); ...

    Article complet avec code de téléchargement pour elle à Angularjs routage asp.net mvc exemple

    vous n'êtes pas de la création d' .cshtml. Mais dans mon cas, je l'ai .cshtml page . et Dans ce cas, AngularJs routage ne fonctionne pas .
    Dans mon exemple, pour avoir des Vues .cshtml et le modèle de vue de fichier html. Dans le fichier html j'en œuvre par angularjs. J'ai utilisé ng-view pour charger un modèle .cshtml. S'il vous plaît télécharger le code source de Github.
    Je vois que vous voulez templateUrl doit être .cshtml
    Vous ne pouvez pas utiliser le chemin à un .cshtml fichier dans votre modèle d'url de votre angulaire de la route. Voir stackoverflow.com/questions/25785579/...
    Cette réponse n'est pas du tout l'adresse de l'op question. Op dit clairement le désir d'utiliser cshtml, qui ne peut être fait avec cet exemple.

    OriginalL'auteur Lewis Hai

  4. 0

    Vous ne pouvez pas directement le point sur les .cshtml fichier, mais vous pouvez pointer vers un templateUrl qui pointe vers un MVC route.

    Vu que vous êtes en utilisant la valeur par défaut MVC itinéraire {controller}/{action}/{id?}, par exemple:

    var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/Home", {
        templateUrl: "/Home/Home", //points to an mvc route controller=Home, action=Home
        controller:"HomeController"
    })
    .otherwise({redirectTo:"/Home"})
});

    Mais pour que ça fonctionne MVC Action devrait être dans le contrôleur.

    public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Home()
    {
        return View();
    }
}

    également votre point d'ancrage tags points pour une mauvaise href, elle devrait avoir le hashbang (#) 

    <a href="/#/Home">Home</a>
<a href="/#/Projects">Projects</a>

    OriginalL'auteur Bon Macalindong

  5. 0

    Façon Simple de le faire serait comme suit:

    MyAngularApp.js

    var myAngularApp = angular.module('MyAngularApp', ['ngRoute']);
myAngularApp.config(function ($routeProvider) {
    $routeProvider
        .when("/myprojects", {
            templateUrl: "MyAspMvcCtrl/GetTemplate?id=myprojects",  
            controller:"MyAngularController"
        })
       ...
    .otherwise({redirectTo:"/myprojects"})
});

myAngularApp.controller("MyAngularController", function ($scope) {
    ...
    //Do something
    $scope.mydata = {
        id = 1234,
        msg = "Hello"
    };
});

    ASP.Net MVC Contrôleur

    public class MyAspMvcCtrlController : Controller
{
    [HttpGet]
    public ActionResult GetTemplate(string id)
    {
       switch (id.ToLower())
       {
           case "myprojects":
               return PartialView("~/Views/ProjectManagement/ProjectDetails.cshtml");
           default:
               throw new Exception("Unknown template request");
       }
    }
}

    Mise en page.cshtml

    <html ng-app="myAngularApp">
...
<body>
    ...
    <div ...>
        ...
        <a href="#/myprojects">My Projects</a>
        ...
    </div>

    <div ng-view></div>
    ...
</body>
</html>

    ProjectDetails.cshtml

    <div ...>
    <h3>ID: {{mydata.id}}</h3>
    <p>Message: {{mydata.msg}}</p>
</div>

    OriginalL'auteur ShaTin