본문 바로가기
Frontend/angularjs

[Hoon] AngularJS - Componets, Directives, Localization Example

by 플로거 2018. 12. 31.

Directives

Directives are a unique and powerful feature available in AngularJS. Directives let you invent new HTML syntax, specific to your application.
 

Reusable Components

We use directives to create reusable components. A component allows you to hide complex DOM structure, CSS, and behavior. This lets you focus either on what the application does or how the application looks separately.
 

Localization

An important part of serious apps is localization. AngularJS's locale aware filters and stemming directives give you building blocks to make your application available in all locales.

[index.html]

  1. <!doctype html>
  2. <html ng-app="app">
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
  5. <script src="components.js"></script>
  6. <script src="app.js"></script>
  7. </head>
  8. <body>
  9. <tabs>
  10. <pane title="Localization">
  11. <span>Date: {{ '2012-04-01' | date:'fullDate' }}</span><br>
  12. <span>Currency: {{ 123456 | currency }}</span><br>
  13. <span>Number: {{ 98765.4321 | number }}</span><br>
  14. </pane>
  15. <pane title="Pluralization">
  16. <div ng-controller="BeerCounter">
  17. <div ng-repeat="beerCount in beers">
  18. <ng-pluralize count="beerCount" when="beerForms"></ng-pluralize>
  19. </div>
  20. </div>
  21. </pane>
  22. </tabs>
  23. </body>
  24. </html>

[components.js]

  1. angular.module('components', [])
  2.  
  3. .directive('tabs', function() {
  4. return {
  5. restrict: 'E',
  6. transclude: true,
  7. scope: {},
  8. controller: function($scope, $element) {
  9. var panes = $scope.panes = [];
  10.  
  11. $scope.select = function(pane) {
  12. angular.forEach(panes, function(pane) {
  13. pane.selected = false;
  14. });
  15. pane.selected = true;
  16. }
  17.  
  18. this.addPane = function(pane) {
  19. if (panes.length == 0) $scope.select(pane);
  20. panes.push(pane);
  21. }
  22. },
  23. template:
  24. '<div class="tabbable">' +
  25. '<ul class="nav nav-tabs">' +
  26. '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
  27. '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
  28. '</li>' +
  29. '</ul>' +
  30. '<div class="tab-content" ng-transclude></div>' +
  31. '</div>',
  32. replace: true
  33. };
  34. })
  35.  
  36. .directive('pane', function() {
  37. return {
  38. require: '^tabs',
  39. restrict: 'E',
  40. transclude: true,
  41. scope: { title: '@' },
  42. link: function(scope, element, attrs, tabsController) {
  43. tabsController.addPane(scope);
  44. },
  45. template:
  46. '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
  47. '</div>',
  48. replace: true
  49. };
  50. })

[app.js]

  1. angular.module('app', ['components'])
  2.  
  3. .controller('BeerCounter', function($scope, $locale) {
  4. $scope.beers = [0, 1, 2, 3, 4, 5, 6];
  5. if ($locale.id == 'en-us') {
  6. $scope.beerForms = {
  7. 0: 'no beers',
  8. one: '{} beer',
  9. other: '{} beers'
  10. };
  11. } else {
  12. $scope.beerForms = {
  13. 0: 'žiadne pivo',
  14. one: '{} pivo',
  15. few: '{} pivá',
  16. other: '{} pív'
  17. };
  18. }
  19. });

출처 - angularjs.com

 

bit.ly/3fXOzon

 

인프런 인강 55%할인 쿠폰 - 커피한잔으로 Vue.js 핵심 강의!

인프런 인터넷 강의 55% 할인 쿠폰 - 커피한잔(5000원)으로 배우는 Vue.js 핵심 강의! 모바일 환경에서도 강의를 수강할 수 있도록 강의가 많이 개선되었습니다. 인프런 인터넷 강의 선착순 100명 55% �

plogger.tistory.com

bit.ly/2TtRHis

 

[Vue.js 입문] 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런

이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼 수 있습니다. 이 강의는 1부 기본기 이며, 2부와 3부를 통해서 실제 Real 웹앱을 구현해 보도록 하겠습니다. 초급 ��

www.inflearn.com

 

반응형
저작자표시 비영리 변경금지

'Frontend > angularjs' 카테고리의 다른 글

[Hoon] AngularJS Seed - the seed for AngularJS apps  (0) 2019.01.04
[Hoon] AngularJS - Angularjs Tutorial  (0) 2019.01.04
[Hoon] AngularJS - PhoneCat Tutorial App  (0) 2019.01.03
[Hoon] AngularJS - Create Components  (0) 2018.12.31
[Hoon] AngularJS - The AngularJS  (0) 2018.12.31

관련글

댓글

티스토리툴바