0

私は非常に単純なデモ Angular アプリケーションを構築して、それが Backbone とどのように比較されるかを確認しています。

<select>要素が変更されるたびに/LHR、デモアプリのルートが更新されるようにしたいと思い/SFOます/#LHR。

また、ルーターがページの読み込み時に初期パスを処理し、オプションのデフォルト値を設定するようにしたいと思い<select>ます。

これが私の HTML です。テンプレートは 1 つしかありません。

<html ng-app="angularApp">
[...]
<body ng-controller="AppCtrl">
<select ng-model="airport" ng-options="item.value as item.name for item in airportOptions" ng-change='newAirport(airport)'></select>
<p>Current value: {{airport}}</p>
</body></html>

そして、ここに私のJSが完全にあります：

var angularApp = angular.module('angularApp', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/:airportID', {templateUrl: 'angular.html', controller: AppCtrl}).
      otherwise({redirectTo: '/'});
}]);
angularApp.controller('AppCtrl', function AppCtrl ($scope, $http, $routeParams) {

  $scope.airportOptions = [
      { name: 'London Heathrow', value: 'LHR' }, 
      { name: 'San Francisco International', value: 'SFO' }, 
      { name: 'Paris Charles de Gaulle', value: 'CDG' }
  ];

  $scope.airport = $scope.airportOptions[0].value; // Or the route if provided

  $scope.newAirport = function(newAirport) {
       console.log('newAirport', newAirport);
  };

});

ルートプロバイダーを正しく設定したかどうかはまったくわかりませんが、現在、Uncaught ReferenceError: AppCtrl is not defined from angularApp. 私は何を間違っていますか？

更新: AppCtrl を引用符で囲んで ReferenceError を修正しました。コメント者に感謝します。今私の問題は、$routeParamsに移動しようとすると空になること/#LHRです。ルートパラメータを取得するにはどうすればよいですか?

更新 2: ルートが機能するようになりました。私はそれを正しくやっていますか？

var angularApp = angular.module('angularApp', []);
angularApp.config(function($routeProvider, $locationProvider) {
  $routeProvider.
      when('/:airportID', {templateUrl: 'angular.html', controller: "AppCtrl"}).
      otherwise({redirectTo: '/'});
});


angularApp.controller('AppCtrl', function AppCtrl ($scope, $routeParams, $location) {

  $scope.airportOptions = [
      { name: 'London Heathrow', value: 'LHR' }, 
      { name: 'San Francisco International', value: 'SFO' }, 
      { name: 'Paris Charles de Gaulle', value: 'CDG' }
  ];

  var starting_scope = null;
  ($location.path()) ? starting_scope = $location.path().substr(1) : starting_scope = $scope.airportOptions[0].value;
  $scope.airport = starting_scope;

  $scope.newLeague = function(newLeague) {
       $location.path("/" + newLeague);
  }
4

0 に答える 0