Tutorial 13.3 Components as route templates

-
******************************************INDEX.HTML*****************************************************
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-component-tabs-pane-production</title>
 

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="script.js"></script>
 

 
</head>
<body ng-app="docsTabsExample">
  <my-tabs>
  <my-pane title="Hello">
    <h4>Hello</h4>
    <p>Lorem ipsum dolor sit amet</p>
  </my-pane>
  <my-pane title="World">
    <h4>World</h4>
    <em>Mauris elementum elementum enim at suscipit.</em>
    <p><a href ng-click="i = i + 1">counter: {{i || 0}}</a></p>
  </my-pane>
</my-tabs>
</body>
</html>
********************************************script.js***************************************************

(function(angular) {
  'use strict';
angular.module('docsTabsExample', [])
  .component('myTabs', {
    transclude: true,
    controller: function MyTabsController() {
      var panes = this.panes = [];
      this.select = function(pane) {
        angular.forEach(panes, function(pane) {
          pane.selected = false;
        });
        pane.selected = true;
      };
      this.addPane = function(pane) {
        if (panes.length === 0) {
          this.select(pane);
        }
        panes.push(pane);
      };
    },
    templateUrl: 'my-tabs.html'
  })
  .component('myPane', {
    transclude: true,
    require: {
      tabsCtrl: '^myTabs'
    },
    bindings: {
      title: '@'
    },
    controller: function() {
      this.$onInit = function() {
        this.tabsCtrl.addPane(this);
        console.log(this);
      };
    },
    templateUrl: 'my-pane.html'
  });
})(window.angular);

/*
Copyright 2019 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
********************************************script.js***************************************************

********************************************my-pane.html***************************************************
<div class="tab-pane" ng-show="$ctrl.selected" ng-transclude></div>
********************************************my-pane.html***************************************************

********************************************my-tabs.html***************************************************
<div class="tabbable">
  <ul class="nav nav-tabs">
    <li ng-repeat="pane in $ctrl.panes" ng-class="{active:pane.selected}">
      <a href="" ng-click="$ctrl.select(pane)">{{pane.title}}</a>
    </li>
  </ul>
  <div class="tab-content" ng-transclude></div>
</div>
********************************************my-tabs.html***************************************************

Comments

Post a Comment

Popular posts from this blog

Tutorial 12.12 Creating a Directive that Wraps Other Elements 3

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-directive-transclusion-scope-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script>     </head> <body ng-app="docsIsoFnBindExample">   <div ng-controller="Controller">   {{message}}   <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog(message)">     Check out the contents, {{name}}!   </my-dialog> </div> </body> </html> ******************************************INDEX.HTML***************************************************** ********************************************script.js*****************************...
Read more

Tutorial 12.14 Creating Directives that Communicate

-
******************************************INDEX.HTML***************************************************** <!doctype html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Example - example-directive-tabs-production</title>     <script src="//code.angularjs.org/snapshot/angular.min.js"></script>   <script src="script.js"></script>     </head> <body ng-app="docsTabsExample">   <my-tabs>   <my-pane title="Hello">     <p>Lorem ipsum dolor sit amet</p>   </my-pane>   <my-pane title="World">     <em>Mauris elementum elementum enim at suscipit.</em>     <p><a href ng-click="i = i + 1">counter: {{i || 0}}</a></p>   </my-pane> </my-tabs> </body> </html> ******************************************INDEX.HTML**...
Read more