angularjs - ejemplos - Comprender los parámetros del controlador Angular.js

angularjs material

Question

Estoy empezando a aprender Angular.js y he estado buscando en project.js en el ejemplo "Wire up a backend" en la página de inicio de Angular .

Estoy confundido acerca de los parámetros en las funciones del controlador:

function ListCtrl($scope, Projects) {
...
}
function CreateCtrl($scope, $location, $timeout, Projects) {
...
}
function EditCtrl($scope, $location, $routeParams, angularFire, fbURL) {
angularFire(fbURL + $routeParams.projectId, $scope, ''remote'', {}).
then(function() {
...
});
}

Estas funciones del controlador se llaman en el routeProvider, pero no se da ninguno de los parámetros.

$routeProvider.
when(''/'', {controller:ListCtrl, templateUrl:''list.html''}).
when(''/edit/:projectId'', {controller:EditCtrl, templateUrl:''detail.html''}).
when(''/new'', {controller:CreateCtrl, templateUrl:''detail.html''}).
otherwise({redirectTo:''/''});
});

Lo único que pude encontrar hasta ahora que posiblemente explica lo que está sucediendo es "Inyectar servicios en controladores" , que explica $location , $timeout , pero no los parámetros método angularFire y fbURL .

Mis preguntas específicas son:

1. ¿Cuáles pueden ser los parámetros del controlador?

2. ¿Dónde se llaman las funciones del controlador con sus parámetros? O los parámetros no son llamados, pero son solo cosas asociadas con el controlador donde ocurre la asociación con mucha magia Angular.js (si es así, ¿puedo ver el código fuente en github)?

3. ¿Dónde se define angularFire ?

