Идентификатор AngularJS уже объявлен как ошибка (с оператором `let`)

Question

У меня проблема с AngularJS, связанная с повторным использованием имен переменных в двух шаблонах.Упрощенная версия моей настройки выглядит следующим образом: две страницы, объявленные в route.js

$routeProvider.when('/a', {
  templateUrl: 'a.html'
})
.when('/b', {
  templateUrl: 'b.html'
})

на каждой странице (a.html и b.html), имеют тег сценария, такой как

<script type="text/javascript">
  let foo = 5;
</script>

есть также навигационное меню для навигации по страницам.Проблема заключается в том, что при переходе с одной страницы на другую появляется ошибка

Uncaught SyntaxError: Identifier 'foo' has already been declared

Я знаю, что могу просто изменить имя переменной, но я хочу знать, почему этопроисходит потому, что мой инстинкт состоит в том, что этого не должно быть.Я ошибаюсь, используя теги сценария с Angular?Это может быть вызвано чем-то другим?Спасибо

Answer 1

Здесь:

<script type="text/javascript">
  let foo = 5;
</script>

Вы объявляете переменную в глобальной области, и когда вы запускаете второй маршрут, вы переделываете переменную, которая уже находится в той же области.

Избегайте использования тега script и используйте локальную область контроллера, объявите там переменные, и у вас не возникнет никакого конфликта.

function aController (){
  let foo = 5;
}

function bController (){
  let foo = 5;
}

В качестве альтернативы, если вы хотите, чтобы блок сценария переносил код вIIFE, чтобы не связываться с глобальным охватом.

<script type="text/javascript">
  (function(){
     let foo = 5;
  })()
</script>