При создании веб-приложения, где каждая страница зависит от многих источников данных, какой лучший способ получить исходные биты данных? Когда я смотрю на твиттер, я вижу, что твиты, которые видны при загрузке страницы, находятся в источнике HTML, и больше твитов загружаются при использовании AJAX при прокрутке вниз. Но нет удобного способа получить данные, которые уже в DOM будут вставлены в модель.
Выполняя запрос на исходные данные, сразу же после того, как страницы загружаются швами глупыми, потому что вы только что сделали много обращений к серверу для извлечения css, html и javascript. Было бы плохой идеей вставить данные в тег javascript на странице, поэтому функция javascript может добавлять исходные данные?
Я специально спрашиваю об угловых, но если есть общая техника, пожалуйста, дайте мне знать.
В любом случае вы будете ссылаться на свой контроллер при загрузке страницы, поэтому вам не нужно иметь встроенный тег script.
Вы можете установить модель по умолчанию и использовать атрибут ng-bind при начальной загрузке или вызвать функцию для передачи данных.
Это довольно типично для получения данных о загрузке в angularjs.
Было бы лучше связать Angularjs с HTTP-клиентом в бэкэнд, например Zend_Http_Client или Guzzle, чтобы сервер получал данные. Затем передайте данные как json в javascript при визуализации.
Я знаю, что Angularjs предназначен для приложений с одной страницей. Вот почему имеет смысл, что он ленивы загружает данные.
Однако, если мы перейдем к подходу, где мы по-прежнему отображаем страницу динамически и все еще делегируем задачу организации контента в Angularjs. Какая структура будет полезна, чтобы содержать взгляды AngularJS. Прямо сейчас, шаблоны проектов, такие как angular -seed, являются статическими.
То есть, идея заключается в том, что сервер обслуживает страницу со встроенным json-объектом. Затем angular берет на себя клиентскую сторону, получая дополнительный контент там, где это необходимо.
Итак, вместо одной страницы контакта (например, index.html) у нас будет несколько страниц, например profiles.html, products.html. Помощь бэкэнда была бы особенно полезной, так как у вас есть раздел, который не меняется часто, как ваше имя пользователя в верхней правой части страницы. Для меня, я просто думаю, что лучше, чтобы эти данные были предварительно загружены на вашей странице и не нужно спрашивать сервер после загрузки страницы.
Как заметил большой блайнд, это похоже на то, как это делают сайты, такие как facebook, gmail, twitter. Они содержат данные, встроенные в загрузку страницы. Затем загрузите дополнительный контент через службы.
Идея заключается в следующем:
Webservice <---------- Backend------------> Frontend
<------------------------------------------
Backend делегирует задачу запроса веб-сервиса для предоставления начальным данным на отображаемой странице клиенту. Затем клиент может напрямую подключиться к веб-сервису для получения дополнительного контента.
Использование вышеприведенной настройки.. Каков идеальный стек разработки?
Один из способов сделать это - создать директиву, которая обрабатывает инициализацию до того, как произойдет связывание. Например:
app.directive('initdata', function() {
return {
restrict: 'A',
link: function($scope, element, attrs) {
if ( attrs.ngBind !== undefined)
{
$scope[attrs.ngBind] = attrs.initdata ? attrs.initdata : element.text();
}
}
};
});
Эта директива принимает либо значение атрибута в качестве начального значения для свойства bound $scope, либо текстовое значение элемента.
Пример использования:
<div initdata="Foo Bar" ng-bind="test1"></div>
<div initdata ng-bind="test2">Lorem Ipsem</div>
Рабочий пример на http://jsfiddle.net/6PNG8/
Существует множество способов для этого; например, анализируя initdata как json и объединяя его с областью действия и делая работу более сложными связями, например $root.someprop. Но базис замечательно прост.
В соответствии с ответами на этот вопрос объект JSON в теге script на странице, похоже, подходит для этого. Если у вас будет лучшая идея, я приму ваш ответ.