我试图使用
samaxes minify maven plugin在我的angularjs应用程序中缩小javascripts和css文件.我能够获得所有js& css缩小并使用maven构建war文件,但在尝试打开app url时我得到错误:[$injector:unpr]未知提供者:aProvider< - a我的应用程序不起作用. 下面我提供我的pom插件配置
<plugin>
<groupId>com.samaxes.maven</groupId>
<artifactId>minify-maven-plugin</artifactId>
<version>1.7.4</version>
<executions>
<execution>
<id>min-js</id>
<phase>prepare-package</phase>
<goals>
<goal>minify</goal>
</goals>
</execution>
</executions>
<configuration>
<charset>UTF-8</charset>
<skipMerge>true</skipMerge>
<cssSourceDir>myapp/styles</cssSourceDir>
<jsSourceDir>myapp/javascript</jsSourceDir>
<jsEngine>CLOSURE</jsEngine>
<closureLanguage>ECMASCRIPT5</closureLanguage>
<closureAngularPass>true</closureAngularPass>
<nosuffix>true</nosuffix>
<webappTargetDir>${project.build.directory}/minify</webappTargetDir>
<cssSourceIncludes>
<cssSourceInclude>**/*.css</cssSourceInclude>
</cssSourceIncludes>
<cssSourceExcludes>
<cssSourceExclude>**/*.min.css</cssSourceExclude>
</cssSourceExcludes>
<jsSourceIncludes>
<jsSourceInclude>**/*.js</jsSourceInclude>
</jsSourceIncludes>
<jsSourceExcludes>
<jsSourceExclude>**/*.min.js</jsSourceExclude>
</jsSourceExcludes>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.4</version>
<configuration>
<webResources>
<resource>
<directory>${project.build.directory}/minify</directory>
</resource>
</webResources>
</configuration>
</plugin>
目录结构
我的控制器结构
'use strict';
angular.module('myApp').controller('MyController',function($scope,$filter,$location,$interval,ngTableParams,$modal,$transition,myService,$timeout) {
...
});
Chrome控制台错误
samaxes minify maven plugin是否支持缩小angularjs应用程序或我是否需要使用任何其他替代方案?
请帮助我在我的angularjs应用程序中缩小js和css.
解决方法
你走在正确的轨道上.
请注意,当您缩小控制器的JavaScript代码时,其所有函数参数也将缩小,并且依赖项注入器将无法正确识别服务.
可以通过使用依赖项的名称来注释函数来克服这个问题,这些依赖项的名称是以字符串形式提供的,这些字符串不会被缩小.有两种方法:
(1.)在控制器函数上创建一个$inject属性,该函数包含一个字符串数组.例如:
function MyController($scope,$timeout) {...}
MyController.$inject = ['$scope','$filter','$location','$interval','ngTableParams','$modal','$transition','myService','$timeout'];
(2.)使用内联注释,而不是仅提供函数,而是提供数组.在你的情况下,它看起来像:
angular.module('myApp').controller('MyController',['$scope','$timeout',$timeout) {
...
}]);
有关详细信息,请查看此tutorial的“关于缩小的注意事项”部分.