1. Dom
  2. Pytanie i odpowiedź
  3. Nie zanieczyszczając globalnie angularjs

Nie zanieczyszczając globalnie angularjs

2012-08-25 11 views
22

W angularjs definiujemy nasze kontrolery jako window. Chociaż nie powoduje to konfliktu nazw z innymi modułami i wtyczkami js, nadal nie jest to dobrą praktyką: pojedyncza aplikacja powinna udostępniać pojedynczy obiekt globalnej przestrzeni nazw.Nie zanieczyszczając globalnie angularjs

to zwykły sposób, określony w window:

function UserController($scope) { ... }

HTML:

<div ng-controller="UserController">

To jest to, co myślę:

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

Więc w tym przypadku, powinien uruchamiać kontroler z html tak jak ten

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

Co myślisz?

Źródło

2012-08-25 Umur Kontacı

Odpowiedz

22

Jednym ze sposobów jest zdefiniowanie go w obrębie samego Kąta, na przykład tak, jak opisałeś. Innymi słowy:

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

I potwierdziły powyższy sposób nie zanieczyszcza globalnej przestrzeni nazw.

Edycja: Nie musisz również używać <div ng-controller="myApp.UserController">, ponieważ możesz zdefiniować myApp w atrybucie ng-app: <body ng-app="myApp"> W ten sposób możesz wywołać ng-kontroler bez prefiksowania myApp za każdym razem.

Źródło

2012-08-25 13:12:44 Hengjie

+1

Nie wiedziałem, że '' module' obiekt posiada funkcję controller' wewnątrz, ale sprawia, że ​​wiele sensu =) Dzięki. –

+1

Angular wymaga lepszej dokumentacji. To świetny framework, ale ma stromą krzywą uczenia się. –

+0

Dziękujemy za edycję, jak korzystać z modułu za pomocą ng-app, a następnie za pomocą ng-kontrolera – Alex

1

Najczystszym sposobem definiowania kontrolerów jest 1 na plik. Każdy plik powinien być zawarty w bezpośrednio wywołanym wyrażeniu funkcji (IIFE) lub zamknięciu, które pozwala mu mieć własne zmienne lokalne bez zanieczyszczania zasięgu globalnego. To jest podejście, które podejmuję w moich projektach:

my-app.js - Plik definicji głównego modułu - Głównym celem tego pliku jest zdefiniowanie modułu aplikacji i jego zależności, zdefiniowanie routingu (jeśli jest używany routing), oraz konfiguruj dostawców. W najprostszej postaci wygląda to tak:

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

pewne-cecha/Some-feature.js - funkcja modułu pliku definicji - Plik ten definiuje modułu do funkcji i wszelkimi zależnościami, że ta funkcja wymaga. Może to być dowolne logiczne grupowanie, a nie tylko funkcja. Dzięki temu bardzo łatwo można w razie potrzeby przenieść tę funkcję do innego modułu lub aplikacji.

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

pewne-cecha/Some-funkcje controller.js - sterownik wymagany dla funkcji - Jeśli funkcja zawiera wiele kontrolerów, nazwa bardziej opisowy byłoby pozwala zakładać tej funkcji wymaga jedynie 1 kontroler potrzebne, ale.

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

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

index.html - Strona plik html - Dość wymowne

<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>

Źródło

2014-11-26 09:35:56 btesser

0

Jak sugeruje btesser kontrolerów pisania w oddzielnych plikach i funkcji oraz definiując swoje metody w prototypie funkcji sterownika jest najlepszym rozwiązaniem dla Aplikacje AngularJS. Możesz użyć zamknięcia lub IIFE, aby zapobiec zanieczyszczaniu globalnej przestrzeni nazw, które ujawni twoje funkcje tylko do bieżącego kontekstu.

(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> 
 
    
 

 
\t 
 
</body>

Źródło

2014-12-17 16:38:58 sgimeno

Powiązane problemy

 Powiązane problemy