Разделительные функции на угловые

То, как вы определяете угловое приложение, зависит от вас, но угловые модули обеспечивают работу с организацией кода, предотвращают глобальное загрязнение среды, инъекцию зависимости между прочим

Угловые приложения не имеют основного метода. Вместо этого модули декларативно указывают, как приложение должно быть загружено

Вы используете общий метод, найденный в других рамках использования var self = this чтобы добавить функциональность к вашему приложению, но угловой поставляется с красивыми подарочными областями. Области применения чрезвычайно полезны, потому что все угловые приложения имеют один и только один $ rootScope, который вы можете использовать для хранения наиболее часто используемых функций во всем приложении. Кроме того, область охвата организована в иерархии, которая дает вам возможность размещать области и устанавливать некоторую логику только для конкретных элементов DOM.

Области расположены в иерархической структуре, имитирующей структуру DOM приложения. Области могут наблюдать выражения и распространять события.

Чтобы склеить приложение, вы должны использовать $ watch в области, чтобы получать уведомления об изменениях, но обычно вы используете любые предопределенные директивы, которые делают это автоматически для простой задачи, например привязки и изменения атрибутов. ngBind, ngClick и т.д.

Область - это клей между контроллером приложения и представлением. Во время фазы связывания шаблона директивы устанавливали $ watch выражения в области. $ Watch позволяет директивам получать уведомления об изменениях свойств, что позволяет директиве предоставлять обновленное значение DOM.

Я лично не использую IIFE, когда я использую угловой, но это личный выбор. Iife позволяет вам предотвращать глобальное загрязнение области, обертывая переменные внутри области функций, поэтому у вас нет коллизий имен, но угловые вводят поставщиков, которые могут помочь вам создать функциональность с использованием фабрик и служб, поэтому в основном вы переносите все свои функции в одном из них (прочитайте, что наиболее подходит для вашей задачи), и вы уже включили инъекцию зависимостей в микс бесплатно.

Наконец, существует три способа использования инъекции зависимостей (или способов их обновле ния).

1. Inline Array Annotation

   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: Понимание шаблона проектирования для рекомендаций относительно того, как вы должны структурировать свое угловое приложение