javascript - otro - ¿Cuál es la diferencia entre una directiva ng-controller y un controlador en la ruta?
ng model ejemplo (5)
Trabajé en el tutorial en el sitio web de AngularJS y noté que en el paso 7 cambian la forma en que se introduce un controlador en la aplicación. Inicialmente, usan una directiva:
<body ng-controller="PhoneListCtrl">
...
</body>
Sin embargo, luego se cambia para usar un atributo de controller como parte de una ng-route .
$routeProvider.
when(''/phones'', {
templateUrl: ''partials/phone-list.html'',
controller: ''PhoneListCtrl''
}).
/* rest of routes here */
Aquí está el git diff donde se realiza el cambio. ¿Hay alguna diferencia entre estas dos técnicas?
Controlador que utiliza una directiva ng-controller :
- Se crea un nuevo $ scope en el elemento
ng-controller. - Conexión explícita de vista a controlador
- Visible con el elemento de inspección, etc.
Controlador en una ruta :
- Se crea un nuevo $ scope por ruta en el elemento
ng-view. - El controlador puede solicitar dependencias definidas en la resolución de ruta.
- Conexión opcional de vista al controlador. Se recomienda tener una convención de nomenclatura que asigne rutas a los controladores a las vistas.
En el primer caso, el controlador está directamente en la página.
Una vez que lo cambian, ese controlador solo está en la página si la ruta es /phones contrario, es algún otro controlador basado en alguna otra ruta.
Sí, el cambio es este:
si desea mostrar un controlador específico en la página, puede usar
<body ng-controller>
PERO
si desea hacer un enrutamiento (aplicación con más de un controlador), necesitará usar el enrutamiento + cambiar el cuerpo a:
<body ng-view></body>
Una de las características más conocidas de Angularjs son las aplicaciones de una sola página.
Si asigna el atributo ng-controller directamente en la página:
<body ng-controller="PhoneListCtrl">
...
</body>
no puede cambiar los controladores fácilmente para otras tareas.
Por lo tanto, usar la ruta para cambiar los controladores es uno de los pasos importantes para aprender la función de una página angular.
Puede tener el mismo diseño y un elemento diferente usando la directiva route y ng-view.
$routeProvider.
when(''/phones'', {
templateUrl: ''partials/phone-list.html'',
controller: ''PhoneListCtrl''
}).
when(''/tablets'', {
templateUrl: ''partials/tablet-list.html'',
controller: ''TabletListCtrl''
}).
Si ''/ teléfonos''
<div ng-view></div>
incluirá su plantilla ''partials / phone-list.html'' y establecerá ''PhoneListCtrl'' como controlador div
Lo mismo:
Si ''/ tabletas''
<div ng-view></div>
incluirá su plantilla ''partials / tablet-list.html'' y establecerá ''TabletListCtrl'' como controlador div
Esta es la diferencia entre dos.
ng-view es la causa de la diferencia. Realmente no puedes hacer esto
<div ng-view ng-controller="PhoneListCtrl">
Como necesitarías cambiar ese controlador a medida que cambiaba la ruta. Entonces, básicamente, el enrutador lo hace por usted y usa el controlador que especificó cuando definió sus rutas.
Probablemente puedas hacer esto:
<div ng-view>
y luego en tu plantilla:
<div ng-controller="PhoneListCtrl">
y omita la declaración del controlador en sus rutas. Lo que sospecho tendría esencialmente el mismo efecto, aunque nunca lo he intentado. Sin embargo, probablemente sea mejor ir con la convención aquí.