[asp.net-mvc]分离上角的函数

发布时间: 2017/3/25 1:49:38
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我正在开发使用角新加宽和我已经分居: 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>
}

是正确的方式使用角??我使用依赖注入。

解决方法 1:

你如何定义角的应用程序是由你但角提供的模块来处理代码组织、 阻止全球范围的污染,除其他外的依赖注入

角的应用程序没有一个主要的方法。而模块以声明方式指定应用程序应该如何引导

你正在使用一种常用的方法,发现在其他框架的使用 var self = this 将功能添加到您的应用程序但角带有精美礼品范围。范围是非常有用的因为所有角应用程序有一个,你可以用来存储常用的只有一个 $rootScope 哪都跨您的应用程序使用的功能。此外举办了范围在层次结构中哪给你防灾减灾能力窝范围,使一些逻辑工作只对特定的 DOM 元素。

作用域被排列的模拟中应用的 DOM 结构的分层结构。作用域可以监视表达式和事件传播。

胶合您的应用程序应使用 $watch 范围的更改通知,但通常您使用任何预定义的指令,自动完成此操作的简单任务,如绑定,如更改属性。ngBind、 ngClick 等。

范围是应用程序控制器和视图之间的黏合剂。在模板链接过程中分阶段在范围上设置了 $watch 表达式的指令。$watch 允许指令的属性更改通知,允许指令向 DOM 提供更新后的值

当我使用的角,但这是个人的选择,我个人不使用生活。生活可以防止全球范围污染的包皮内函数范围的变量,所以你没有名称冲突但角介绍了供应商,可以帮助您创建所以基本上你包裹你的所有功能在其中之一 (阅读是最适合你的任务),并已经包含了依赖注入在组合中免费使用工厂和服务功能。

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

  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.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︰ 了解设计模式有关您该如何构建您角的应用程序的指南

官方微信
官方QQ群
31647020