Angularjs Master-Detail с использованием factory & routeParams: как написать detailcontroller

0

Во-первых, я новичок в stackoverflow & angularjs, поэтому простите меня, если мой вопрос ужасен.

для простого новостного приложения я делаю подробный просмотр master- с angularjs, проблема: я не могу получить подробный вид для работы, мастер отлично работает, ссылки правильные, но тогда я не могу получить json внутри detailview. Я не вижу, как я должен установить routeParams и заводскую инъекцию прямо внутри контроллера детали. вот что у меня есть:

index.html

    <!doctype html>
<html lang="en" ng-app="test">
<head>
    <meta charset="UTF-8">
    <title>angular master-detail live-data test</title>

</head>
    <body>
        <div class="main"> 

            <div ng-view></div>

        </div> <!--/main-->

        <script src="angular/angular.js"></script>
        <script src="angular/angular-route.js"></script>

        <script src="script/app.js"></script>
        <script src="script/controllers/newsController.js"></script>
        <script src="script/services/newsFactory.js"></script>
        <script src="script/constants.js"></script>

    </body>
</html>

завод

    (function () {
    'use strict';

    angular.module('test')
        .factory('newsFactory', newsFactory);


    newsFactory.$inject = ['$http', 'GLOBALS'];
    function newsFactory($http, GLOBALS) {
        var factory = {};

        factory.getItems = function () {
            return $http({
                method: 'GET',
                url: GLOBALS.newsUrl
            });
        };
        return factory;
    }   
})();

и, наконец, контроллеры

 // newsController.js << MASTER
(function () {
    'use strict';


    angular.module('test')
        .controller('newsController', newsController);

    newsController.$inject = ['newsFactory'];
    function newsController(newsFactory) {
        var vm = this;                                  

        newsFactory.getItems()          
            .success(function (items) {
                vm.items = items;
                })
                .error(function (err) {
                    alert('something went wrong!')
                });
    }
})();

// newsController.js << DETAIL
(function () {
    'use strict';

    angular.module('test')
        .controller('newsItemController', newsItemController);

    newsItemController.$inject = ['$routeParams', 'newsFactory'];

    function newsItemController($routeParams, newsFactory) {
        var vm = this,
            id = $routeParams.id;
        vm.item = newsFactory.getItem = function (id) {
            return items[id -1];
        }

    }
})();

Я вижу, что проблема связана с routeParams в сочетании с инъекцией фабрики, но я не вижу, как это сделать. Благодарю вас в forehand

app.js

var app = angular.module('test', ['ngRoute'])
    .config(moduleConfig);

    moduleConfig.$inject = ['$routeProvider'];

    function moduleConfig($routeProvider) {
        $routeProvider.
        when('/', {
         templateUrl: 'partials/home.html'
        })
        .when('/home', {
          templateUrl: 'partials/home.html'
        })
        .when('/news/:id', {
          templateUrl: 'partials/news.html'//,
        })
        .otherwise({
          redirectTo: '/'  
        })
    }

constants.js

(function () {
    'use strict';

    angular.module('test')
        .constant('GLOBALS', {
                newsUrl: 'data/news.json'
            });
})();
  • 0
    Возможная проблема: newsItemController.js не включен в HTML.
  • 0
    он внутри того же файла newsController.js (действительно, запутанный комментарий внутри кода, просто исправил его, спасибо, что заметил)
Показать ещё 2 комментария
Теги:

2 ответа

0
Лучший ответ

В вашем newsItemController вы создаете новую функцию в newsFactory. Это, очевидно, неверно, потому что вы также получаете items которые не существуют в newsItemController.

Ваш завод должен быть единственным местом, где вы держите items и где вы предоставляете методы для их доступа:

(function () {
    'use strict';

    angular.module('test').factory('newsFactory', newsFactory);

    newsFactory.$inject = ['$http', 'GLOBALS'];

    function newsFactory($http, GLOBALS) {
        var newsItems = [];
        return {
            getItems: function () {
                return $http({
                    method: 'GET',
                    url: GLOBALS.newsUrl
                }).success(function (items) {
                    newsItems = items;
                    return newsItems;
                }); 
            },
            getItem: function (id) {
                return newsItems[id];
            }
        };
    }   
})();

Вы все равно сможете сделать все то же самое в newsController но в newsItemController вы бы назвали:

vm.item = newsFactory.getItem(id);

Обновление: полный NewsItemController

(function () {
    'use strict';

    angular.module('test')
        .controller('newsItemController', newsItemController);

    newsItemController.$inject = ['$routeParams', 'newsFactory'];

    function newsItemController($routeParams, newsFactory) {
        var vm = this;
        var id = $routeParams.id;
        vm.item = newsFactory.getItem(id);
    }
})();
Поделиться
  • 0
    ошибка, которую я сделал, явно в новостном контроллере newsItem, и это имеет смысл, можно ли будет показать, как будет выглядеть newsItemController в итоговом сообщении? это было бы очень полезно, тогда я могу изучить рабочую базовую настройку. Последнее, что я прошу вас, спасибо !!!
  • 0
    Я добавил контроллер в ответ.
Показать ещё 8 комментариев
0

Думаю, вам нужно настроить свой угловой модуль с помощью сервиса $ routeProvider. Я предполагаю, что вы зарегистрировали свой модуль в app.js, который здесь не указан.

в этом js файле вы можете что-то поместить..

angular.module('test',[ngRoute])
.config(['$routeProvider'function($routeProvider){

           when('/main', {
                    templateUrl: 'main.html',
                    controller: 'newsController'
              }).
           when('/details', {
                    templateUrl: 'details.html',
                    controller: 'newsItemController'
              }).
otherwise({
                    redirectTo: '/main'
                });

}]);
Поделиться
  • 0
    правда, извините, вот оно, я вызываю контроллер по частям примерно так: <div ng-controller = "newsItemController as newsItemCtrl"> Я сразу обновлю оригинальный пост с app.js

Ещё вопросы

Сообщество Overcoder
Наверх
Меню