web-dev-qa-db-ja.com

AngularJS：ngRouteを機能させる

NgRouteを使用する必要がある新しいAngularjs Webアプリケーションに取り組んでいます。私の場合、ルーティングがまったく機能しないため、最初は少し混乱しています。いつもindexとMainCtrlに行き着きます。

in index.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>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>

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);
  });

そしてもちろん、main.jsは次のようになります。

'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;
    });
});

さて、問題は奇妙で単純です：localhost：9000/loginを実行すると、login.htmlテンプレートとLoginCtrlに到達するはずですが、そうではありません。結局indexとMainCtrlになってしまい、結果に変化はないようです。

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

これはどこが間違っているのですか？

angularjsangularjs-routingngroute
8
Ashesh

まず、templateUrlは実際のパーシャルの相対パスを指している必要があります（例：templateUrl: 'partials/login.html'）。

次に、最初にhttp://localhost:9000/にアクセスし、次にhttp://localhost:9000/loginへのリンクをたどる必要があると思います

とにかく、パーシャルにはng-app宣言を含めないでください（実際にはパーシャルです）。したがって、ページのテンプレートを定義するindex.htmlと、2つのパーシャル：main.htmlとlogin.html、どちらでもないng-app宣言を含める必要があります。

このようなもので終わる：

  .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);
  });

Index.htmlはhttp://localhost:9000/からのページのランディングです

12
blint