Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   Базовая структура приложения (https://javascript.ru/forum/angular/63867-bazovaya-struktura-prilozheniya.html)

unsafePtr 05.07.2016 11:27

Базовая структура приложения
 
Вложений: 1
Всем привет. Дней 5 уже плотно налегаю на Angular, прохожу обучающие материалы с нескольких сайтов, по тому у меня начинает в голове вариться каша.
В частности использую следующий style-guide
Пытаюсь правильно раздробить приложение на части, но пока всё тщетно. По не понятной мне причине шаблон контроллера не хочет отображаться.

В index.html исть следующий элемент:
<div ng-view></div>

Сам контроллер
angular
    .module('adminPanel')
    .controller('orderController', orderController);

orderController.$inject = ['orderService', 'logger'];

function orderController(orderService, logger) {
    // vm - View Model
    var vm = this;

    vm.orders = [];

    load();

    function load() {
        return getOrders()
            .then(function () {
                logger.info('Orders were loaded')
            });
    }

    function getOrders() {
        return orderService
            .getOrders()
            .then(function (data) {
                vm.orders = data;
                return vm.orders;
            });
    }
}

View:
<div ng-repeat="order in vm.orders">
    {{order.id}}
</div>

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

destus 05.07.2016 13:13

Почему модуль без зависимостей объявляется? Он уже где-то был раньше объявлен? Я за основу беру вот эту структуру https://github.com/angular/angular-p...ree/master/app, то есть компонент со своим шаблоном в отдельной папочке.

И вместо такого
orderController.$inject = ['orderService', 'logger'];

использую это https://github.com/olov/ng-annotate в системе сборки проекта.

unsafePtr 05.07.2016 13:25

Да, он был раньше объявлен в app.config. И уже в других фаилах используем get нашего модуля.
angular
    .module('adminPanel', [
        'ngRoute'
    ])
    .config(configRoutes);

function configRoutes($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'app/components/orderView.html',
            controller: 'orderController',
            controllerAs: 'order'
        })
        .otherwise({
            redirectTo: '/'
        });
}

destus 05.07.2016 13:36

controllerAs: 'order'

<div ng-repeat="order in vm.orders">

конфликтов быть не может?

unsafePtr 05.07.2016 14:26

Цитата:

Сообщение от destus (Сообщение 421329)
controllerAs: 'order'

<div ng-repeat="order in vm.orders">

конфликтов быть не может?

Допустим в рутинге у меня прописано следущее:
template: '<div ng-repeat="ord in order.orders">{{ord.id}}</div><h1>{{order.smth}}</h1>',
controller: 'orderController',
controllerAs: 'order'

В контроллере есть следующие данные:
vm.orders = [];
vm.smth = 'smth to test';

В консоли при обновлении страницы отображается:
Код:

Info:Orders were loaded angular.js:13708:18
not well-formed order.json:1:1

При этом json выглядит так:
Код:

{
  "id": "1",
  "name": "someOrder"
}

На странице order.smth отображается, а ord.id нет.

destus 05.07.2016 15:01

Вложений: 1
unsafePtr,
В коде много ошибок было, отправляю исправленную версию во вложении.
Вот так выглядит https://postimg.org/image/askgw48n5/

unsafePtr 05.07.2016 15:35

Большое Вам спасибо! Подскажите, пожалуйста, хорошие обучающие материалы по Angular.

destus 05.07.2016 18:24

unsafePtr,
Лучшее и актуальное что видел http://www.angularjsbook.com/angular-basics/chapters/ + гайд на офф.сайте.


Часовой пояс GMT +3, время: 18:41.