Of Stack

Analysis of Implementation Method of Angular Component Management

  • 2021-08-05 08:21:33
  • OfStack

This paper analyzes the implementation method of Angular component management with examples. Share it for your reference, as follows:

When making sass product pages, header and footer of each page are often the same, and the pages I made recently, such as datetimepicker components, are actually reusable codes, so if these common UI components can be extracted, it will be much more convenient for maintenance! !

angular framework on the support of this component-based management, but also have advantages and disadvantages, I will first implement the method ha!

index. html: No routing is used, so js is imported from src 


<head>
  <title>template Modularization </title>
  <script type="text/javascript" src="js/lib/jquery.min.js"></script>
  <script type="text/javascript" src="js/lib/angular.min.js"></script>
  <script type="text/javascript" src="js/angular-util.js"></script>
  <script type="text/javascript" src="js/header.js"></script>
  <!--  Single page loading  -->
  <script type="text/javascript" src="js/index.js"></script>
</head>
<body ng-app="frameApp" ng-controller="frameCtrl">
  <header frame-header></header>
  <div ng-click="a1()">click</div>
  <div>{{ default }}</div>
</body>

header. js: The header component is encapsulated with a closure to point to the template template, where A refers to the attributes of frame-header in html above, and link can also call methods in the current scope 


(function () {
  var header = angular.module("header",[]);
  header.directive('frameHeader',function(){
    return {
      restrice: 'A',
      templateUrl: 'template.html',
      replace: false,
      link: function ($scope, iElm, iAttrs) {
        $scope.navigateTo = function(){
          console.log($scope.aa)
        }
      }
    }
  });
})();

header. html: In the template section, I simply wrote a navigation 


<ul>
  <li ng-click="navigateTo('index')"><a href="index.html" rel="external nofollow" > Navigation 1</a></li>
  <li><a href="page1.html" rel="external nofollow" > Navigation 2</a></li>
  <li> Navigation 3</li>
  <li> Navigation 4</li>
</ul>

index. js: Introducing header module 


var myApp = angular.module("frameApp",['utilModule','header']);
myApp.controller('frameCtrl',
  ['$scope','utilService',
  function($scope,utilService){
    $scope.aa = 'yyyyyyyyyyy'
    $scope.a1 = function(){
      utilService.lemon()
    };
    $scope.default = 'this is default'
  }]);

In this way, it's done! Each page only needs <header frame-header></header> This tag can introduce head navigation!

However, I personally do not recommend the introduction of header and footer, because in this case, it is equivalent to loading templat once per page. html affects the speed very much. I suggest that datetimepicker should be used when introducing such components! Because this widget is loaded on demand, it needs to be reloaded without affecting the page response efficiency.

More readers interested in AngularJS can check the topics of this site: "Summary of AngularJS Instruction Operation Skills", "Introduction and Advanced Tutorial of AngularJS" and "Summary of AngularJS MVC Architecture"

I hope this article is helpful to everyone's AngularJS programming.

Related articles: