Как минимизировать угловой код для производства?

#angularjs

#angularjs

Вопрос:

Мой проект готовится к производству, который разрабатывается с использованием Node и angular, как я могу минимизировать код angular в производстве.

Я хочу, чтобы следующий контроллер был уменьшен или uglify . если я уменьшу код в онлайн-режиме, приложение не будет работать.

     var sidemenu = angular.module('sidemenuApp', ['ngMaterial', 'ngAria', 'ngAnimate',
        'slickCarousel', 'ngCookies', 'ui.bootstrap', 'headroom', 'ngRoute','duScroll','infinite-scroll','angular-spinkit']);

    sidemenu.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
        $routeProvider
            .when('/builders/:id', {  
                templateUrl: '../template/listpagefilter.html',
                controller: 'buildersCtrl'
            })

             .when('/builders/:id/property/:property_id',{ 
                      templateUrl: '../view/property-details.html',
                      controller: 'unitTypeCtrl'  
            })     

           .when('/property/:property_id',{
                      templateUrl: '../view/property-details.html',
                      controller: 'unitTypeCtrl'  
            }) 

              .when('/location/:city_name/:location_id',{ 
                templateUrl: '../template/listpagefilter.html',
                controller: 'buildersCtrl'
            })



        }])

here is mu controller , i need to minify and uglify the code.


     sidemenu.controller('buildersCtrl', ['$scope', '$rootScope', '$location', '$http', 'allServices','$document',
                         'PropertyDetails','$routeParams','$window','$uibModal','$mdDialog',
                         'customVariables',function (a, b, c, d, e,f,h,r,w,u,v,cust) {

                b.contactwdgt = "";
                b.header = true;
                b.homepage = false;
                b.filter = true;
                b.innerHeader = "inner-page-hdr";
                a.composite = false;

                a.$on('$routeChangeStart', function(scope, next, current) {
                    b.homepage = true;
                    b.filter = false;
                    b.innerHeader = "";
                    b.searchFilter = false;
                    b.contactwdgt = "contact-wdgt";
                    srchCls_Element.removeClass('listing-navbar');

                });


            a.hmpProperies = function(properties) {

                    if (properties.length < 3) {
                        a.composite = true;
                    }
                  }


                e.projectListing(r,paging).then(function(result) {


                    a.properties = result.data.items;

                    if(result.data.items.length<=3){
                         a.showStructure = false;
                    }


                }, function(error) {

                });
                a.showStructure = false;
                var Execution = true;
                a.loadMoreRecords = function() {
                    a.showStructure = false;
                    var offset = paging.start   paging.rows;
                    paging = {
                        start: offset,
                        rows: 3
                    };


        a.getRaiseQuery=function(propertyId){
                  b.propid=propertyId
                 v.show({
                    templateUrl: 'view/raisequiry.html',
                    controller: DialogController,
                    clickOutsideToClose:true,
                    fullscreen: a.customFullscreen // Only for -xs, -sm breakpoints.
                })

        }  

        }]);
  

Комментарии:

1. Использовать grunt было бы очень просто.

2. вы можете использовать uglifyjs.

3. могу ли я получить документ для выполнения шагов?

4. github.com/mishoo/UglifyJS

Ответ №1:

Код Angular js 1.x не поддается прямому минимизации, если вы не следовали правильному шаблону, подобному приведенному ниже, чтобы uglify не уменьшал внедренные сервисы, такие как $ scope, $ http, MyCustomService, до a, b и c.

 var NewCtrler = ['$scope', '$http','MyCustomService', function($scope, $http, MyCustomService) {
  $http.get(MyCustomService.restfulUrl)
    .success(function(data) {
      $scope.recievedData = data;
      MyCustomService.doSomething();
    })
}]
  

пожалуйста, используйте эту ссылку для получения инструкций по минимизации с веб-сайта angularjs

как только ваш код будет готов, вы можете использовать uglify для минимизации вашего кода с помощью grunt / gulp.

Прочитайте больше о внедрении зависимостей angular и strict-di, чтобы получить четкое представление о том, как работает внедрение зависимостей и как strict-di помогает с минимизированным кодом.