Angulaire ngRoute ne peut pas obtenir la vue

Je suis en train d'utiliser Angulaire du mécanisme de routage dans une application, cependant en cliquant sur l'élément qui devrait faire le routage que je suis un ne peut pas OBTENIR de nomvue, où viewName est à tout point de vue.

C'est mon app.js fichier de script:

var app = angular.module('actsapp', ['ngRoute']);

//Define Routing for app
app.config(['$routeProvider',
   function($routeProvider) {
      $routeProvider
      .when('/', {
            templateUrl: 'views/student_list.html',
            controller: 'StudentListController'
      })
      .when('/Students', {
            templateUrl: 'views/student_list.html',
            controller: 'StudentListController'
      })
      .when('/RegisterStudent', {
            templateUrl: 'views/register_student.html',
            controller: 'StudentRegistrationController'
       });
  }]);

 app.controller('StudentListController', function($scope) {    
    $scope.message = 'This is student list screen';
 });


app.controller('StudentRegistrationController', function($scope) {
    $scope.message = 'This is student registration screen'; 
});

et c'est mon index.html:

<!DOCTYPE html>
<html ng-app="actsapp">

<head>
    <title></title>
    <link href="style/style.css" rel="stylesheet" />
    <link href="style/bootstrap.css" rel="stylesheet" />

    <script src="scripts/jquery-1.js"></script>
    <script src="scripts/angular/angular.js"></script>
    <script src="scripts/angular/angular-route.js"></script>
    <script src="scripts/angular/app.js"></script>
</head>

<body>
<div class="header">
    <div class="heading_wrap">
        <h1>Student Registration Form</h1>
    </div>
</div>
<div class="nav-wrap">
    <ul class="nav nav-acts-pills nav-stacked ">
        <li class="active">
            <a href="/Students">Student List</a>
        </li>
        <li>
            <a href="/RegisterStudent">Add Student</a>
        </li>
        <li>
            <a>Add Students (By School)</a>
        </li>
    </ul>
</div>

<div ng-view="" class="content-wrap" style="float:left;">
</div>
</body>

</html>

Des suggestions sur la façon de résoudre ce problème sont beaucoup plus que bienvenue. J'ai basé mon travail sur la version la plus récente de la ngRoute de la documentation. Merci.

Votre code semble être de droite. Le système qui êtes-vous sur? Ne Angulaire au moins trouver le contrôleur?

OriginalL'auteur Alan Grixti | 2014-10-17

Vous devez ajouter le # comme ci-dessous pour travailler le routage:

<li class="active">
    <a href="#/Students">Student List</a>    //add #
</li>
<li>
    <a href="#/RegisterStudent">Add Student</a>    //add #
</li>

Et dans le .fichier js, templateUrl devrait être comme: /views/student_list.html.

Toutefois, si vous avez besoin d'itinéraires sans #, vous devez ajouter $locationProvider.html5Mode(true);. Vérifiez l'exemple ici pour savoir comment éviter à l'aide de #. Aussi, voir cette. La démo est dit que:

app.config(['$routeProvider',
   function($routeProvider,$locationProvider) {
  $routeProvider
      .when('/', {
        templateUrl: '/views/student_list.html',   //urls should be like this
        controller: 'StudentListController'
      })
      .when('/Students', {
        templateUrl: '/views/student_list.html',  //urls should be like this
        controller: 'StudentListController'
      })
      .when('/RegisterStudent', {
        templateUrl: '/views/register_student.html',     //urls should be like this
        controller: 'StudentRegistrationController'
       });
       $locationProvider.html5Mode(true);
  }]);    ]

Dans la vue :

    <li class="active">
        <a href="/Students">Student List</a>
    </li>
    <li>
        <a href="/RegisterStudent">Add Student</a>
    </li>

J'ai suivi l'exemple et a modifié les changements, cependant, je reçois un " Ne peut pas OBTENIR /Élèves message à chaque fois que je clique sur le href de l'élément. Tous les conseils sont appréciés 🙂
oh u besoin de modèle d'url comme ceci /views/student_list.html je l mise à jour de la réponse
En fait ce n'était pas la question, l' $locationProvider dans l'app.config était en rupture avec le module angulaire
a u ajouter le $locationProvider dans l'application.fonction config
Re-il ajouté. Pour quelque étrange raison, il était en rupture avec le code. Je ne pouvais pas comprendre pourquoi.

OriginalL'auteur K.Toress

2

J'ai également le même problème. Ayant travaillé pendant des heures, j'ai finalement obtenu il a travaillé.

AngularJS est conçu sur le concept de SPA (single page application). De sorte que tous les points de vue doivent être construites autour de la principale index.html associé à la ng-app. Note: j'ai essayé de le contourner par la création de deux noms différents de ng-app, de sorte que, lorsque je href aux B.html qui peut alors charger ng-app="B", alors qu'en laissant index.html avec ng-app="A" derrière. Il n'a pas de travail--Angulaire toujours à la recherche de "A"--avec une exception.

Donc la manière de la conception de votre index.html c'est que soit vous conservez une "commune" de base à la partie sur haut ou en bas de
```
<ng-view></ng-view>
```
où le "autrement" dans le service de routage est d'aller à la place de la valeur par défaut en mode html--c'est à dire, de votre point de départ le contenu de index.html ou, vous placez l'ensemble du contenu dans une vue séparée fichier à charger dans le index.html, comme mon code ici:
```
<body ng-app="YouTiming">
    <div ng-controller="Main">
        <ng-view></ng-view>
    </div>
</body> 
```
La vue par défaut, main_view.html, aura le contenu de la "Principale" du contrôleur. Ici, c'est le routeur:
```
angular.module("YouTiming", ["customFilter", "ngRoute"])
.config(function ($routeProvider) {
    $routeProvider
    .when("/archive", {
        templateUrl: "/view/archive.html"
    })
    .when("/edit-portfolio", {
        templateUrl: "/view/edit-portfolio.html"
    })
    .otherwise({
        templateUrl: "/view/main_view.html"
    });
});
```
Puis, dans le main_view.html, j'ai href:
```
<a ng-href="#/archive">Archive</a>
```
Notez que le '#' est-à-dire AngularJS que je veux placer "/view/archive.html" retour à l'origine d'un SPA où il sait jusqu'à présent (car il n'est qu'un ng-app). Sans le"#", vous obtiendrez la même erreur: Cannot GET /archive

Dans archive.html:
```
<div>
    <div class="col-sm-6">
        123
    </div>
    <div class="col-sm-6">
        456
    </div>
</div>
```
Le résultat final:
```
123                456
```
La prochaine question est que comment voulez-vous changer le focus de vue parmi plusieurs vues de la même SPA. C'est la prochaine question que je vais aborder, mais je pense que vous pouvez configurer quelque chose dans $champ d'application pour passer de la vue en utilisant ng-show ou ng-hide. Si quelqu'un a une meilleure suggestion, veuillez en informer, merci!

OriginalL'auteur Daniel C. Deng

Vous devez vous connecter pour publier un commentaire.