각진 컴포넌트 기반의 접근방식과 라우터에서의 해결 능력으로 작업

각진 컴포넌트 기반의 접근방식과 라우터에서의 해결 능력으로 작업

그래서 저는 각도에서 컴포넌트 기반 접근방식을 사용하고 있습니다. 예를 들어 A 명령어가 있다고 가정해 보겠습니다.<home></home>;

import template from  './home.html';
import controller from './home.controller.js';

angular.module('myApp')
   .directive('home', homeDirective);

let homeDirective = () => {
    return {
        restrict: 'E',
        template, 
        controller,
        controllerAs: 'vm',
        bindToController: true
    };
};

이제 컴포넌트를 사용할 수 있게 되었습니다.<home></home>다음과 같이 라우팅합니다.

angular.module('myApp')
    .config(($routeProvider) => {
        $routeProvider.when('/', {
            template: '<home></home>'
        })
    })

저는 이 접근방식을 매우 좋아합니다만, 「구」의 어프로치에서는, 약속이 해결되었을 때만, routeconfig 로 「해결」을 사용해 컴포넌트를 렌더링하는 것에 익숙해져 있었습니다.

angular.module('myApp')
    .config(($routeProvider) => {
        $routeProvider.when('/', {
            templateUrl: './home.html',
            controller: './home.controller.js',
            resolve: {
            message: function(messageService){
                return messageService.getMessage();
            }
        })
    })

질문.

각도에서 컴포넌트 기반의 접근방식을 사용하여 해결하려면 어떻게 해야 합니까?aaj

이에 대해서는 닫힌 문제가 있습니다.지침에 대한 해결 옵션을 지원합니다.

결론은 임의의 지시어가 비동기적으로 로드되는 것을 원치 않는다는 것입니다. 왜냐하면 너무 많은 깜박임이 발생하기 때문입니다.

다행인 것은 Angular 2가 DI 레이어에서 이를 지원한다는 것입니다.이는 응집력이 뛰어나고 복잡성이 크게 증가하지 않습니다.

Angular 1.x에서는 메시지를 가져오는 곳의 정보가 포함된 디렉티브를 어트리뷰트하여 컨트롤러의 비동기 로드를 처리할 수 있습니다.이렇게 하면 멋진 로더 화면도 표시할 수 있습니다.

angular.module('myApp')
    .config(($routeProvider) => {
        $routeProvider.when('/', {
            template: '<home my-datasource="feed1"></home>'
        }).when('/other', {
            template: '<home my-datasource="feed2"></home>'
        })
    })
    .factory('DataSources', (messageService) => {
        return {
            feed1: messageService.getMessage,
            feed2: messageService.getError
        };
    });

또는 원한다면message항상 같은 근원으로부터, 당신은 타버릴 수 있다.messageService.getMessage().then(...)컨트롤러에 접속합니다.

약속이 해결되기 전에 지시문이 표시되지 않도록 하려면 처음에 false로 설정된 범위 변수를 입력한 다음 해결 시 true로 설정할 수 있습니다.예를 들어 다음과 같습니다.

app.controller('HomeController', ($scope, messageService) => {
   $scope.loaded = false;
   messageService.getMessage().then(message => {
       ...
       $scope.loaded = true;
   });
   ...
});

로딩될 때까지 명령어를 숨깁니다.ng-if="loaded"루트 요소에 있습니다.네, 너무 많은 사용자 코드이지만 최소한 모든 것을 제어할 수 있습니다.

결과적으로 각도 $routeProvider는 해결된 로컬을 $routeChangeSuccess 이벤트(nextRoute.locals)로 전달합니다.따라서 루트 변경을 리슨하여 로컬을 공개하는 서비스를 만들 수 있습니다.

angular.module('myApp', ['ngRoute'])
.factory('$routeLocals', function($rootScope) {
  var locals = {};
  $rootScope.$on('$routeChangeSuccess', function(_, newRoute) {
    angular.copy(newRoute.locals, locals);
  });
  return locals;
})
.run(function($routeLocals) {});

그러면 $route를 주입할 수 있습니다.지역 주민들이 당신의 지시를 받아 사용합니다.

예: http://codepen.io/fbcouch/pen/eJYLBe

https://github.com/angular/angular.js/blob/master/src/ngRoute/route.js#L614

Angular 1.x에서 일부 데이터가 ajax 등에서 my directive bindings(=')로 왔을 때 나는 이 바인딩을 directive로 지켜보았다.많은 stackoverflow 토픽이나 블로그를 체크하고 데이터 바인딩에 관한 모든 글을 감시하지만 도움이 되지 않습니다.지시는 표시되지 않지만 데이터가 오는 것을 직접 눈으로 확인했습니다.

만.resolve되지 않은동작처럼 입니다.다른 경우에는 정의되지 않은 동작처럼 보이기 때문입니다.디렉티브, 데이터 셋업은 OK입니다만, 디렉티브가 렌더링되지 않았습니다(단순한 경우 ng-if 또는 ng-show를 사용하여 숨기지 않습니다).

자세한 내용은 이쪽에서 보실 수 있습니다.

언급URL : https://stackoverflow.com/questions/34044741/angular-component-based-approach-and-working-with-resolve-in-router