4. ¿Cómo se relaciona el fbURL en el parámetro con:

   angular.module(''project'', [''firebase'']).
   value(''fbURL'', ''https://angularjs-projects.firebaseio.com/'').
   factory ...

5. ¿Hay algún lugar donde pueda ver todos los servicios, por ejemplo, $location y $timeout , que proporciona Angular.js? (Traté de encontrar la lista pero fallado)

Answer 1

¿Dónde se llaman las funciones del controlador con sus parámetros?

Las funciones del controlador se instancian con la directiva ngController o si ha mencionado el controlador durante la creación de la ruta usando $routeProvider . AngularJS hace esto para usted e inyecta los parámetros que ha definido en su controlador usando DI .

El DI funciona haciendo coincidir los nombres (o algunas veces el orden) de los parámetros. Entonces $scope obtendría el alcance actual, $http obtendría el servicio http

Answer 2

Primero fue un gran trabajo elegir este marco. Es lo mejor. Las variables que ve con el signo $ se inyectan y forman parte del marco estándar. Estos servicios harán tu vida mucho más fácil. La mejor manera de pensar en los controladores es que son hojas de secuencias de comandos. Ellos ayudan a separar el código. No pienses en ellos como métodos. Esas variables que ve, como $ timeout y $ scope son servicios que serán útiles ya que necesita hacer ciertas cosas. Toda la documentación para el marco está en docs.angularjs.org/api pero comenzaría con este tutorial http://docs.angularjs.org/tutorial/ .

El fuego angular no es parte del marco. Es otro servicio que aprovecha el marco para crear una poderosa red distribuida en tiempo real. Cuando carga el angularfirejs viene con el servicio que luego se inyecta como el parámetro que ve.

Para responder a su segunda pregunta, los parámetros que aprueba pueden ser cualquier cosa siempre que realice un servicio correspondiente. Consulte esto para crear su propio parámetro para los controladores: http://docs.angularjs.org/guide/dev_guide.services.creating_services

fbURL es solo una variable que puedes crear y el código que colocaste en tu pregunta es simplemente la instrucción sobre cómo hacerlo.

Angularjs no es el tipo de marco que puede aprender mirando lo que ofrece. Simplemente porque lo ofrece todo. Todo lo que podrías traer para hacer una gran aplicación. En su lugar, debe centrarse en preguntarle a Google cómo resolver su problema con angular.

También puedes ver videos en youtube. Encontrarás algunos geniales.

Answer 3

Según el comentario de toxaq, aquí están los comentarios como respuesta

1. ¿Cuáles pueden ser los parámetros del controlador?

   En su mayoría, puede tratarse de servicios, fábricas, valores, constantes, etc., que haya definido en alguna parte anterior O utilizando resolución en una definición de ruta.

2. ¿Dónde se llaman las funciones del controlador con sus parámetros?

   Esta es la forma correcta de definir un controlador:

   angular.module(''project'').controller(''EditCtrl'', [
   ''$scope'',
   ''$location'',
   ''$routeParams'',
   ''angularFire'',
   ''fbURL'',
   function($scope, $location, $routeParams, angularFire, fbURL) {
   ...
   }
   ]);

   De esta manera, primero establece el nombre de los servicios que desea inyectar, y luego le da a esos servicios un nombre diferente si lo desea. De hecho, esto es obligatorio si desea minimizar su código angular más adelante (dado que la minimización cambiará el nombre de las variables, angulares aún necesita poder encontrar los nombres de los servicios).

3. ¿Dónde se define angularFire?

   Cuando definió su módulo de proyecto, también incluyó la dependencia del módulo de firebase. Dentro del módulo firebase, debe haber un servicio de fuego angular como el anterior fbURL.

4. ¿Cómo se relaciona el fbURL en el parámetro?

   Como parece entender, los parámetros del controlador se están inyectando por angular a partir de la definición del controlador. Angular buscará en todos los servicios registrados e intentará encontrar una coincidencia con el nombre especificado del parámetro e ¡inyectará el servicio correspondiente!

5. ¿Hay algún lugar donde pueda ver todos los servicios, por ejemplo, $ location y $ timeout, que proporciona Angular.js?

   Para ver la lista de todos los servicios integrados, filtros, directivas incluidas en Angular, eche un vistazo a la API: http://docs.angularjs.org/api

Answer 4

• ¿Cuáles pueden ser los parámetros del controlador?

  Los parámetros del controlador son dependencias , que se inyectan mediante el servicio inyector AngularJS. Pueden ser cualquier cosa. Pero generalmente son los servicios que se usarán dentro del controlador.

• ¿Dónde se llaman las funciones del controlador con sus parámetros?

  Los controladores, así como las directivas, filtros, servicios y muchas otras cosas en AngularJS son funciones . Pero el marco gestiona una gran cantidad de cuándo y cómo se llaman estas funciones.

  Lo que llamas cosas asociadas tiene un nombre: dependencia , como se mencionó anteriormente. Lo que llamas magia es el mecanismo de inyección de dependencias AngularJS en acción.

  Cuando el inyector llama a estas funciones (controladores y otros), lee los nombres de los parámetros (por ejemplo: $scope o $http o angularFire ) y busca un servicio registrado con ese nombre, que luego se proporciona como parámetro cuando el la función se llama.

  Es simple. Tiene varias formas de indicar sus "dependencias" (parámetros administrados por el inyector) al inyector.

  Cuando simplemente declara su función como function myCtrl($scope) {} , el inyector podrá encontrar el servicio $scope partir del nombre del parámetro. Pero si minimiza el código JavaScript, el inyector ya no podrá encontrar el servicio, porque el nombre del parámetro se modificará a una cadena más pequeña, como "a" o "x". Para evitar este problema, es posible especificar el nombre del servicio que se inyectará utilizando la notación de matriz . En este caso, declararías tu función así: myCtrl = [''$scope'', function($scope) {}]

  Verás una gran cantidad de uso de notación de matriz en el mundo AngularJS. Ahora empiezas a entenderlo. Incluso puede inyectar $scope y angularFire y usarlos con otros nombres en su función ( no se recomienda cambiar el nombre; este ejemplo aquí viene para fines de aprendizaje): [''$scope'', ''angularFire'', function(skop, af) {}] - de esta manera, dentro de la función puede usar $ scope como "skop" y angularFire como "af". El orden de los servicios en la matriz coincide con el orden de los parámetros.

Otro ejemplo:

var myController = [''$scope'', ''$resource'', ''$timeout'',
function($scope, $resource, $timeout) {
// this controller uses $scope, $resource and $timeout
// the parameters are the dependencies to be injected
// by AngularJS dependency injection mechanism
}
];

• ¿Dónde se define angularFire?

  En el módulo firebase .

  Como ya sabe, el inyector inyectará cualquier cosa siempre que tenga ese nombre de "cosa" registrado y disponible en sus registros. Si hay un "servicio" con ese nombre , él puede proporcionarlo .

  ¿Cómo, entonces, se construye este name => stuff lista de name => stuff que usa el inyector?

  Módulo es la respuesta. Un módulo es poco más que una lista de name => stuff . Está en un módulo donde registra servicios, fábricas, filtros, directivas y más.

  Mire cuidadosamente los métodos del Módulo en la documentación oficial ... casi todos ellos reciben como parámetros: nombre y algunas " cosas " (donde "cosas" es casi siempre una función , definiendo ya sea un controlador, una fábrica o una directiva). ) Es todo este "material" que se convertirá en inyectable a través de su nombre especificado.

  Los servicios AngularJS como "$ timeout", "$ http" y otros están disponibles de manera predeterminada porque el módulo ng ya está cargado por el marco.

  Para servicios adicionales, necesita cargar / requerir el módulo . Eso es lo que haces con ngRouter , firebase , etc ... Al cargar el módulo , sus elementos registrados están disponibles para su inyección en tu módulo / aplicación.

