0

Angular.jsを使用してコンテンツを表示する非常に単純な Web サイトがあります。2日前に学習を開始しましたが、公式のチュートリアルに従ってもまったく問題はありませんでした.

これは私のjsファイルです:

var Site = angular.module('Website', []);

Site.config(function ($routeProvider) {
  $routeProvider
    .when('/home',  {templateUrl: 'parts/home.html', controller: 'RouteController'})  
    .when('/who',   {templateUrl: 'parts/who.html', controller: 'RouteController'})
    .when('/what',  {templateUrl: 'parts/what.html', controller: 'RouteController'})
    .when('/where', {templateUrl: 'parts/where.html', controller: 'RouteController'})
    .otherwise({redirectTo: '/home'});
});

function AppController ($scope, $rootScope, $http) {
    // Set the slug for menu active class
    $scope.$on('routeLoaded', function (event, args) {
        console.log(args);
        $scope.slug = args.slug;
    });
}

function RouteController ($scope, $rootScope, $routeParams) {
    // Getting the slug from $routeParams
   var slug = $routeParams.slug; 
   var pages = {
      "home": {
        "title": "Samuele Mattiuzzo",
      },

      "who": {
        "title": "All you'll get, won't blog"
      },

      "what": {
       "title": "Shenanigans about this website"
      },

      "where": {
        "title": "Where can you find me on the net?"
      }
    };
    $scope.$emit('routeLoaded', {slug: slug});
    $scope.page = pages[slug];
}

ご覧のとおり、これは非常に単純で、ページ スラッグに基づいてページ タイトルを返すだけです。テンプレート (アプリを でロードする場所<body ng-controller="AppController">) では、<ng-view>ディレクティブ内で部分テンプレートの 1 つがロードされています (現在動作しており、静的コンテンツを表示しています) が、{{page.title}}.

ブラウザでBatarang有効にし、Web サイトをweb-server.jsでテストしていますが、Batarang には変数とスコープに問題があり、常に未定義を返すことを読んだので、そのconsole.logステートメントを追加しました。何を印刷しようとしても (引数、スラッグ、またはページ、明らかに js のさまざまな部分にあります)、常に未定義です。

ここで私は正確に何を間違っていますか? 皆さんありがとう

4

1 に答える 1

2

「サイト」に関連付けられているコントローラーはありません。

無料の機能をサイトに関連付けるように変更すれば、正しい方向に進むはずです。また、探している情報は $routeParams ではなく $location に含まれているため、コードを少し単純化できます。

Site.controller("RouteController", function($scope, $location) {
var slug = $location.path(); 
var pages = {
  "/home": {
    "title": "Samuele Mattiuzzo",
  },

  "/who": {
    "title": "All you'll get, won't blog"
  },

  "/what": {
   "title": "Shenanigans about this website"
  },

  "/where": {
    "title": "Where can you find me on the net?"
  }
};
$scope.page = pages[slug];
});

さらに、AppController では、RouteController から場所の変更を通知する代わりに、$routeChangeSuccess を監視できます。

Site.controller("AppController", function($rootScope) {
  $rootScope.$on("$routeChangeSuccess", function() { \\do something }
});
于 2013-04-15T13:21:57.357 に答える