なぜanglejsコントローラーが2回ロードされるのですか

Question

routeProviderを使用して表示するコントローラーをバインドしています。ng-controller私のビューではコントローラーが2回ロードされていますが、多くのソリューションを検索しました。ここで

$routeProvider.when("/home", { 
    controller: "homeController", 
    templateUrl: "app/views/home.html" 
}).when("/login", { 
    controller: "loginController", 
    templateUrl: "app/views/login.html" 
}).when("/regcars", { 
    controller: "RegCarsController", 
    templateUrl: "app/views/client/RegCars.html" 
}).otherwise({ redirectTo: "/home/" }); 

は、テンプレート（ビュー）

<div class="col-md-6 box box-success pull-left"> 
    <div class="box-header with-border"> 
     <h3 class="box-title">My cars</h3> 
     <div class="box-tools pull-right"> 
      <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> 
     </div> 
    </div> 
    <div class="box-body"> 
     {{CarName}} 
    </div> 
</div> 

されており、ここで私のコントローラは、二度の警告を示す私の上記のコードで

app.controller('RegCarsController', function ($scope) { 
    $scope.CarName = "MyCar"; 
    alert('MyCar'); 
}); 

です。私は、ビューを呼び出すためのリンクを持っているの下には、hrefのリンク

<a href="#/regcars/"> 
    <i class="fa fa-car fa-2x"></i> <span>My Cars</span> 
</a> 

Answer 1

コントローラが何度も呼ばれる概念のいくつかの証拠の最後にスラッシュでとしてみました。奇妙な。

一方、 - the same code on JSFiddle - コントローラが1回だけ実行/起動されることを示します。

angular.module('app', ['ngRoute']).config(function($routeProvider) { 
 
    $routeProvider.when("/home", { 
 
     controller: "homeController", 
 
     templateUrl: "app/views/home.html" 
 
    }).when("/regcars", { 
 
     controller: "RegCarsController", 
 
     templateUrl: "app/views/client/RegCars.html" 
 
    }).otherwise({ redirectTo: "/home" }); 
 
    }) 
 
    .run(function($templateCache) { 
 
    $templateCache.put('app/views/home.html', '<div>home tempalte</div>'); 
 
    $templateCache.put('app/views/client/RegCars.html', '<div>cars template, car name: {{ CarName }}</div>'); 
 
    }) 
 
    .controller('homeController', function() {}) 
 
    .controller('RegCarsController', function($scope) { 
 
    $scope.CarName = "MyCar"; 
 
    console.log('Called many times') 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script> 
 

 
<div ng-app='app'> 
 
    <ul><li><a href='#/'>Home</a></li><li><a href='#/regcars'>Cars</a></li></ul> 
 
    <ng-view></ng-view> 
 
</div>