angular.js - angular跨文件注入服务

Question

假设在 a.js 定义了 service A，b.js 定义了一个 controller B，如何在B中注入服务A

淡淡烟草味 · Answer

Service d'injection croisée de fichiers angulaires ?
En regardant votre question, je pense que la personne qui pose la question a un concept peu clair. Vous devez comprendre les concepts de base suivants.
1. La structure organisationnelle du code angulaire que vous écrivez n'est pas divisée en fichiers.
2. Angular a été résumé en composants tels que le contrôleur, le service et la directive. Vous pouvez écrire ces éléments dans plusieurs fichiers, ou vous pouvez tous les écrire dans un seul fichier. Pour rendre votre code efficace, chargez-le simplement en HTML. Afin de rendre le programme plus lisible, nous exigeons généralement qu'un composant soit défini dans un fichier séparé et suive une bonne structure de répertoires.
3. La division du code se fait par modules. Par exemple, si vous utilisez bower pour installer un certain package, vous devez écrire le module dépendant lors de la définition de votre module, alors le composant défini dans le module dépendant sera valide. Ce point parle du niveau du module.
4. Qu'est-ce que le service d'injection ? Bien que vous chargiez un module, tout le code qu’il contient est chargé. Mais de quels services dépend chaque contrôleur et comment Angular doit les trouver, vous devez toujours indiquer à Angular. À ce stade, l'injection de dépendances est nécessaire. Ce point parle du niveau du contrôleur.

Pour résumer, vous pouvez simplement controllerX.$inject = ['serviceX']; le charger de la manière la plus courante.
S'il ne prend pas effet, cela doit être dû aux raisons suivantes :
1. Le fichier js n'est pas importé.
2. Le module où se trouve ce service n'est pas chargé. angular.module('MyApp',['ModuleX'])C'est tout.
3. Mais veuillez noter que votre propre module MyApp peut être utilisé plusieurs fois, mais les dépendances ne peuvent être définies qu'une seule fois, sinon les modules référencés ne seront pas le même module.
Autrement dit, vous pouvez

angular.module('MyApp',['ModuleX'])
    . controller('ControllerA', ControllerA);
angular.module('MyApp')
    . controller('ControllerB', ControllerB);

Mais ça ne doit pas être possible

angular.module('MyApp',['ModuleX'])
    . controller('ControllerA', ControllerA);
angular.module('MyApp',['ModuleX'])
    . controller('ControllerB', ControllerB);

Vérifiez ces 3 points, si cela ne fonctionne toujours pas, continuez à poster le code pour discussion.

怪我咯 · Answer

Tout d'abord, ce problème peut être divisé en deux situations. L'une est que le service A et le contrôleur B appartiennent tous deux au même module. L'autre situation est que ni le service A ni le contrôleur B n'appartiennent au même module.

Permettez-moi d'abord de poster la partie du code :
Le premier est index.html, le code est le suivant :


依赖注入

    
    
    
{{v.avatar_url}}
    {{v.id}}

Notez également que index.html a.js b.jsc.js doit être introduit dans

a.jsLa partie code est la suivante :

angular.module('MyApp',['MyModule'])
    .controller('MyController', MyController);

MyController.$inject = ['MyService', 'MyService2'];

function MyController(MyService, MyService2){
    var vm = this;
    vm.users = [];
    vm.users2 = [];
    vm.getUsers = getUsers;
    vm.getUsers2 = getUsers2;

    function getUsers(){
        console.log('依赖的是同一个模块的服务');
        MyService.getData()
            .then(function(res){
                vm.users = res.data;
            })
    }

    function getUsers2(){
        console.log('依赖的是不同模块的服务');
        MyService2.getData()
            .then(function(res){
                vm.users2 = res.data;
            })
    }
}

b.jsLa partie code est la suivante :

angular.module('MyApp')
.service('MyService', MyService);

MyService.$inject = ['$http'];

function MyService($http){
    var url = 'https://api.github.com/users';
    var service = {
        getData: getData
    };

    return service;

    function success(res){
        return res;
    }

    function fail(e){
        console.log(e);
    }

    function getData(){
        return $http.get(url)
            .then(success)
            .catch(fail);
    }
}

c.jsLa partie code est la suivante :

angular.module('MyModule',[])
    .service('MyService2', MyService);

MyService.$inject = ['$http'];

function MyService($http){
    var url = 'https://api.github.com/users';
    var service = {
        getData: getData
    };

    return service;

    function success(res){
        return res;
    }

    function fail(e){
        console.log(e);
    }

    function getData(){
        return $http.get(url)
            .then(success)
            .catch(fail);
    }
}

De plus, vous pouvez également aller ici pour voir une démo écrite, qui est le résultat de l'exécution du code ci-dessus.

Il est à noter que s'il s'agit du même module, le service peut être utilisé directement en l'injectant dans le contrôleur ; s'il s'agit d'un module différent, alors il faut injecter le module dont vous souhaitez dépendre dans le module principal. dans notre module principal et peut ensuite être utilisé dans le contrôleur.

Vous devriez le comprendre presque après avoir lu le code. S'il y a quelque chose que vous ne comprenez toujours pas, vous pouvez également lire un article que j'ai écrit auparavant, j'espère qu'il pourra vous aider.

迷茫 · Answer

Je pense que le questionneur ne comprend pas que la relation de liaison de données bidirectionnelle (Data Binding) entre le modèle de données (Model) et la vue (View) dans angulairejs se produit via le contrôleur (controller) .

Un modèle de données (M) peut avoir plusieurs vues (V), ce qui signifie qu'un contrôleur (C) peut contrôler plusieurs vues. Il peut exister des relations de logique métier entre ces vues, pour lesquelles plusieurs contrôleurs sont créés afin qu'un contrôleur contrôle une seule vue. Il est cependant possible que ces contrôleurs aient le même contenu et puissent être extraits. Ensuite, il y a deux manières :

Méthode 1 (méthode d'héritage, mauvaise situation courante) : plusieurs contrôleurs héritent d'un contrôleur commun.
Méthode 2 (service Angularjs) : Extraire le contenu commun dans un ou plusieurs services et laisser le contrôleur appeler (appeler différents services à la demande)

Vous pouvez comparer les deux. Le service est plus modulaire et réutilisable.

Je pense qu'après avoir compris ce processus de cette manière, vous connaîtrez probablement le Service d'injection de dépendances mentionné ci-dessus.

angular.js - angular跨文件注入服务

répondre à tous(3)je répondrai