Erreur 404 avec le routage Angularjs TemplateUrl

Je suis ce tutorielen essayant d'avoir un SPA à l'intérieur de mon MVC3 application lorsque le SPA est appelé par un contrôleur, DemoController.cs.

J'obtiens des erreurs 404 lorsque l'application tente de charger les différents Modèles, (about.html, contact.html et home.html) par l'intermédiaire d'une barre de navigation.

C'est ma structure de répertoire (pas y compris le reste de la MVC3 app):

Scripts
-script.js 
Views
-Demo
--pages
---about.html
---contact.html
---home.html
--Index.cshtml
--_ViewStart.cshtml

C'est mon script.js fichier où j'définir les itinéraires.

//create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', []);

//configure our routes
scotchApp.config(function ($routeProvider) {
$routeProvider

    //route for the home page
    .when('/', {
        templateUrl: 'pages/home.html',
        controller: 'mainController'
    })

    //route for the about page
    .when('/about', {
        templateUrl: 'pages/about.html',
        controller: 'aboutController'
    })

    //route for the contact page
    .when('/contact', {
        templateUrl: 'pages/contact.html',
        controller: 'contactController'
    });
});

//create the controller and inject Angular's $scope
scotchApp.controller('mainController', function ($scope) {
    //create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

scotchApp.controller('aboutController', function ($scope) {
    $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function ($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

C'est mon index.html code:

    <div ng-app="scotchApp">
    <!-- HEADER AND NAVBAR -->
    <div ng-controller="mainController">
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">Angular Routing Example</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i>Home</a></li>
                    <li><a href="#about"><i class="fa fa-shield"></i>About</a></li>
                    <li><a href="#contact"><i class="fa fa-comment"></i>Contact</a></li>
                </ul>
            </div>
        </nav>

        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main">
            <!-- angular templating -->
            <!-- this is where content will be injected -->
            <div ng-view></div>
        </div>
    </div>
</div>

source d'informationauteur schumacherj | 2013-12-01

13

Avec l'aide du Groupe Google pour AngularJS, que je recommande fortement à tout le monde qui a besoin d'angularjs aider, je sais maintenant ce qui s'est passé et comment mieux résoudre ces types de problèmes.

Voici les conseils que j'ai reçu de l'un de ses membres:

Je ne peux pas dire ce qu'est la question spécifiquement dans votre situation, mais dans
générale de la façon de le résoudre est de vérifier les points suivants:

Le serveur est configuré pour renvoyer les modèles statiques en html?
Vérifier cela par la construction d'une url à la main et de le charger directement
avec un navigateur (n'impliquant pas angulaire). Vous devriez être en mesure de
voir la page html statique. C'est un pré-requis pour autre chose
de travail. Si cela ne fonctionne pas, alors le problème est de configurer correctement
.NET et côté serveur de routage.

Si vous pouvez obtenir la première étape pour
travail, puis démarrez votre angulaire de l'application et ouvrir l'onglet réseau de votre
navigateur le développement de l'outil. Si vous voyez 404 demandes notez l'URL. Comment
est-il différent du travail de l'URL que vous avez utilisé ci-dessus?

Si l'URL est
différent, modifier la templateUrl paramètre en conséquence, de sorte qu'il
correspond à l'URL correcte. Si vous rencontrez toujours des problèmes, de poster un
exemple de travail de l'URL et un exemple de ce que l'URL, le navigateur est
demandant quand il fait une erreur 404.

Combinez cela avec le fait que je n'étais pas en mesure de tirer vers le haut les modèles avec une url statique, j'ai trouvé un autre DONC, la question qui est directement résolu ce problème. Comment vous faire une demande statique .html fichiers dans ~/dossier Vues dans ASP.NET MVC?

Réponse à ma question:

J'ai donc créé un ~/Static dossier à la maison tous mes modèles, et maintenant, mon angulaire application fonctionne parfaitement, parce que quand je demande un avec je peux lui donner une url directe pour obtenir à partir de.
3

Je pense que vous pouvez le fixer dans 2 façons:

méthode 1: ajouter un dièse comme ceci: <a href="#/about">

méthode 2: ou utiliser html5Mode par la mise en [$locationProvider][1].html5Mode(true);

comme ceci:
```
.config(function ($routeProvider, $locationProvider) {

    $locationProvider.html5Mode(true);
    $routeProvider
      .when('/', {...
```
0

Pour les futurs disciples, vous devez servir tous les points de vue de répertoire public, où vous définissez dans express.static.
Ou, vous pouvez utiliser require() avec transformer html2js-browserify dans browserify, ou raw chargeur dans webpack, je sais que le post est obsolète:)

Vous devez vous connecter pour publier un commentaire.