0

我正在构建一个非常简单的演示 Angular 应用程序，以查看它与 Backbone 的比较，虽然我已经阅读了路由教程，但我在路由方面遇到了困难。

我希望我的演示应用程序中的路由在<select>元素更改时更新，/LHR或者/SFO无论选择的新值是什么（并且可能/#LHR在没有历史 API 的浏览器中等）。

我还希望路由器在页面加载时处理初始路径，并设置<select>选项的默认值。

这是我的 HTML - 我只有一个模板：

<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：让路线正常运行 - 虽然感觉有点 hacky。我做对了吗？

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