组件在调用angularjs之前加载

我正在研究angular js组件有两个组件，单击它们各自的按钮时将调用它们

问题：当页面加载时，两个组件都被初始化，但实际上，当我单击相应的组件时，它们应该被初始化 例如：

index.html

    <div class='breadcrumbs'>
   <div class='inner'>
      <ul class='cf' style="    margin-top: 0px;">
         <li ng-click="WizardsViewerCtrl.createFirst()">

         </li>
         <li ng-click="WizardsViewerCtrl.createSecond()">
         <span>Arrange Questions</span> </a>

         </li>

      </ul>
   </div>
</div>

      <div ng-show="viewFirstRoute">
         <first-component></first-component>
      </div>
      <div ng-show="viewSecondRoute">
         <second-component></second-component>

      </div>

问题是当加载此页面index.html时，两个组件都被初始化

first.component.js

$scope.viewFirstRoute=false;
$scope.viewSecondRoute=false;



function createFirst() {

    $scope.viewFirstRoute=true;
    $scope.viewSecondRoute=false;


}

function createSecond() {
   $scope.viewFirstRoute=false;
    $scope.viewSecondRoute=true;


}

angular
.module('AOTC')
.component('firstComponent', {
        templateUrl: 'first.html',
        controllerAs: 'firstCtrl',
        controller:(function ($scope) {
            console.log("first component loaded");//it prints while index.html is loaded even i didn't clicked on this component
           })});

angular
.module('AOTC')
.component('secondComponent', {
        templateUrl: 'second.html',
        controllerAs: 'secondCtrl',
        controller:(function ($scope) {
            console.log("second component loaded");//it prints while index.html is loaded even i didn't clicked on second component
           })});

second.component.js

$scope.viewFirstRoute=false;
$scope.viewSecondRoute=false;



function createFirst() {

    $scope.viewFirstRoute=true;
    $scope.viewSecondRoute=false;


}

function createSecond() {
   $scope.viewFirstRoute=false;
    $scope.viewSecondRoute=true;


}

angular
.module('AOTC')
.component('firstComponent', {
        templateUrl: 'first.html',
        controllerAs: 'firstCtrl',
        controller:(function ($scope) {
            console.log("first component loaded");//it prints while index.html is loaded even i didn't clicked on this component
           })});

angular
.module('AOTC')
.component('secondComponent', {
        templateUrl: 'second.html',
        controllerAs: 'secondCtrl',
        controller:(function ($scope) {
            console.log("second component loaded");//it prints while index.html is loaded even i didn't clicked on second component
           })});

---

总结：当我单击相应组件时，同一路由上的两个组件必须初始化，但是只要加载路由，就会加载组件它不关心单击，请参见JS文件中的注释使用ng if而不是ng show。它应该解决这个问题

<div ng-if="viewFirstRoute">
         <first-component></first-component>
 </div>
 <div ng-if="viewSecondRoute">
     <second-component></second-component>
  </div>

ng show：它将向DOM添加组件，但将其显示属性设置为“无”。
ng if:将有条件地从DOM中添加或删除组件