Понимание параметров контроллера Angular.js

Я только начинаю изучать Angular.js, и я смотрел project.js в примере "Провод вверх" на домашней странице Angular.

Я запутался в параметрах в функциях контроллера:

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

Эти функции контроллера вызываются в routeProvider, но ни один из параметров не указан.

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

Единственное, что я могу найти до сих пор, возможно, объясняет, что происходит "Инъекционные услуги в контроллерах" , в котором объясняются $location, $timeout, но не параметр angularFire и fbURL.

Мои конкретные вопросы:

  • Какими могут быть параметры контроллера?

  • Где функции контроллера вызываются с их параметрами? Или параметры не вызываются, а просто связаны с контроллером, где ассоциация встречается с большим количеством магии Angular.js(если да, могу ли я увидеть исходный код на github)?

  • Где указано angularFire?

  • Как fbURL в параметре, связанном с:

    angular.module('project', ['firebase']).
        value('fbURL', 'https://angularjs-projects.firebaseio.com/').
        factory ...
    
  • Есть ли место, где я могу видеть все службы, например. $location и $timeout, что Angular.js предоставляет? (Я пытался найти список, но не смог.)

Ответ 1

  • Какими могут быть параметры контроллера?

    Параметры контроллера зависимости, которые вводятся службой инжектора AngularJS. Они могут быть чем угодно. Но обычно они службы, которые будут использоваться внутри контроллера.

  • Где функции контроллера вызываются с их параметрами?

    Контроллеры, а также директивы, фильтры, службы и так много других вещей в AngularJS - это функции. Но структура управляет множеством , когда и , как вызывается эти функции.

    То, что вы называете связанным с материалом, имеет имя: зависимость, как упоминалось выше. То, что вы называете магия, - это механизм действий с привязкой в ​​зависимости от AngularJS ..

    Когда эти функции (контроллеры и другие) вызывают инжектором, он считывает имена параметров (например: $scope или $http или angularFire) и ищет зарегистрированную службу с этим именем, которая затем предоставляется в качестве параметра при вызове функции.

    Это просто. У вас есть несколько способов проинструктировать о ваших "зависимостях" (параметры, управляемые инжектором) инжектору.

    Когда вы просто объявляете свою функцию как function myCtrl($scope) {}, инжектор сможет найти службу $scope из имени параметра. Но если вы minify код JavaScript, инжектор больше не сможет найти службу, потому что имя параметра будет изменено на меньшую строку, например "a" или "x". Чтобы избежать этой проблемы, можно указать имя службы, которое должно быть введено, с использованием знака массива. В этом случае вы должны объявить свою функцию следующим образом: myCtrl = ['$scope', function($scope) {}]

    В мире AngularJS вы увидите много обозначений массива. Теперь вы начинаете понимать это. Вы даже можете вводить $scope и angularFire и использовать их с другими именами в своей функции (изменение имени не рекомендуется) - этот пример приведен для учебных целей): ['$scope', 'angularFire', function(skop, af) {}] - таким образом, внутри функции вы можете использовать $scope как "skop" и angularFire как "af". порядок служб в массиве соответствует порядку параметров.

Другой пример:

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
    }
];
  • Где определено угловое определение?

    В firebase модуль.

    Как вы уже знаете сейчас, инжектор будет вводить что угодно, если у него есть это "вещь" имя, зарегистрированное и доступное в его записях. Если существует "сервис" с этим именем, он может предоставить его.

    Каким образом создается этот name => stuff список, который использует инжектор?

    Модуль - это ответ. модуль - это немного больше, чем список name => stuff. Он находится в модуле, где вы регистрируете службы, фабрики, фильтры, директивы и т.д.

    Внимательно изучите методы Module в официальной документации... почти все они получают в качестве параметров: имя и некоторые " stuff" (где "материал" почти всегда является функцией, определяя либо контроллер, либо factory, либо директиву). Все это "материал" станет инъекционным через указанное имя.

    Услуги AngularJS, такие как "$ timeout", "$ http" и другие, доступны по умолчанию, поскольку модуль ng уже загружен инфраструктурой.

    Для дополнительных сервисов вам необходимо загрузить/потребовать модуль. Это то, что вы делаете с ngRouter, firebase и т.д. Загружая модуль , его зарегистрированный материал доступен для инъекций в вашем модуле/приложении.

Посмотрите шаг за шагом:

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

