Question

我正在使用angular开发一个新的proyect，我将：App（主模块），控制器和服务分成不同的文件：

责任是：

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>
}

使用角度是否正确？我正在使用依赖注入。

Answer 1

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

Angular应用程序没有主要方法。相反，模块以声明方式指定应该如何引导应用程序

您正在使用其他框架中使用var self = this为您的应用添加功能的常用方法，但角度附带了一个很好的礼物范围。范围非常有用，因为所有角度应用程序都只有一个$ rootScope，您可以使用它来存储整个应用程序中的常用功能。范围也以层次结构的形式组织，它使您能够嵌套范围，并使某些逻辑仅适用于特定的DOM元素。

范围按层次结构排列，模仿应用程序的DOM结构。范围可以观察表达式并传播事件。

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

Scope是应用程序控制器和视图之间的粘合剂。在模板链接阶段，指令在作用域上设置$ watch表达式。 $ watch允许指令通知属性更改，这允许指令将更新的值呈现给DOM。

当我使用角度时，我个人不使用IIFE，但这是个人选择。 Iife允许您通过将变量包装在函数范围内来防止全局范围污染，因此您没有名称冲突但angular引入了可以帮助您使用工厂和服务创建功能的提供程序，所以基本上您将所有功能包装在其中一个中（阅读哪个是最适合您的任务的）并且您已经在混合中免费包含依赖注入。

最后，有三种方法可以使用依赖注入（或者使用依赖注入的方法）。

内联数组注释

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

$ inject属性注释

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

隐式注释

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

您可以自由地使用您感觉更舒适的方式但是您应该知道如果您计划缩小代码，最后的替代方案是危险的，因为角度依赖于变量名称来查找依赖项，并且这些将被重命名为缩小过程。 Personaly我使用第一个，它似乎是最受欢迎的，因为你不需要第二个替代中使用的额外变量。

您的代码可以按如下方式重写

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有关如何构建角度应用的指南

角度分离功能

1 个答案: