javascript - Angular 上的分离函数

Question

我正在使用 Angular 开发一个新项目，并且我已将:应用程序(主模块)、 Controller 和服务分离到不同的文件中:

职责是:

indexApp.js

他们的代码是:

(function(indexApp) {

    indexApp.App = {};

    indexApp.Init = function() {
        indexApp.App = angular.module("MainAppModule", ["MainControllerModule", "MainServiceModule"]);
    };

}(window.indexApp = window.indexApp || {}));

indexController.js

他们的代码是:

(function (indexController) {

    indexController.App = {};

    indexController.MainController = function (service) {
        var self = this;

        var dataRetrieved = service.Login();

        self.movie = {
            title: dataRetrieved.Id,
            director: dataRetrieved.Name,
            date: dataRetrieved.LastName,
            mpaa: "PG-13",
            id: 0,
            clickCommand: function () {
                alert(self.movie.director);
            },
            loadData: function (id) {

                console.log(id);

                if (id !== 0) {
                    self.movie.title = "Titulo";
                    self.movie.director = "Director";
                    self.movie.date = "Mayo 16 de 2015";
                    self.movie.mpaa = "PG-25";
                    self.movie.id = id;
                }
            }
        }
    };

    indexController.SetUrl = function (data) {
        indexController.Redirect = data.Redirect;
    };

    indexController.Init = function () {
        indexController.App = angular.module("MainControllerModule", []);
        indexController.App.controller("MainController", indexController.MainController);
        indexController.MainController.$inject = ["MainService"];
    };

}(window.indexController = window.indexController || {}));

indexService.js

他们的代码是:

(function (indexService) {

    indexService.App = {};

    indexService.MainService = function () {
        var self = this;

        self.Login = function () {
            return {
                Id: 1,
                Name: "Freddy",
                LastName: "Castelblanco"
            };
        };
    };

    indexService.SetUrl = function (data) {
        indexService.Login = data.Login;
    };

    indexService.Init = function () {
        indexService.App = angular.module("MainServiceModule", []);
        indexService.App.service("MainService", indexService.MainService);
    };

}(window.indexService = window.indexService || {}));

最后，我认为我调用以下方法:

@using System.Web.Optimization

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    var id = 20;
}

<div ng-app="MainAppModule">
    <div ng-controller="MainController as vm">
        <div ng-init="vm.movie.loadData(@id)">
            <div class="row">
                <div class="col-md-12">{{vm.movie.title}}</div>
                <input type="text" ng-model="vm.movie.title"><br>
            </div>
            <div class="row">
                <div class="col-md-12">{{vm.movie.director}}</div>
            </div>
            <div class="row">
                <div class="col-md-12">{{vm.movie.date}}</div>
            </div>
            <div class="row">
                <div class="col-md-12">{{vm.movie.mpaa}}</div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <button type="button" ng-click="vm.movie.clickCommand()">Click me !!</button>
                </div>
            </div>
        </div>
    </div>
</div>



@section scripts
{
    @Scripts.Render("~/bundles/index")

    <script type="text/javascript">

        indexApp.Init();
        indexService.Init();
        indexController.Init();


    </script>
}

使用 Angular 正确方法是？我正在使用依赖注入(inject)。

Answer 1

如何定义 Angular 应用程序取决于您，但 Angular 提供了处理代码组织、防止全局范围污染、依赖注入(inject)等的模块

Angular apps don't have a main method. Instead modules declaratively specify how an application should be bootstrapped

您正在使用其他框架中常见的方法，即使用 var self = this 向您的应用程序添加功能，但 Angular 附带了一个很好的礼物范围。范围非常有用，因为所有 Angular 应用程序都有一个且只有一个 $rootScope，您可以使用它来存储整个应用程序中的常用功能。此外，作用域以层次结构进行组织，这使您能够嵌套作用域并使某些逻辑仅在特定的 DOM 元素上工作。

Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.

要粘合您的应用程序，您应该在范围上使用 $watch 来通知更改，但通常您使用任何预定义的指令来自动执行此操作，例如绑定(bind)和更改属性等简单任务。 ngBind、ngClick 等

Scope is the glue between application controller and the view. During the template linking phase the directives set up $watch expressions on the scope. The $watch allows the directives to be notified of property changes, which allows the directive to render the updated value to the DOM.

我个人不使用IIFE当我使用 Angular 时，但这是个人选择。 iife 允许您通过将变量包装在函数范围内来防止全局范围污染，这样您就不会出现名称冲突，但 Angular 引入了提供程序，它可以帮助您使用工厂和服务创建功能，因此基本上您可以将所有功能包装在其中之一中(阅读哪个最适合您的任务)并且您已经免费地将依赖项注入(inject)包含在组合中。

最后，有三种方法可以使用依赖注入(inject)(或注释它的方法)。

1. 内联数组注释

   mymodule.controller('MyController', ['$scope', function($scope) {
         // your code
   }]);
   

2. $inject 属性注释

   var MyController = function($scope) {
       // ...
   }
   MyController.$inject = ['$scope'];
   someModule.controller('MyController', MyController);
   

3. 隐式注释

   someModule.controller('MyController', function($scope) {
       // ...
   });
   

您可以自由地使用您感觉更舒服的方式，但您应该意识到，如果您打算缩小代码，最后一种选择是危险的，因为 Angular 依赖变量名称来查找依赖项，并且这些依赖项将在缩小过程。就我个人而言，我使用第一个，它似乎是最受欢迎的，因为您不需要在第二个替代方案中使用额外的变量。

您的代码可以重写如下

angular.module('services', []).service('MainService', function () {
    return {
        Login: function () {
            return {
                Id: 1,
                Name: "Freddy",
                LastName: "Castelblanco"
            };
         }
    };
});
angular.module('controllers', []).controller('MainController', ['$scope', 'MainService', function ($scope, service) {
    var dataRetrieved = service.Login();

    $scope.movie = {
        title: dataRetrieved.Id,
        director: dataRetrieved.Name,
        date: dataRetrieved.LastName,
        mpaa: "PG-13",
        id: 0
    };
    $scope.clickCommand = function () {
       alert($scope.movie.director);
    };
    $scope.loadData = function (id) {
        if (id !== 0) {
            $scope.movie.title = "Titulo";
            $scope.movie.director = "Director";
            $scope.movie.date = "Mayo 16 de 2015";
            $scope.movie.mpaa = "PG-25";
            $scope.movie.id = id;
        }
    }
 }]);

 angular.module('MainAppModule', ['controllers', 'services']);

还有你的 html

<div ng-app="MainAppModule">
    <div ng-controller="MainController">
        <div ng-init="loadData(@id)">
            <div class="row">
                <div class="col-md-12">{{movie.title}}</div>
                <input type="text" ng-model="movie.title">
                <br>
            </div>
            <div class="row">
                <div class="col-md-12">{{movie.director}}</div>
            </div>
            <div class="row">
                <div class="col-md-12">{{movie.date}}</div>
            </div>
            <div class="row">
                <div class="col-md-12">{{movie.mpaa}}</div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <button type="button" ng-click="clickCommand()">Click me !!</button>
                </div>
            </div>
        </div>
    </div>
</div>

{更新}

您还可以查看AngularJS: Understanding design pattern有关如何构建 Angular 应用程序的指南