Не загрязняющий глобальный с угловыми

В angularjs мы определяем наши контроллеры в window. Хотя это не приведет к конфликтам имен с другими модулями и плагинами js, это по-прежнему не является хорошей практикой: одно приложение должно выставлять один объект в глобальное пространство имен.

Это обычный способ, определенный в window:

function UserController($scope) { ... }

HTML:

<div ng-controller="UserController">

Это то, о чем я думаю:

myApp.UserController = function ($scope) { ... };

Итак, в этом случае я должен запускать контроллер из html, как этот

<div ng-controller="myApp.UserController">

Как вы думаете?

Ответы

Ответ 1

Один из способов обойти это - определить его в самом Angular, таком как описанный вами. Другими словами:

angular.module('YourApp').controller('ControllerName', function($scope) {})

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

Изменить: вам также не нужно использовать <div ng-controller="myApp.UserController">, поскольку вы можете определить myApp в атрибуте ng-app: <body ng-app="myApp"> Таким образом, вы можете вызывать ng-контроллер без префикса myApp каждый раз.

Ответ 2

Самый чистый способ определения контроллеров - 1 на файл. Каждый файл должен быть обернут с помощью выведенного сразу выражения функции (IIFE) или закрытия, что позволяет ему иметь свои собственные локальные переменные без загрязнения глобальной области. Это подход, который я использую для своих проектов:

my-app.js - Файл определения первичного модуля. Основной целью этого файла является определение прикладного модуля и его зависимостей, определение маршрутизации (если используется маршрутизация) и настройка поставщиков. В простейшей форме это выглядит так:

(function (angular) {
  angular.module('myApp', ['myApp.someFeature']);
}(angular));

some-feature/some-feature.js - файл определения функционального модуля - этот файл определяет модуль для функции и любые зависимости, которые требуется этой функции. Это может быть любая логическая группировка, а не только функция. Это упрощает перенос функции в другой модуль или приложение, если это необходимо.

(function (angular) {
  angular.module('myApp.someFeature', []);
}(angular));

Some-feature/some-feature-controller.js - контроллер, необходимый для этой функции. Если функция включала несколько контроллеров, потребуется более описательное имя, но позволяет предположить, что для этой функции требуется только один контроллер.

(function (angular) {
  function SomeFeatureController($scope) {
    ...
  }

  angular
    .module('myApp.someFeature')
    .controller('SomeFeatureController', SomeFeatureController);
}(angular));

index.html - Файл html страницы - Довольно самоочевидный

<html ng-app="myApp">
  <head>
    <title>My Angular App</title>
    <!-- Note: Angular and jQuery (if used) go in head so they delay view loading -->
    <script type="text/javascript" language="javascript" src="angular.js"></script>
  </head>
  <body ng-controller="SomeFeatureController">
    Content here....
    <!-- Note application files go at the end of the body so they do not delay view loading -->
    <script type="text/javascript language="javascript src="my-app.js">
    <script type="text/javascript language="javascript src="some-feature/some-feature.js">
    <script type="text/javascript language="javascript src="some-feature/some-feature-controller.js">
  </body>
</html>

Ответ 3

Как было рекомендовано btesser для написания контроллеров в отдельных файлах и функциях и определения его методов в прототипе функции контроллера, это лучшая практика для приложений AngularJS. Вы можете использовать закрытие или IIFE, чтобы предотвратить загрязнение глобального пространства имен, оно будет раскрывать ваши функции только в текущем контексте.

(function(){
'use strict';

angular.module('myApp', [])
.controller('MyAppCtrl', MyAppCtrl)

;
  
function MyAppCtrl(){
  this.greeting = 'I\'m app ctrl';
}
  
MyAppCtrl.prototype.hello = function(){
  alert(this.greeting);
}

})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyAppCtrl as ctrl">
  <pre>{{ctrl | json}}</pre>
  <button ng-click="ctrl.hello()">Hello!</button>
</div>
  

	
</body>