Javascript Girl
  1. Javascript Girl
  3. Comment définir des contrôleurs dans plusieurs fichiers – AngularJs
Intereting Posts
Privilège Firefox et UniversalBrowserWrite Le service de jasmine AngularJS se moque OnChange et onSelect dans DropDownList Pourquoi ne pas utiliser Child.prototype = Parent.Prototype plutôt que Child.prototype = new Parent (); Pour l'héritage Javascript? Un moyen approprié de supprimer toutes les données de série d'un diagramme de diagrammes élevés L'alerte JavaScript ne fonctionne pas dans Android WebView Gamme de résultats Firebase using startAt et endAt JavaScript: lire 8 octets en 64 bits entiers Puis-je écouter un appel de fonction en utilisant javascript? Envoyer formulaire sans recharger la page N'est-il pas stupide qu'un petit favicon nécessite encore une autre requête HTTP? Comment faire pour favicon entrer dans un sprite? Comment puis-je accéder à une variable Grails en JavaScript? Promise.resolve (). Puis vs setImmediate vs nextTick Comment utiliser l'alerte javascript pour que l'utilisateur puisse choisir Existe-t-il un nombre maximal d'arguments que les fonctions JavaScript peuvent accepter?

Comment définir des contrôleurs dans plusieurs fichiers – AngularJs

J'essaie de définir des contrôleurs dans des fichiers distincts, mais je reçois l'erreur: 

transactionsController not a function got undefined

Structure du fichier

J'ai ajouté des fichiers dans cette séquence 1- common.js 2- transactions.js

Common.js Dans les fichiers communs, j'ai défini 

 var app = angular.module("spModule", ["ngMessages", "ui.bootstrap"]);

Transactions.js 

 angular.module('spModule').controller('transactionsController', ['$scope', '$http', function ($scope, $http) {} ] );

Fichier HTML 

 <body ng-app="spModule" ng-controller="transactionsController">

Tout d'abord, vous devez vous débarrasser de la variable de l' app globale. Ceci n'est pas nécessaire. Deuxièmement, vous devez comprendre le principe de la méthode angular.module() .

L'utilisation de angular.module() avec deux paramètres (p. angular.module('my-module', []) . angular.module('my-module', []) ) entraînerait la définition d' un nouveau module avec ses dépendances correspondantes. En revanche, lors de l'utilisation de angular.module('my-module') le module correspondant est recherché en interne et retourné à l'appelant ( obtention ).

Le moyen de définir votre application par la première fois vous permet de créer les fichiers et la structure suivants.

App.js 

 angular.module('myApp', []);

FirstController.js 

 angular.module('myApp').controller('FirstController', function () {});

SecondController.js 

 angular.module('myApp').controller('SecondController', function () {});

Si vous incluez maintenant ces fichiers dans votre document html dans cet ordre particulier (au moins l' application.js doit venir en premier), votre application fonctionne très bien avec deux contrôleurs distincts dans deux fichiers distincts.

Autres lectures

Je peux recommander l' AngularJS Styleguide sur les modules pour obtenir plus d'idées sur ce sujet.

Vous pouvez mettre ce contrôleur dans un fichier séparé comme mycontroller1.js 

 app.controller('myController', ['$scope',function($scope) { $scope.myValue='hello World' }])
app.controller('myController', ['$scope',function($scope) { $scope.myValue='hello World' }])

De même, vous pouvez créer un nouveau fichier js 'myNewcontroller.js' et peut mettre un nouveau contrôleur: 



     App.controller ('myController2', ['$ scope', fonction ($ scope)    
         {
         $ Scope.myValue = 'hello World'
         }])

J'espère que cela vous aidera 🙂 Bonjour!

Vous pouvez faire ces choses en créant des modules. Créer un module et des contrôleurs respectifs. Et injectez ce module sur le module principal de l'application. 

 Transactions.js (function() { 'use strict'; angular.module('tmodule', []); })(); (function() { 'use strict'; angular.module('tmodule').controller('transactionsController', ['$scope', '$http', function ($scope, $http){ }]); })();

Maintenant, injectez le "tmodule" à votre fichier Common.js- 

  var app = angular.module("spModule", ["ngMessages", "ui.bootstrap","tmodule"]);

Chargez votre common.js d'abord. Déplacez la directive ng-app vers la <html> . Changez transaction.js pour: 

 app.controller('transactionsController', TransactionsController) TransactionsController.$inject = ['$scope','$http'] function TransactionsController($scope, $http) { };

Juste pour le fun. Laissez-moi savoir ce qui se passe.