Вот как становится доступным материал firebase, например angularFire! Что мы наделали? Сначала мы создали "myModule" и зарегистрировали материал NAMED. Позже мы потребовали "myModule" для нашего "koolModule" - и эти NAMES уже были доступны в списке инжекторов name => stuff.

  • Как fbURL в связанном параметре

    Как мы только что видели, большинство методов модуля просто регистрируют вещи - дают именак вещам, поэтому они могут быть введены и/или использоваться через эти имена позже.

    Когда вызывается module.value('fbURL', 'https://angularjs-projects.firebaseio.com/'), fbURL (и указанное значение) регистрируется в списке name => stuff... в этом случае имя "fbURL", а значение /stuff - строка URL - но это может быть что угодно!

  • Есть ли место, где я могу видеть все службы, например. $location и $timeout, что Angular.js предоставляет?

    Да, ссылка API: http://docs.angularjs.org/api/

    Обратите внимание на , как организована левая навигация... с помощью модулей! Во-первых, модуль ng с множеством директив, сервисов, фильтров и т.д. Далее, другие модули (ngRoute, ngResource, ngMock и т.д.), Каждый из которых содержит свои собственные службы, филеры или директивы...

Спасибо за возможность поделиться этими мыслями. Мне нравилось писать их.

Ответ 2

Где функции контроллера вызываются с их параметрами?

Функции контроллера создаются с помощью директивы ngController или если вы указали контроллер во время создания маршрута с помощью $routeProvider. AngularJS делает это для вас автоматически и вводит параметры, которые вы определили на вашем контроллере, используя DI.

DI работает, сопоставляя имена (или несколько порядков) параметров. Таким образом, $scope получит текущую область видимости, $http получит http-сервис

Ответ 3

Прежде всего, вы выбираете эту структуру. Это лучшее. Эти переменные, которые вы видите с знаком $, вводятся и входят в стандартную структуру. Эти услуги сделают вашу жизнь намного проще. Лучший способ думать о контроллерах - это script листы. Они помогают разделить код. Не думайте о них как о методах. Те переменные, которые вы видите, такие как $timeout и $scope, - это службы, которые пригодится, поскольку вам нужно что-то сделать. Вся документация для рамки находится в http://docs.angularjs.org/api/, но я бы начал с этого учебника http://docs.angularjs.org/tutorial/.

Угловой огонь не является частью рамки. Это еще одна услуга, которая использует основу для создания мощной распределенной сети в режиме реального времени. Когда вы загружаете angularfirejs, он поставляется с сервисом, который затем вводится в качестве параметра, который вы видите.

Чтобы ответить на второй вопрос, параметры, которые вы передаете, могут быть любыми, пока вы выполняете соответствующую услугу. Пожалуйста, обратитесь к этому, чтобы создать свой собственный параметр для контроллеров: http://docs.angularjs.org/guide/dev_guide.services.creating_services

fbURL - это просто переменная, которую вы можете создать, и код, который вы разместили в своем вопросе, - это просто инструкция о том, как это сделать.

Angularjs - это не тот тип фреймворка, который вы можете узнать, глядя на то, что он предлагает. Просто потому, что он предлагает все. Все, что вы могли бы принести, чтобы сделать отличное приложение. Вместо этого вам следует сосредоточиться на том, чтобы спросить Google, как решить вашу проблему с помощью angular.

Также проверьте видео на YouTube. Вы найдете замечательных.

Ответ 4

В соответствии с комментарием toxaq, вот комментарии как ответ

  • Какими могут быть параметры контроллера?

    В основном это службы, фабрики, значения, константы и т.д., которые вы определили где-то раньше ИЛИ, используя определение определения маршрута.

  • Где функции контроллера вызываются с их параметрами?

    Вот правильный способ определения контроллера:

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

    Таким образом, вы сначала задаете имя служб, которые хотите вставить, а затем вы дадите этим службам другое имя, если хотите. Фактически это необходимо, если вы хотите свести к минимуму ваш angular код позже (поскольку минимизация переименует переменные, angular должен все еще иметь возможность найти имена служб).

  • Где определено угловое определение?

    Когда вы определили свой модуль проекта, вы также включили зависимость модуля Firebase. Внутри модуля firebase должна быть услуга с угловым огнем, как и предыдущая fbURL.

  • Как fbURL в параметре, связанном с

    Как вы, кажется, понимаете, параметры контроллера вводятся с помощью angular из определения контроллера. angular будет выглядеть во всех зарегистрированных службах и попытаться найти совпадение с указанным именем параметра и ввести соответствующую услугу!

  • Есть ли место, где я могу видеть все службы, например. $location и $timeout, что Angular.js предоставляет?

    Для списка всех встроенных служб фильтры, директивы, включенные в Angular, рассмотрим API: http://docs.angularjs.org/api