Understanding Angular.js controller options

Question

I am just starting to learn Angular.js, and I looked at project.js in the Wire Up example on the Angular home page .

I got confused in the parameters in the controller functions:

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() { ... }); } 

These controller functions are called in routeProvider, but none of the parameters are specified.

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

The only thing that I can still find, perhaps, is explaining that there is an “Injection Services in Controllers” that explains $location , $timeout , but not the angularFire and fbURL .

My specific questions are:

• What can be the parameters of the controller?

• Where are controller functions called with their parameters? Or the parameters are not called, but simply connected to the controller, where the association is encountered with a lot of Angular.js magic (if so, can I see the source code on github)?

• Where is angularFire indicated?

• Like fbURL in a parameter related to:

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

• Is there a place where I can see all the services, for example. $location and $timeout , what does Angular.js provide? (I tried to find the list, but could not.)

Answer 1

• What can be the parameters of the controller?

  Dependency controller options that are entered by the AngularJS injector service. They can be anything. But usually they are services that will be used inside the controller.

• Where are controller functions called with their parameters?

  Controllers, as well as directives, filters, services, and so many other things in AngularJS, are functions . But structure governs the set when and how these functions are called.

  What you call material-related has a name: dependency , as mentioned above. What you call magic is a binding mechanism based on AngularJS . .

  When these functions (controllers and others) are called by the injector, it reads the parameter names (for example: $scope or $http or angularFire ) and looks for a registered service with this name, which is then provided as a parameter when the function is called.

  It's simple. You have several ways to instruct the injector about your “dependencies” (parameters controlled by the injector).

  When you simply declare your function as function myCtrl($scope) {} , the injector can find the $scope service from the parameter name. But if you minify the JavaScript code, the injector will no longer be able to find the service, because the parameter name will be changed to a smaller string, for example "a" or "x". To avoid this problem, you can specify the name of the service to be entered using the sign of the array . In this case, you should declare your function as follows: myCtrl = ['$scope', function($scope) {}]

  In the world of AngularJS, you will see many array notation . Now you begin to understand this. You can even enter $scope and angularFire and use them with other names in your function (changing the name is not recommended ) - this example is for educational purposes): ['$scope', 'angularFire', function(skop, af) {}] - this way, inside the function you can use $ scope as "skop" and angularFire as "af". the order of services in the array corresponds to the order of parameters.

Another example:

 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 } ]; 

• Where is the angular definition defined?

  The firebase module .

  As you already know now, the injector will enter anything if it has this “thing” name , registered and accessible in its records. If there is a “service” with this name , it can provide it.

  How is this name => stuff list that the injector uses?

  A module is the answer. a module is a bit more than a list of name => stuff . It is located in the module where you register services, factories, filters, directives, etc.

  Carefully study the Module methods in the official documentation ... almost all of them get as parameters: a name and some " stuff " (where "material" is almost always a function , defining either a controller, factory, or a directive). All of this “material” will become injectable through the specified name .

  AngularJS services, such as "$ timeout", "$ http" and others, are available by default since the ng module is already loaded by the infrastructure.

  For additional services you need to download / require a module . This is what you do with ngRouter , firebase , etc. Loading module , its registered material is available for injection in your module / application.

Take a look step by step:

 // 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 }] ); 

Here's how firebase stuff becomes available, such as angularFire! What have we done? First we created "myModule" and registered the NAMED material. Later we demanded "myModule" for our "koolModule" - and these NAMES were already available in the injectors list name => stuff .

• Like fbURL in a related parameter

  As we just saw, most module methods simply register things - give names to things, so they can be entered and / or used through these names later.

  When module.value('fbURL', 'https://angularjs-projects.firebaseio.com/') is called , fbURL (and the specified value) is registered in the list name => stuff ... in this case the name is "fbURL", and / stuff is a URL string - but it could be anything!

• Is there a place where I can see all the services, for example. $ location and $ timeout, what does Angular.js provide?

  Yes, API reference: http://docs.angularjs.org/api/

  Pay attention to how left navigation is organized ... using modules ! Firstly, the ng module with many directives, services, filters, etc. Further, other modules (ngRoute, ngResource, ngMock, etc.), each of which contains its own services, fillers or directives ...

Thank you for the opportunity to share these thoughts. I liked to write them.

Answer 2

Where are controller functions called with their parameters?

Controller functions are created using the ngController directive , or if you specified a controller when creating a route using $routeProvider . AngularJS does this for you automatically and enters the parameters that you defined on your controller using DI .

DI works by matching the names (or several orders) of parameters. So $scope will get the current scope, $http will get the http service

Answer 3

First of all, you choose this structure. This is the best. These variables, which you see with the $ sign, are entered and are included in the standard structure. These services will make your life much easier. The best way to think about controllers is with script sheets. They help split the code. Do not think of them as methods. The variables you see, such as $ timeout and $ scope, are services that come in handy since you need to do something. All documentation for the framework is in http://docs.angularjs.org/api/ , but I would start with this tutorial http://docs.angularjs.org/tutorial/ .

Corner fire is not part of the frame. This is another service that uses the foundation to create a powerful distributed network in real time. When you download angularfirejs, it comes with a service, which is then entered as the parameter that you see.

To answer the second question, the parameters that you pass can be any while you perform the corresponding service. Please refer to this to create your own parameter for controllers: http://docs.angularjs.org/guide/dev_guide.services.creating_services

fbURL is just a variable that you can create, and the code you posted in your question is just an instruction on how to do this.

Angularjs is not the type of framework you can find out by looking at what it offers. Just because he offers everything. All you could bring to make a great app. Instead, you should focus on asking Google how to solve your problem with angular.

Also check out the YouTube video. You will find wonderful ones.

Answer 4

According to toxaq's comment, here are the comments as an answer

• What can be the parameters of the controller?

  These are mainly services, factories, values, constants, etc. that you defined somewhere earlier OR using the definition of a route definition.

• Where are controller functions called with their parameters?

  Here is the correct way to determine the controller:

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

  Thus, you first give the name of the services you want to insert, and then you give these services a different name if you want. In fact, this is necessary if you want to minimize your angular code later (since minimization will rename variables, angular should still be able to find service names).

• Where is the angular definition defined?

  When you defined your project module, you also included the dependency of the Firebase module. Inside the firebase module there should be a corner fire service, like the previous fbURL.

• Like fbURL in a parameter related to

  As you seem to understand, controller parameters are entered using angular from the controller definition. angular will look in all registered services and try to find a match with the specified parameter name and enter the corresponding service!

• Is there a place where I can see all the services, for example. $ location and $ timeout, what does Angular.js provide?

  For a list of all the built-in services, filters, directives included in Angular, consider the API: http://docs.angularjs.org/api