2013-10-01 4 views
44

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

+1

Этот блог очень помог мне с модулями в AngularJs [13 шагов к модуляции AngularJS] (https://blog.safaribooksonline.com/2014/03/27/13-step-guide-angularjs-modularization/). – danijelf

ответ

80

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

Например, взгляните на любой angular ui module, и вы увидите множество пользовательских модулей.
Определяют just a single directive, а другие определяют more stuff.

Как @nXqd сказал, основной способ создания модуля является:

// 1. define the module and the other module dependencies (if any) 
angular.module('myModuleName', ['dependency1', 'dependency2']) 

// 2. set a constant 
    .constant('MODULE_VERSION', '0.0.3') 

// 3. maybe set some defaults 
    .value('defaults', { 
     foo: 'bar' 
    }) 

// 4. define a module component 
    .factory('factoryName', function() {/* stuff here */}) 

// 5. define another module component 
    .directive('directiveName', function() {/* stuff here */}) 
;// and so on 

После определения вашего модуля, это очень легко добавлять компоненты к нему (без необходимости хранить модуль в переменной):

// add a new component to your module 
angular.module('myModuleName').controller('controllerName', function() { 
    /* more stuff here */ 
}); 

И интеграционная часть довольно проста: просто добавьте ее как зависимость от вашего модуля приложения (here's, как это делает угловой ui).

angular.module('myApp', ['myModuleName']); 
+0

thx для обоих ответов. я соглашусь с gion_13, поскольку он более подробный. –

+0

Ссылка «Только одна директива» нарушена. –

+0

@ Mariusz.W Спасибо за головы. Организация с угловым ui github обновила/переместила большинство репозиций, с которыми я связался в своем первоначальном ответе, и теперь все ссылки были разбиты. Обновили их новыми примерами. –

5

Если вы хотите найти хороший пример, вы должны изучить текущий модуль, написанный на угловом JS. Научитесь читать их исходный код. Btw это структура, которую я использую для записи модулей в angularJS:

var firstModule = angular.module('firstModule', []) 
firstModule.directive(); 
firstModule.controller(); 

// in your app.js, include the module 

Это основной.

2
var newMod = angular.module('newMod', []); 

newMod.controller('newCon', ['$scope', function ($scope) { 
    alert("I am in newCon"); 
    $scope.gr = "Hello"; 
}]); 

Здесь newMod представляет собой модуль, который не имеет зависимостей [] и имеет контроллер, который имеет предупреждение, говоря вам в контроллере и переменную со значением привет.

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