Загрузка исходных данных в angularjs

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

Выполняя запрос на исходные данные, сразу же после того, как страницы загружаются швами глупыми, потому что вы только что сделали много обращений к серверу для извлечения css, html и javascript. Было бы плохой идеей вставить данные в тег javascript на странице, поэтому функция javascript может добавлять исходные данные?

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

Ответ 1

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

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

Это довольно типично для получения данных о загрузке в angularjs.

Ответ 2

Было бы лучше связать 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 делегирует задачу запроса веб-сервиса для предоставления начальным данным на отображаемой странице клиенту. Затем клиент может напрямую подключиться к веб-сервису для получения дополнительного контента.

Использование вышеприведенной настройки.. Каков идеальный стек разработки?

Ответ 3

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

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. Но базис замечательно прост.

Ответ 4

В соответствии с ответами на этот вопрос объект JSON в теге script на странице, похоже, подходит для этого. Если у вас будет лучшая идея, я приму ваш ответ.