Non inquinante globale con angularjs

In angularjs, definiamo i nostri controllori in window. Anche se questo non creerebbe conflitti di nomi con altri moduli e plugin js, non è ancora una buona pratica: una singola applicazione dovrebbe esporre un singolo oggetto allo spazio dei nomi globale.Non inquinante globale con angularjs

Questo è il modo consueto, definito in window:

function UserController($scope) { ... }

HTML:

<div ng-controller="UserController">

Questo è ciò che penso:

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

Quindi, in questo caso, dovrebbe iniziare il controller da html come questo

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

Cosa ne pensi?

fonte

2012-08-25 Umur Kontacı

Uno dei modi per aggirarlo è definirlo all'interno di Angular stesso come nel modo in cui hai descritto. In altre parole:

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

mi hanno confermato il metodo di cui sopra non inquina lo spazio dei nomi globale.

Modifica: Non è inoltre necessario utilizzare <div ng-controller="myApp.UserController"> come si può definire myApp nell'attributo ng-app: <body ng-app="myApp"> In questo modo è possibile chiamare il controller ng senza prefisso a myApp ogni volta.

fonte

2012-08-25 13:12:44 Hengjie

Non sapevo che 'oggetto module' ha' funzione controller' all'interno ma fa un sacco di senso =) Grazie. –

Angular necessita di una documentazione migliore. È un ottimo framework, ma ha una curva di apprendimento ripida –

Grazie per la modifica su come utilizzare il modulo con ng-app piuttosto che con ng-controller – Alex

Il modo più semplice per definire i controller è 1 per file. Ogni file deve essere avvolto con un'espressione di funzione immediatamente invocata (IIFE) o chiusura che consente di avere le proprie variabili locali senza inquinare l'ambito globale. Questo è l'approccio che prendo nei miei progetti:

my-app.js - File di definizione del modulo primario - Lo scopo principale di questo file è definire un modulo dell'applicazione e le sue dipendenze, definire il routing (se il routing è in uso), e configurare i provider. Nella sua forma più semplice, che appare così:

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

alcuni di funzionalità/alcune-feature.js - funzione di file di definizione del modulo - Questo file definisce un modulo per una caratteristica e tutte le dipendenze che questa caratteristica richiede. Questo può essere qualsiasi raggruppamento logico, non solo una funzione. Ciò rende molto facile portare la funzione in un altro modulo o applicazione, se necessario.

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

alcuni di funzionalità/alcuni di funzionalità-controller.js - Regolatore necessaria per la funzione - Se la funzione inclusa più controller, sarebbe necessario un nome più descrittivo, ma lascia supporre questa caratteristica ha bisogno solo 1 controller.

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

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

index.html - pagina HTML di file - piuttosto auto esplicativo

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

fonte

2014-11-26 09:35:56 btesser

Come suggerito dai controllori di scrittura btesser nei file e le funzioni separate e definendo i suoi metodi nel prototipo della funzione del controller è una best practice per App AngularJS. Puoi usare una chiusura o IIFE per evitare di inquinare lo spazio dei nomi globale, esporrà le tue funzioni solo al contesto attuale.

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

fonte

2014-12-17 16:38:58 sgimeno

-1

seguo Guida allo stile angolare del John Papa. Ha la guida di stile per moduli, direttive, servizi, ecc

GitHub - Angular Style Guide by John Papa

fonte

2016-04-21 11:33:31 Akash

Non inquinante globale con angularjs

risposta

Problemi correlati