Автор оригинала: Kyle J. Roux.
Используя угловую серверную сторону
Так что я знаю, что вы думаете:
« Что это о ? Угловая структура, зачем вам это понадобиться на спине ?»
Я пришел на самом деле оценить структуру и организацию, налагающую на проекты с использованием угловых услуг, контроллеров и директив. Мне так много нравится угловая, я хотел продлить эту структуру на моих других проектах, а также в мой серверный код. Я действительно чувствую, что имея такую твердую базу для начала, – это огромная помощь в движении проектов. Итак, я решил выяснить, как получить нагрузку на приложение и работу из командной строки, и поскольку для различных угловых кусочков требуется достаточно необходимого кода, и поскольку для различных угловых кусочков требуется, я полагал отличное место, чтобы начать с этого Является ли инструмент командной строки для генерации котельной, необходимой для загрузки углового приложения, из командной строки или браузера.
Что нужно начать угловую
Когда усиливается угловые угловые, он хочет, чтобы объект окон и доступный объект документа, поэтому чтобы обеспечить их быстро и прозрачно, мы будем использовать Node.js Бенв (Окружающая среда браузера) модуль. Мы начнем с создания каталога проекта и установка Бенв :
$ mkdir PROJECT_NAME $ cd PROJECT_NAME $ npm install benv
Затем создайте файл для кода Bootstrap. Я позвонил мой: Nodeng.js Отказ Используйте любой редактор, с которым я бы случился, мне нравится vim – но вы можете использовать все, что вы хотели бы
$ vim nodeNg.js
и добавьте это в файл, чтобы начать:
"use strict";
var benv = require('benv');
Это тянет в модуле, который создаст нашу среду браузера угловой, использующую.
Теперь этот следующий бит – это немного личных предпочтений, но я решил обернуть весь процесс Bootstrap в функции, которая займет другую функцию в качестве аргумента. Первая функция выполнит загрузку и будет содержать угловое приложение, которое мы можем использовать, и функция, которую мы пропустим, будет базовой анонимной функцией, в которую мы будем обернуть наше приложение. Итак, после того, как угловаты, мы будем позвонить нашему находится внутри первой функции, и это будет выполнять код для нашего приложения. Я знаю, что я написал, был глоток, поэтому давайте посмотрим на то, что я имею в виду.
Мы начинаем с написания функции, которая сделает загрузку и принять нашу функцию приложения в качестве аргумента:
var use_angular = function(callback){
benv.setup(function(){
benv.expose({
angular:benv.require('./angular.js','angular')
});
return callback();
});
};
Так что это выглядит сложным, но на самом деле мы почти ничего не делаем, давайте пойдем на линию по линии:
- Линия 1 просто объявляет функцию как переменную
- Линия 2 – 4, где действительно магия,
- На 2 мы называем
НастройкаФункцияБенвМодуль, это создаетокноиДокументОбъекты, которые угловые будут обернуть, чтобы создать его$ окнои$ ДокументСервисы. Внутри этого определения функции мы можем добавить другие вещи в нашу среду, позвонивBenv.exposeПервым аргументом будет объектом, значения станут доступными, и мы можем получить доступ к ним, используя клавиши, которые мы предоставляем в качестве переменных, т. Е.: Вызовbenv.expose ({myvar: 55})сделаюMyvarравный 55. - Линия 3 звонит
Benv.exposeс{angular: benv.require ('./angular.js', 'angular')}как его аргумент. который, как я уже говорил до добавленияугловойкак переменная в нашей среде, и она дает ему ценность возврата звонка на другойБенвФункциятребуется, это в основном эквивалентно добавить бирку сценария в наш HTML-документ. - Наконец после звонка
Benv.exposeМы можем использовать угловой, поэтому мы возвращаем наш проход в функции, как мы его называем, эффективно возвращая возвращаемое значение нашего прошлого в анонимной функции, которая, если вы вспомните, станут наше угловое приложение.
- На 2 мы называем
Теперь нам просто нужно позвонить нашу новую функцию с анонимной функцией, которая будет тянуть в наше приложение, чтобы запустить его аргумент.
use_angular(function(){
var path = require('path');
require(path.join(path.resolve('./'),process.argv[2]))();
});
Это выглядит странно, я знаю, но все, что мы делаем здесь, требуют файла на пути, указанном в командной строке, и присоединиться к нему с нашим текущим каталогом, чтобы убедиться, что мы требовали правильного файла. Затем мы собираемся экспортировать функцию из этого файла, поэтому мы пойдем вперед и позвоним в этом, как мы это требовалось, поскольку это, почему он существует: для выполнения.
Итак, мы закончили загрузку угловой?
По сути. На самом деле, используя эту настройку, мы можем идти вперед и начать писать наш инструмент командной строки угловой, но я уже сделал эту ошибку. Мы узнаем у этого и примите более длинный взгляд на нашу функцию начальной загрузки.
Как я уже сказал, мы могли бы продолжать, все будет работать, но вот проблемы, которые мы столкнулись бы:
- Когда мы загружаем предметы из углового мира (т. Е. Наши фабрики, услуги и контроллеры), нам нужно было бы создать объект инжектора для их загрузки
- Этот объект имеет неудобное API, потому что это на самом деле не значит для общего пользования
Чтобы аннотация по крайней мере, создание объекта инжектора, которое требует от нас пройти в модулях, он имеет в своем распоряжении, мы можем написать функцию, что-то вроде:
var ng_load = function(name){
return angular.injector(['ng']).get(name);
};
Теперь это будет работать, но не позволит нам использовать наши собственные услуги и контроллеры. Это позволит нам только использовать угловые, потому что мы проходим только в модуле угловых «NG». Если мы хотим возможность проходить в наших собственных модулях или других 3-го вечеринка, нам нужно немного изменить его. Кроме того, пока мы делаем это, нам нужно будет иметь в виду, что угловые выпрыгивают ошибку, если мы случаемся, чтобы ввести любой модуль более одного раза:
var ng_load = function(name,extraModules){
var mods = ['ng'];
if(extraModules && extraModules.length){
angular.forEach(extraModules,function(itm){
mods.indexOf(itm) === -1 ? mods.push(itm):false;
});
}
return angular.injector(mods).get(name);
};
ОК. Теперь мы можем пройти в любом модуле, который нам нравится, где он введет их и потянуть все, что мы хотели бы, чтобы мы использовали для использования окружающей среды. Но есть еще одна проблема. Если бы мы хотели получить 2 службы из модуля по имени Service.mod нам нужно было бы добавить Service.mod каждому звонку ng_load , то есть.:
var serviceA = ng_load('serviceA',['service.mod']);
var serviceB = ng_load('serviceB',['service.mod']);
Когда все нам нужно сделать, это сделать:
var serviceA = ng_load('serviceA',['service.mod']);
var serviceB = ng_load('serviceB');
var serviceC = ng_load('serviceC');
И я знаю, что это не похоже на многое в этом контексте, но поверь мне. Необходимость проходить в модуле каждый раз, когда вам нужно, это действительно может стать болью, и если вы когда-либо случаетесь забывать добавить его, это становится простой способ для жулов.
Итак, я еще раз рефиллюнет нашу функцию кэшируйте модули, которые мы впрыскиваем, поэтому нам нужно будет только добавить их один раз, тогда мы можем просто попросить об этом. Пока мы добавили его к первому запросу на обслуживание, мы можем получить другие услуги только по имени. До сих пор я писал это как подстановочную функцию, но на самом деле она должна быть определена в Benv.setup Звоните как свойство на объекте, который мы переходим на Benv.expose (наш модуль кэш будет жить там, а также там).
Давайте просто начнем и интегрируйте его в нашу оригинальную настройку:
// first we get our environment and define a function to use it
"use strict";
var benv = require('benv');
var use_angular = function(callback){
benv.setup(function(){
benv.expose({
angular:benv.require('./angular.js','angular'),
ng_mod_cache:[],
cache_mods : function(mods){
angular.forEach(mods,function(itm){
ng_mod_cache.push(itm);
});
},
ng_load : function(name,extraModules){
var mods = (ng_mod_cache && ng_mod_cache.length) ? ng_mod_cache : ['ng'];
if(extraModules && extraModules.length){
angular.forEach(extraModules,function(itm){
mods.indexOf(itm) === -1 ? mods.push(itm):false;
});
}
cache_mods(mods);
return angular.injector(mods).get(name);
}
});
return callback();
});
};
// then we pass an anonymous function that calls a function from a file
// the file we point this script at should contain our angular code
use_angular(function(){
var path = require('path');
require(path.join(path.resolve('./'),process.argv[2]))();
});
Загрузка угловой структуры
На самом деле убедитесь, что наше приложение работает и создает информирует наши контроллеры и услуги, а также для доступа к инжектору зависимости, нам нужно загрузить наше приложение. Мы можем добавить простую небольшую функцию для этого.
ng_bootstrap:function(app){
var _app = angular.isString(app) ? angular.module(app) : app;
_app.config(function($locationProvider){
$locationProvider.html5Mode(false);
});
return angular.bootstrap(angular.element(document.createElement('body')),[_app.name]);
}
Теперь, используя, что мы можем написать небольшую функцию, чтобы захватить нашу инжектор зависимости от угловых:
ng_injector:function(app){
return ng_bootstrap(app).invoke;
}
И последний вопрос, который мы можем обнаружить, что мы запускаем, будут выполняться узлы Async Functions, используя угловые, это потому, что угловая использует пользовательскую версию Q Модуль для обещаний, узел использует другой метод по умолчанию. Таким образом, мы напишем функцию, которая примет функции узла Async в качестве первого аргумента, и вернет функцию, использующую $ Q угловые обертка вокруг Q библиотека:
promisify:function(asyncFunc,context){
var $q = ng_load('$q');
return function(){
var defer = $q.defer(),
args = Array.prototype.slice.call(arguments);
args.push(function(err,val){
if(err !== null){
defer.reject(err);
}else{
defer.resolve(val);
}
});
asyncFunc.apply(context || {},args);
return defer.promise;
};
}
Теперь мы можем начать писать нашу командную строку инструмента. Теперь мы готовы.
Продолжение следует…..
Для копии кода в этом блоге и небольшом примере см. github repo.