Question

如果我的应用程序在responseError代码中捕获了http错误，我正在使用Interceptor来显示toast消息。我正在使用 AngularJS Interceptor 。这是一个MEAN.JS应用程序。

拦截代码

...
<dependency>
    <groupId>com.mycompany</groupId> 
    <artifactId>beans-conversion</artifactId> 
    <version>1.0.0-SNAPSHOT</version>
</dependency>
...
<build>
    <finalName>${project.artifactId}</finalName>
    <resources>
        <resource>
            <directory>src/main/resources</directory>
            <includes>
                <include>application.properties</include>
                <include>logback.xml</include>
                <include>logback.xsd</include>
            </includes>
            <filtering>true</filtering>
        </resource>
    </resources>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.3</version>
            <configuration>
                <source>1.8</source>
                <target>1.8</target>
                <encoding>UTF-8</encoding>
            </configuration>
        </plugin>

        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-shade-plugin</artifactId>
            <version>2.4.3</version>
            <executions>
                <execution>
                    <phase>package</phase>
                    <goals>
                        <goal>shade</goal>
                    </goals>
                    <configuration>
                        <filters>
                            <filter>
                                <artifact>com.mycompany:beans-conversion</artifact>
                                <excludes>
                                    <exclude>application.properties</exclude>
                                    <exclude>logback.xml</exclude>
                                    <exclude>logback.xsd</exclude>
                                </excludes>
                            </filter>
                            <filter>
                                <artifact>*:*</artifact>
                                <excludes>
                                    <exclude>META-INF/*.SF</exclude>
                                    <exclude>META-INF/*.DSA</exclude>
                                    <exclude>META-INF/*.RSA</exclude>
                                </excludes>
                            </filter>
                        </filters>
                    </configuration>
                </execution>
            </executions>
        </plugin>                   
    </plugins>
</build>

错误：

我试图找出解决办法，但几个小时后就停止了......

app.js

angular.module('rugCoPro')

.factory('RugHttpInterceptor', ['$q', 'Session', '$state', 'toaster',
function($q, session, $state, toaster) {

    return {        
        'request': function(config) {
            console.log("inside the request."); 
            return config;
        },       

        // Optional method        
        'response': function(response) {
            // do something on response success
            console.log('inside of response');

            return response;
        },

        // optional method 
        'responseError': function(rejection) {
            // Here you can do something in response error, like handle errors, present error messages etc.
            if(rejection.status === 401){
                console.log( "inside the response error : "+ rejection.status);
                $state.go('auth');
            }

            // console.log("inside the response error " + rejection.status);
            return $q.reject(rejection);
        }
    };
}]);

脚本和CSS 使用npm install并添加gruntfile.js

“node_modules / angularjs-烤面包机/ toaster.css”，
“node_modules / angularjs-烤面包机/ toaster.js”，

Gruntfile.js

angular.module('rugCoPro', [
    'ngMaterial',
    'ngMdIcons',
    'ui.router',
    'e3-core-ui.services', 
    'e3-core-ui.utils'  
])

.config(['$stateProvider', '$routeProvider','$httpProvider','$mdThemingProvider', '$mdIconProvider', function($stateProvider, $routeProvider, $httpProvider, $mdThemingProvider, $mdIconProvider) { 

        //rug interceptor code
    $httpProvider.interceptors.push('RugHttpInterceptor');
...
}

的index.html

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['front-end/src/*.js', 'front-end/src/controllers/**/*.js', 'front-end/src/services/**/*.js'],
        dest: 'public/js/<%= pkg.name %>.min.js'
      },
      lib:{
        src: [
          "node_modules/angular/angular.min.js",
          "node_modules/angular-route/angular-route.min.js",
          "node_modules/angular-aria/angular-aria.min.js",
          "node_modules/angular-animate/angular-animate.min.js",
          "node_modules/angular-material/angular-material.min.js",
          "node_modules/moment/moment.min.js",
          "front-end/lib/e3-core-ui.js",
          **// angularjs -toaster
          "node_modules/angularjs-toaster/toaster.min.js",**
          "node_modules/angular-material-icons/angular-material-icons.min.js",
          "node_modules/angular-ui-router/release/angular-ui-router.min.js"
        ],
        dest: 'public/js/libs.min.js'
      },
      lib_debug:{
        src: [
          "node_modules/angular/angular.js",
          "node_modules/angular-route/angular-route.js",
          "node_modules/angular-aria/angular-aria.js",
          "node_modules/angular-animate/angular-animate.js",
          "node_modules/angular-material/angular-material.js",
          "node_modules/moment/moment.js",
          "front-end/lib/e3-core-ui.js",
          **// angularjs -toaster
          "node_modules/angularjs-toaster/toaster.js",**
          "node_modules/angular-material-icons/angular-material-icons.js",
          "node_modules/angular-ui-router/release/angular-ui-router.js"
        ],
        dest: 'public/js/libs.js'
      },
      css:{
        src:[
          "node_modules/angular-material/angular-material.css",
          "front-end/lib/e3-core-style.min.css",
          "front-end/style/app.css",
          **// angularjs -toaster
          "node_modules/angularjs-toaster/toaster.css",**
        ],
        dest:'public/css/lib.css'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'public/js/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-jasmine');
  grunt.loadNpmTasks('grunt-jasmine-node-new');

  /*grunt.registerTask('cleanup', 'cleans build tmp files', function(){
    var gruntConfig = grunt.config();
    grunt.file.delete(gruntConfig.concat.dist.dest);
  });*/

  grunt.registerTask('default', ['concat', 'uglify', 'jasmine_node', 'jasmine'/*, 'cleanup'*/]);
  grunt.registerTask('debug', ['concat', 'jasmine_node', 'jasmine']);


};

Answer 1

主应用程序中缺少angularjs-toaster模块：

angular.module('rugCoPro', [
    'ngMaterial',
    'ngMdIcons',
    'ui.router',
    'toaster', // This was missing from your code
    'e3-core-ui.services', 
    'e3-core-ui.utils'  
]);

您可以查看angularjs-toaster README：

中的示例

// Display an info toast with no title
angular.module('main', ['toaster', 'ngAnimate'])
  .controller('myController', function($scope, toaster) {
    $scope.pop = function(){
      toaster.pop('success', "title", "text");
    };
  });

您还需要在主模板（angularjs-toaster）中加入index.html模块。以下是文档中的示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.js"></script>

Answer 2

通常这是因为它没有包含在你的.html中。

确保在加载angular.js后加载：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.js"></script>

未知提供者：toasterProvider＆lt; - toaster＆lt; - RugHttpInterceptor＆lt; - $ http＆lt; - ng1UIRouter

2 个答案: