angular js：是不是需要在模块文件中加载所有控制器和工厂/服务

Posted 2023-02-19

【中文标题】angular js：是不是需要在模块文件中加载所有控制器和工厂/服务

【英文标题】：angular js : Is it necessary to load all the controllers and factories / services in module fileangular js：是否需要在模块文件中加载所有控制器和工厂/服务

【发布时间】：2018-04-14 17:36:30

【问题描述】：

NET MVC 到一个 CRM 应用程序并使用 Angular js 编写客户端脚本。

我遇到过几篇使用Angular js的文章，它们都在模块内设置了控制器和服务/工厂，并且它们都是一次加载的。

所以我的问题是是否有必要在模块中加载所有控制器和服务，或者我可以将这些 js 分开并在我需要明智地使用页面时逐页使用？

我正在使用 ASP.NET MVC 模式而不是使用 angularjs 路由的单页导航。

【问题讨论】：

你可以这样做，是的。可能很难取决于在 mvc 路由更改时重新加载了多少页面。另请查看 oc-lazy-load。

@AluanHaddad 好的，谢谢，我会分析页面并做出决定。

【参考方案1】：

是的，您可以将这些 angularjs 文件分开并在每页使用一个 angularjs 控制器，但您需要在括号[] 内的主模块（app.js）中注册控制器或服务的模块名称，如下所示：

//app.js
var app = angular.module('myApp', ['ngRoute','myApp.controller','myApp.create.controller'])
          .config(function ($routeProvider,$locationProvider) 
              $routeProvider
              .when("/", 
                templateUrl: 'home/home.html',
                controller: 'HomeController',
                controllerAs: 'home'

              ).when("/create",
                templateUrl: 'manage/create.html',
                controller: 'CreateController',
                controllerAs: 'create'
              )
          );

//HomeController.js
var module = angular.module('myApp.controller', ['myApp.service']);
module.controller('HomeController', ['HomeService',
    function (HomeService) 

        var self = this;
        self.EmpData = [];

        HomeService.getAllEmployeesTable().then(onSuccess, onError);

        function onSuccess(response) 
            self.EmpData = response.data;
        
        function onError(error) 
            alert('Error fetching data');
        
    ]);

//CreateController.js
var module = angular.module('myApp.create.controller',['myApp.create.service']);
module.controller('CreateController',['CreateService',
    function(CreateService)
        var self =this;

        self.person = 
            name : "", email:"",address:"",telephone:""
        

        self.submitPerson = function()
            console.log(self.person);
            CreateService.submitPerson(self.person).then(onSuccess,onError);
        

        var onSuccess = function(response)
            alert("User has been added succesffully");
        
        var onError = function(error)
            alert("Error creating person");
           
    
]);

【讨论】：

如果您仔细阅读我的问题，实际上在我的情况下没有运行我没有应用单页应用程序，因此在我的情况下不需要使用路由。我正在使用 asp.net mvc actionresult 进行导航，所以每次我必须先加载我的模块 js，然后再加载受人尊敬的页面 js 和其他...