Javascript 角点上的分离函数

我正在使用angular开发一个新项目，我已将：应用程序（主模块）、控制器和服务分离在不同的文件中：

其职责是：

indexApp.js

他们的代码是：

indexController.js

他们的代码是：

indexService.js

他们的代码是：

最后，在我看来，我调用了以下方法：

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

@使用System.Web.Optimization
@{
Layout=“~/Views/Shared/_Layout.cshtml”；
var-id=20；
}
{{vm.movie.title}


{{vm.movie.director}
{{vm.movie.date}
{{vm.movie.mpaa}
点击我！！
@节脚本
{
@Scripts.Render（“~/bundles/index”）
indexApp.Init（）；
indexService.Init（）；
indexController.Init（）；
}

---

正确使用角度的方法吗？？我正在使用依赖注入。

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

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

您正在使用其他框架中常见的方法，即使用

var self=this

向应用程序添加功能，但angular附带了一个很好的礼物scopes。作用域非常有用，因为所有angular应用程序都只有一个$rootScope，您可以使用它来存储整个应用程序中常用的功能。此外，作用域组织在一个层次结构中，它使您能够嵌套作用域，并使一些逻辑仅在特定的DOM元素上工作

作用域按层次结构排列，模仿应用程序的DOM结构。作用域可以监视表达式和传播事件

要粘合您的应用程序，您应该在要通知更改的范围上使用$watch，但通常您会使用任何预定义的指令，这些指令会自动执行简单的任务，如绑定和更改属性，如ngBind、ngClick等

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

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

最后，有三种方法可以使用依赖项注入（或对其进行说明）

内联数组注释

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

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

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

$inject属性批注

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

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

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

隐式注释

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

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

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>

{{movie.title}


{{电影导演}
{{movie.date}
{{movie.mpaa}
点击我！！

{Update}

---

您还可以查看有关如何构建angular应用程序的指导原则

如果您使用angular，则无需使用iLife启动应用程序。所有这些功能都可以通过模块实现。这也可以防止您使用

window.indexApp=window.indexApp | |{}

@devconcept时对全局范围的污染。您可以举一个您提到的建议的例子吗？？我的意思是，代码是怎么写的？我检查了你的代码，你有几个不一致的地方。你在学英语吗？看起来你在其他框架中有背景，比如knockout Hehehe，是的，我来自knockout。。。是的，我也在学习。。。我想继续使用MVVM模式…完美。。。谢谢。。。这是非常有用的，我想知道是否仍然是良好的做法有：模块，控制器，服务，指令，过滤器等。。。在分开的文件中。。。我是否应该把它们都放在单独的文件中？答案取决于项目的大小。您可以在更大的项目中使用require.js，按功能分隔逻辑，或者为控制器使用单独的文件，服务和指令，但请记住将它们包装在模块中，以便以后可以轻松地注入它们。@FreddyCastelblancoMacias检查我对一篇好的so文章的编辑，这篇文章将帮助ypu完成您的任务learning@FreddyCastelblancoMacias只是Ederson另一个答案中的一个注释。毫无疑问，约翰·帕帕是个聪明人，但他在参考文章中给出了一些与他自己的学习过程有关的固执己见的答案。我并不是说他错了，我是说你可能会发现大多数有棱角的开发人员编写的代码与其他人非常不同