Veamos un ejemplo paso a paso:

// An empty module:
var module = angular.module(''myModule'', []);
// Now, adding an "injectable" constant:
module.constant(''niceStuff'', { blip: ''blop'', blup: 307 });
// We could add a service:
module.service(''entityManager'', [''$http'', function($http){ }]);
// and so on... if I wanted to use "$resource" instead of "$http"
// in the entityManager service above...
// ...I would need to require the ngResource when creating the module above,
// like this: var module = angular.module(''myModule'', [''ngResource'']);
// because "$resource" is not available by default
// NOW, anywhere else, since the code above already ran
// I can use those NAMES as dependencies like this:
// We are creating another module now:
var koolModule = angular.module(''km'', [''myModule'']);
// Note that I am requiring the previous module through its registered name
// Now, anything I''ve declared in that module
// - just like "ng" (by default) and "firebase" (required) does -
// is available for "injection"!!!
koolModule.controller(''koolController'',
[''niceStuff'', ''entityManager'', function(niceStuff, entityManager) {
console.log(niceStuff.blip); // ''blop''
console.log(niceStuff.blup + 10); // 317
}]
);

¡Así es como las cosas de firebase, como angularFire, están disponibles! ¿Qué hemos hecho? Primero, creamos el "myModule" y le registramos cosas NAMED. Más tarde, solicitamos el "myModule" para nuestro "koolModule" - y esos NOMBRES ya estaban disponibles en el name => stuff del inyector name => stuff lista de name => stuff .

• ¿Cómo se relaciona el fbURL en el parámetro?

  Como acabamos de ver, la mayoría de los métodos de módulos simplemente registran cosas, dando nombres a las cosas para que puedan ser inyectadas y / o usadas a través de estos nombres más adelante.

  Cuando se module.value(''fbURL'', ''https://angularjs-projects.firebaseio.com/'') , fbURL (y el valor especificado) se registra en la lista name => stuff ... en este caso, el nombre es "fbURL", y el valor / material es la cadena URL, pero podría ser cualquier cosa.

• ¿Hay algún lugar donde pueda ver todos los servicios, por ejemplo, $ location y $ timeout, que proporciona Angular.js?

  Sí, la referencia de API: docs.angularjs.org/api

  Presta atención a cómo se organiza la navegación del lado izquierdo ... ¡por módulos ! Primero, el módulo ng , con toneladas de directivas, servicios, filtros, etc. Luego, a continuación, los otros módulos (ngRoute, ngResource, ngMock, etc.), cada uno con sus propios servicios, ajustadores o directivas ...

Gracias por la oportunidad de compartir estos pensamientos. Disfruté escribiéndolas.