как распределять функции через контроллеры в угловых js

Question

Я новичок в Angular.js.
У меня есть приложение, которое содержит несколько вкладок с разными страницами. Каждая страница поддерживается различным контроллером для управления своими собственными данными. Я сомневаюсь, как использовать одни и те же функции на разных страницах (контроллерах). Например, поля разных страниц будут иметь одинаковые функции проверки, функции форматирования и многие другие функции использования.

1.Как поддерживать функции, общие для разных контроллеров?
2. Как связать общие функции в качестве слушателей с событиями, связанными с полями разных страниц (управляемыми разными контроллерами), поскольку они не разделяют область видимости?
Спасибо.

Answer 1

Используйте завод или Услугу

Чтобы разделить функции между различными контроллерами можно использовать фабрику или услугу. пример покажет это лучше

контроллера & завода

Это пример из документации Угловой JS. завод может использоваться везде, где он вводится в функцию.

angular. 
module('myServiceModule', []). 
controller('MyController', ['$scope','notify', function ($scope, notify) { 
    $scope.callNotify = function(msg) { 
    notify(msg); 
    }; 
}]). 
factory('notify', ['$window', function(win) { 
    var msgs = []; 
    return function(msg) { 
    msgs.push(msg); 
    if (msgs.length == 3) { 
     win.alert(msgs.join("\n")); 
     msgs = []; 
    } 
    }; 
}]); 

См функции на контроллере есть инъекция notify этого можно было бы назвать по-другому контроллеру, если вы так хотели.

Директивы

Вы также должны взглянуть на директивы, они позволяют создавать свои собственные HTML-теги и атрибуты. Их можно использовать повторно на разных страницах.

Пример Директива

Вот фактический код Директивы

app.directive('appInfo', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     info: '=' 
    }, 
    templateUrl: 'js/directives/appInfo.html' 
    }; 
}); 

restrict: E означает, что он будет использоваться в качестве элемента не является атрибутом.

scope перечислены различные области, доступные для элемента.

templateUrl Это ссылка на то, где вы храните свой html-фрагмент.

Вот дИРЕКТИВЫ фрагмент кода HTML

<img class="icon" ng-src="{{ info.icon }}"> 
<h2 class="title">{{ info.title }}</h2> 
<p class="developer">{{ info.developer }}</p> 
<p class="price">{{ info.price | currency }}</p> 

Смотрите, что у нас есть доступ к info от объема

Ниже см директиву как тег в нашей основной HTML, вы можете поместить это в индекс страницы или любого из ваших шаблонов столько раз, сколько вам нравится.

<div class="card"> 
    <app-info info="move"></app-info> 
</div> 

Вот основы построения директивы, это один имеет только HTML и объем, но вы можете сделать гораздо более сложные из них, которые используют контроллеры.

Дополнительное примечание для исследования

Потратьте некоторое время, чтобы пройти через Codecademy AngularJS учебники, они свободны и принимать только 2 ночи рабочих поверхностей. Они также объясняют все основы Angular JS, как директивы, контроллеры, службы и т. Д.

Answer 2

Это то, что services/factories для.

Они предоставляют одноуровневые «классы», которые содержат любые данные и функции, которые вы хотите использовать в приложении.

Например:

app.factory('myService', function() { 
    return { 
    doSomethingCool: doSomethingCool 
    }; 
}); 

app.controller('myController', function(myService) { 
    myService.doSomethingCool(); 
}); 

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