Anglerjs에서 워드 클럭 생성기 만들기

Question

이전에 모범 사례에 따라 angularjs 방식으로 작업하기 위해 이식하기를 원하는 매우 간단한 Wordcloud 생성기를 만들었습니다.

내가 텍스트의 셀렉틴을 포함하는 변수를했다 :

이

내가 JQuery와 프로젝트에서 이전에 무슨 짓을 내가 다음 단어의 배열로 텍스트 변수를 분할

var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit........Suspendisse fermentum venenatis tincidunt."; 

var word_list = text.split(/\W+/); 

다음은 내 클라우드를 채우는 곳입니다. I 임의로 다음

function populateKeywordCloud(wordCount, selector) { 
    for (i = 0; i < wordCount ; i++) { 
     wordSize = Math.floor((Math.random() * 10) + 1); 
     $(selector + ' #keyword_cloud .dataBoxContent').append('<span class="cloud_' + wordSize + '" title="Keyword wordSize ' + wordSize + ' times" ">' + word_list[i] + '</span> '); 
    } 
} 

이 구름은으로 초기화되는 폰트 크기 (클래스 = "cloud_ '+ WORDSIZE +'")을 설정하는 CSS 클래스에 대응하는 단어 인 Math.random로되어야 크기를 할당 다음과 같은 방법 :

$(document).ready(function() { 
    populateKeywordCloud(30, '.summary_page'); 
} 

그럼 내 질문은 내가 어떻게 angularjs 방식으로합니까?

사용자 지정 지시문을 만들고 모든 내 워드 클록 논리를 수행하는 링크 기능을 만듭니다. templateUrl 아래에있는 템플릿 파일은 wordcloud 데이터를 가져 와서 ng-repeat를 사용하여 클라우드를 채 웁니다.

또는 데이터 생성을 담당하는 워드 클라우드 컨트롤러에서 키워드 데이터를 가져 오는 지시문을 작성합니까? 지시어에 의해 사용 되는가?

Answer 1

각도에서는 선택기를 잊어야합니다. 대신 컨트롤러 요소를 생각해보십시오. 예를 들어 태그 클라우드가 동적 인 경우 컨트롤러로 포장해야합니다.

<div id="keyword_cloud" ng-controller="tagCloudCtrl"> 
    <div class="dataBoxContent"> 
    <span ng-repeat="word in words" class="cloud_{{ word.size }}" title="Keyword wordSize {{ word.size }} times">{{ word.text }}</span> 
    </div> 
</div> 

이것은 템플릿입니다. $scope의 속성을 반복 할 수있는 ngRepeat 지시어가 tagCloudCtrl입니다. 여기서는 단어의 크기와 텍스트를 평가하기 위해 {{...}}을 직접 사용합니다. 로직을 분리하는 것을 잊지 마세요, 또한

angular.module('tagcloud-app', []) 
    .value('WORD_COUNT', 3) 
    .service('tagService', function() { 
    // Fetch your words here 
    return { 
     getTags: function() { 
     return ['aaaaa', 'bBbb', 'CCC', 'dd']; 
     } 
    }; 
    }) 
    .controller('tagCloudCtrl', ['$scope', 'tagService', 'WORD_COUNT', 
    function($scope, tagService, WORD_COUNT) { 
     var wordSize, word_list = tagService.getTags(); 

     // This will make the "words" array visible from associated template 
     $scope.words = []; 

     for (var i = 0; i < WORD_COUNT; i += 1) { 
     $scope.words.push({ 
      text: word_list[i], 
      size: Math.floor((Math.random() * 10) + 1) 
     }); 
     } 
    } 
    ]); 

:

코드 크기, 우리는이 words 범위 변수를 채우는 당신이 볼 수 있듯이, 나는 태그를 가져올하고 저장하기 위해 별도의 서비스를 만들어 당신의 단어 수. 이렇게하면 앱이 매우 동적이며 유연하고 재사용 할 수 있습니다.

체크 아웃 내 working example on plnkr을 확인하십시오.

notened risto로 지시어를 사용하여 나머지 앱에서 태그 클라우드를 완전히 추상화 할 수 있습니다. 정기적 인 컨트롤러로 편안하게 지내게되면 지침을 확인하십시오. AngularJS's

AngularJS 여행을 즐기십시오!

Answer 2

가능한 한 많은 로직을 캡슐화하는 것이 낫다는 것을 알고 싶습니다. 가능한 경우 논리 내부에있는 모든 지시문을 작성하십시오.

컨트롤러가 필요하다고 생각되면 해당 지시어를 사용하여 컨트롤러에 패키지를 만들어보십시오. 재사용 할 수있게하십시오.