No contaminante global con AngularJS

En AngularJS, definimos nuestros controladores en window. Si bien esto no crearía conflictos de nombres con otros js módulos y plugins, todavía no es una buena práctica: una sola aplicación debe exponer un solo objeto al espacio de nombres global.No contaminante global con AngularJS

Esta es la forma habitual, definido en window:

function UserController($scope) { ... }

HTML:

<div ng-controller="UserController">

Esto es lo que pienso de:

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

Así que en ese caso, debe iniciar el controlador desde html como este

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

¿Qué opinas?

Fuente

2012-08-25 Umur Kontacı

Una de las formas de hacerlo es definirlo dentro de sí angular como la forma en que usted describió. En otras palabras:

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

me han confirmado el método anterior no contamina el espacio de nombres global.

Editar: Tampoco necesita usar <div ng-controller="myApp.UserController"> ya que podría definir myApp en el atributo ng-app: <body ng-app="myApp"> De esta forma podría llamar al controlador ng sin ponerle un prefijo myApp cada vez.

Fuente

2012-08-25 13:12:44 Hengjie

No sabía que objeto '' module' tiene la función controlador' interior, pero tiene mucho sentido =) Gracias. –

Angular necesita una mejor documentación. Es un gran marco, pero tiene una curva de aprendizaje empinada –

Gracias por la edición sobre cómo usar el módulo con ng-app en lugar de con ng-controller – Alex

La forma más limpia de la definición de los controladores es de 1 por cada archivo. Cada archivo debe estar envuelto con una expresión de función invocada inmediatamente (IIFE) o cierre que le permita tener sus propias variables locales sin contaminar el alcance global. Este es el enfoque que tomo en mis proyectos:

my-app.js - Archivo de definición de módulo primario - El propósito principal de este archivo es definir un módulo de aplicación y sus dependencias, definir el enrutamiento (si se usa el enrutamiento) y configurar proveedores. En su forma más simple se ve así:

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

algunos-función/some-feature.js - función de archivo de definición de módulo - Este archivo define un módulo para una característica y las dependencias que esta característica requiere. Esto puede ser cualquier agrupación lógica, no solo una característica. Esto hace que sea muy fácil llevar la característica a otro módulo o aplicación si es necesario.

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

algunos-función/algunos-Feature-controller.js - controlador necesaria para la función - Si la función incluye varios controladores, sería necesario un nombre más descriptivo, pero deja para asumir esta función sólo necesita 1 controlador.

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

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

index.html - Página archivo html - Bastante auto explicativo

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

Fuente

2014-11-26 09:35:56 btesser

Como se sugiere por los controladores de escritura btesser en archivos y funciones separadas y la definición de sus métodos de prototipo de función del controlador es una mejor práctica para Aplicaciones AngularJS. Puede utilizar un cierre o IIFE para evitar la contaminación del espacio de nombres global, expondrá sus funciones solo al contexto actual.

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

Fuente

2014-12-17 16:38:58 sgimeno

-1

que seguir la guía de estilo angular de John Papa. Tiene la guía de estilo para los módulos, directivas, servicios, etc.

GitHub - Angular Style Guide by John Papa

Fuente

2016-04-21 11:33:31 Akash

No contaminante global con AngularJS

Respuesta

Cuestiones relacionadas