4

アプリケーションとモジュールでグローバル AppController を使用しているインターネット開発者の間で、いくつかのチュートリアルとコード例が浮かんでいることに気付きました。

AngularJS でグローバル AppController を作成するのがベスト プラクティスですか?

次のような「グローバル」スコープでイベントを処理できるなど、いくつかの利点があります。

app.controller('AppController', function($scope, $rootScope, $route, $location){

    $rootScope.$on('$routeChangeStart', function(event, current, previous) {
        console.log('Do something...');
    });

    $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
        console.log('Do something...);
    });
});

このパターンには他に利点または欠点がありますか?

4

1 に答える 1

4

純粋に状況の文脈で。タイトル タグとページ ビューを動的に変更する例を見てみましょう。

.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
 $routeProvider.when('/', {
    template: '/views/home.html',
    title:'Home'
  });
  $locationProvider.html5Mode(true);
}]);

.controller('app', ['$scope','$route','$location',function($scope,$route,$location){
  $scope.$on("$routeChangeSuccess",function($currentRoute,$previousRoute ){
    $scope.title = $route.current.title;
    $scope.page = $route.current.template;
  });
}]);

これで、タイトルとページ ビューの両方が、アプリケーションをラップするアプリ レベル コントローラーを介して動的に読み込まれます。これは非常に便利です。

<html lang="en" ng-controller="app">
<head>
<title>{{title}}</title>
</head>
<body>
<ng-include src="page"></ng-include>
</body>
</html>

使用しない場合の例を次に示します。部分ページの 1 つが API からデータを返すとします。

<!-- search.html -->
<div ng-repeat="item in items">
{{item.title}}
</div>

アプリ レベルのコントローラーでは、ブロードキャスト経由でデータをプルしています。

$scope.$on('searchComplete',function(d){
  $scope.items = d
});

itemsただし、そのパーシャルは意図したとおりにデータを表示します。他の子パーシャルがスコープが上書きされている場所を使用すると、問題が発生する可能性があります。

<!-- other-search.html -->
<div ng-controller="OtherSearch" ng-click="search()">
<div ng-repeat="item in items">
{{item.title}}
</div>
</div>

このパーシャルでng-clickは、ユーザーのリクエストをガイドしています。そのため、アプリ レベルのコントローラーが既にitems親にバインドされている場合、ユーザーが のアクションをトリガーしなかった場合でも、このパーシャルに切り替えるとアイテムのリストが表示されますsearch()。

于 2013-07-22T14:10:15.833 に答える