理解AngularJS模块注入逻辑

AngularJS Module Injection logic understand

本文关键字:注入 模块 AngularJS 理解      更新时间:2023-09-26

我正在学习AngularJS和他使用module的关注点分离。我创建了一个简单的应用程序,它由一个index.html(视图)和两个file .js(一个用于控制器,另一个用于我自己的服务)组成。问题如下:我如何将包含服务的.js文件注入到控制器的文件中?

这就是controller。js

var myApp = angular.module('myApp',[]);
myApp.controller('myController', function($scope, $window,$interval,$location) {
    $scope.appUrl = $location.absUrl();
    $scope.port = $location.port();
    $scope.protocol = $location.protocol();
    $scope.winWidth = $window.innerWidth;
    $interval(function(){
        $scope.winWidth = $window.innerWidth;
    }, 1);
});

,这是date-time-service.js

var service = angular.module('myApp',[]);
service.factory('dateTimeService', function() {
    var dateTimeSvc = {};
    dateTimeSvc.getData = function(){
        return new Date().toDateString();
    }
    dateTimeSvc.getTime = function(){
        return new Date().toTImeString();
    }
    return dateTimeSvc;
})

显然,我知道我可以创建一个单一的.js文件,其中包含两者,并调用它到我的视图,但我想了解背后的逻辑依赖注入开始与这个"愚蠢"的应用程序,然后扩展到更大的应用程序。谢谢大家的回答!

我们不注入js文件。我们注入依赖项。

如果你正在研究如何在angular context初始化后动态地在运行时注入模块——在这里http://blog.getelementsbyidea.com/load-a-module-on-demand-with-angularjs/我很久以前就实现了这一点,我从服务器动态调用模块,并根据用户所在的屏幕将其注入到我的angular上下文中。