2013-10-08 3 views
67

Я только начинаю изучать Angular.js, и я смотрю на project.js in the "Wire up a Backend" example on the Angular home page.Понимание параметров контроллера Angular.js

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

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

Единственное, что я мог бы найти так далеко, что, возможно, объясняет, что происходит это "Injecting Services Into Controllers", что объясняет $location, $timeout, но не параметры метода angularFire и fbURL.

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

  1. Что может быть параметры регулятора?

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

  3. Где: angularFire?

  4. Как это fbURL в параметре связан с:

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

+0

5. Список всех встроенных служб, фильтров, директив, включенных в Угловой, смотрите в API: http://docs.angularjs.org/api/ – jpmorin

+1

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

+0

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

ответ

131
  • Что может быть параметры регулятора?

    Параметры регулятора являются зависимостей, которые вводят с помощью инжектора 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) {}] - таким образом, внутри функции вы можете использовать $ объем как «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 
    } 
]; 
  • Где angularFire определяется?

    В модуле в firebase.

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

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

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

    Посмотрите внимательно на Module methods at the official documentation ... почти все они получают в качестве параметров: имя и некоторые «материал» (где «материал» почти всегда функция, определяющая либо контроллер, либо фабрика или директива). Все это «вещество» станет инъекционным через их указанное имя .

    Услуги 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», а значение/материал строка URL - но может быть что угодно!

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

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

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

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

+0

Вот хороший обзор [инжектор] (http://docs.angularjs.org/guide/concepts#injector), ищите «Модули и инжектор». – Alice

+2

Спасибо! Хорошее объяснение того, что и почему. –

+0

это, просветив меня, спасибо, сэр! – ikhsan

0

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

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

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

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

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

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

1

Согласно toxaq комментарий, здесь комментарии, как ответ

  1. Что может быть параметры регулятора?

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

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

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

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

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

  3. Где определяется угловое определение?

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

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

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

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

    Перечня всех встроенные в сфере услуг, фильтры, директивы, включенном в Угловом, взгляните на API: http://docs.angularjs.org/api

1

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

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

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

Смежные вопросы