web-dev-qa-db-fra.com

AngularJS: faire fonctionner ngRoute

Je travaille sur une nouvelle webapp Angularjs où je dois utiliser ngRoute. Je suis un peu confus d'abord, car le routage ne fonctionne pas du tout dans mon cas - je finis toujours par index et MainCtrl.

in index.html J'ai inclus toutes les dépendances comme ceci:

<body ng-app="orderyourselfApp">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="container" ng-controller="LoginCtrl">{{hello}}</div>Soem random stuff

    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- build:js(app) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/navbar.js"></script>
        <!-- endbuild -->
</body>

Et j'ai les itinéraires configurés dans app.js

'use strict';

angular.module('orderyourselfApp', [
  'ngResource',
  'ngRoute'
])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'partials/main',
        controller: 'MainCtrl'
      })
      .when('/login', {
        templateUrl: 'login',
        controller: 'LoginCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });

    $locationProvider.html5Mode(true);
  });

Et bien sûr, main.js ressemble à ceci:

'use strict';

angular.module('orderyourselfApp')

.controller('LoginCtrl', function ($scope, $http) {
    console.log('saysomething');
    $scope.hello = 'Hello world! LoginCtrl';
})

.controller('MainCtrl', function ($scope, $http) {
    console.log('shit is getting real');
    $http.get('/api/awesomeThings').success(function(awesomeThings) {
        $scope.awesomeThings = awesomeThings;
    });
});

Maintenant, le problème est étrange et simple: quand je fais un localhost: 9000/login, je devrais accéder au modèle login.html et LoginCtrl, mais non. Je finis toujours par index et MainCtrl et rien ne semble changer le résultat.

login.html

  <body ng-app="orderyourselfApp">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="container" ng-controller="LoginCtrl">{{hello}}</div> … then the usual stuff

Où est-ce que ça va mal?

angularjsangularjs-routingngroute
8
Ashesh

Tout d'abord, templateUrl doit pointer vers le chemin relatif de votre partiel réel, par exemple: templateUrl: 'partials/login.html'.

Ensuite, je pense que vous devriez d'abord atterrir sur http://localhost:9000/ puis suivez un lien vers http://localhost:9000/login

Quoi qu'il en soit, vos partiels ne doivent pas contenir le ng-app déclaration (elles sont en fait partielles). Vous devriez donc avoir un index.html qui définirait le modèle de votre page et deux partiels: main.html et login.html, ( ni dont devrait contenir le ng-app déclaration.

Se terminant par quelque chose comme ça:

  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'partials/main.html',
        controller: 'MainCtrl'
      })
      .when('/login', {
        templateUrl: 'partials/login.html',
        controller: 'LoginCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });

    $locationProvider.html5Mode(true);
  });

Avec index.html étant l'atterrissage de la page à partir de http://localhost:9000/

12
blint