В чем разница между директивой ng-controller и контроллером на маршруте?

Я работал над учебником на веб-сайте AngularJS, и я заметил, что на шаге 7 они измените, как контроллер вводится в приложение. Первоначально они используют директиву:

<body ng-controller="PhoneListCtrl">
...
</body>

Однако позже он будет изменен, чтобы использовать атрибут controller как часть ng-route.

$routeProvider.
    when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
    }). 
    /* rest of routes here */

Здесь git diff, где сделано изменение. Есть ли разница между этими двумя методами?

Ответы

Ответ 1

Контроллер с помощью директивы ng-controller:

  • В элементе ng-controller создается новая $scope.
  • Явное соединение "просмотр-контроль"
  • Видимый элемент проверки и т.д.

Контроллер в маршруте:

  • Новая новая область $создается по маршруту в элементе ng-view.
  • Контроллер может запрашивать зависимости, определенные в разрешении маршрута.
  • Дополнительное соединение "просмотр-контроль". Рекомендуется иметь соглашение об именах, которое отображает маршруты к контроллерам в представления.

Ответ 2

ng-view является причиной разницы. Вы действительно не можете это сделать

<div ng-view ng-controller="PhoneListCtrl">

Как вам нужно будет изменить этот контроллер по мере изменения маршрута. Таким образом, маршрутизатор делает это для вас и использует контроллер, указанный вами при определении маршрутов.

Вы, вероятно, можете это сделать:

<div ng-view>

а затем в вашем шаблоне:

<div ng-controller="PhoneListCtrl">

и оставьте объявление контроллера в ваших маршрутах. То, что я подозреваю, будет иметь по существу тот же эффект, хотя я никогда не пробовал это. Наверное, лучше пойти с конвенцией здесь.

Ответ 3

В первом случае контроллер напрямую на странице.

Как только они меняют его, этот контроллер находится только на странице, если маршрут /phones, иначе это какой-то другой контроллер, основанный на каком-то другом маршруте.

Ответ 4

Одна из известных особенностей Angularjs - одностраничные приложения.

Если вы назначаете атрибут ng-controller непосредственно на странице:

<body ng-controller="PhoneListCtrl">
...
</body>

вы не можете легко переключать контроллеры для других задач.

Таким образом, использование маршрута для переключения контроллеров является одним из важных шагов в обучении Angular функции Single-page.

Вы можете иметь один и тот же макет и один другой элемент, используя директиву route и ng-view.

$routeProvider.
    when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
    }).
    when('/tablets', { 
        templateUrl: 'partials/tablet-list.html',
        controller: 'TabletListCtrl'
    }).

Если '/phones'

<div ng-view></div>

будет включен ваш шаблон "partials/phone-list.html" и установите "PhoneListCtrl" в качестве контроллера div

То же самое:

Если '/tablets'

<div ng-view></div>

будет включать ваш шаблон "partials/tablet-list.html" и установите "TabletListCtrl" в качестве контроллера div

В этом разница между двумя.

Ответ 5

Да - это изменение:

если вы хотите отобразить конкретный контроллер на странице, вы можете использовать

<body ng-controller>

НО

если вы хотите выполнить маршрутизацию (приложение с несколькими контроллерами) - вам нужно будет использовать маршрутизацию + изменить тело на:

<body ng-view></body>