简化angular1依赖注入

最新推荐文章于 2024-01-16 17:06:06 发布

小石头513

最新推荐文章于 2024-01-16 17:06:06 发布

阅读量447

点赞数

CC 4.0 BY-SA版权

分类专栏： angularjs 文章标签： angular 自动化

本文链接：https://blog.youkuaiyun.com/qq_34446355/article/details/72877214

angularjs 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了Angular中控制器注入的不同方法及其优缺点，包括开发过程中常见的直接注入方式和官方推荐的标准注入方式。此外，还介绍了几种工具（如ng-annotate-loader、ng-annotate和gulp-ng-annotate）来简化和优化注入过程，确保代码在压缩混淆后仍能正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相对于主要写angular来说，所有的控制器就要添加注入需要用到的方法和模块。

先看开发过程的写法

    app.controller('appCtrl',function($scope,$rootScope,$q,$window){
    //$scope $rootScope $q $window
    })

开发的时候美滋滋，测试也没有问题，但是如果压缩混淆上线，所有的变量的都会被改成单个字符，直接导致代码不能用

再看官方推荐写法

    app.controller('appCtrl',['$scope','$rootScope','$q','$window',function($scope,$rootScope,$q,$window){
    //$scope $rootScope $q $window
    }])

标准的行业注入方式，压缩完以后正常使用，肯定是妥妥的，但是随着项目的越来越大，后期维护的成本大大的增加了(行业注入要求变量一一对应)，看起来也很不美观

下面推荐几种解决方法

ng-annotate-loader(适用webpack)

安装方法

npm install –save-dev ng-annotate-loader

使用方法（webpack.config.js）

    module: {
      loaders: [
        {
          test: /src.*\.js$/,
          use: [{ loader: 'ng-annotate-loader' }],
        }
      ]
    }

ng-annotate(全局安装)

安装方法

npm install -g ng-annotate
mac下需要sudo权限

使用方法

    angular.module("MyMod").controller("MyCtrl", ["$scope", "$timeout", function($scope, $timeout) {
            "ngInject";
         ...  
    }]);

gulp-ng-annotate(适用gulp)

安装方法

npm install –save-dev gulp-ng-annotate

使用方法（gulp.config）

    var gulp = require('gulp');
    var ngAnnotate = require('gulp-ng-annotate');
    gulp.task('default', function () {
        return gulp.src('src/app.js')
            .pipe(ngAnnotate())
            .pipe(gulp.dest('dist'));
    });