(AngularJS) 设置 UI-Router 后注入不起作用

Posted 2023-02-22

【中文标题】(AngularJS) 设置 UI-Router 后注入不起作用

【英文标题】：(AngularJS) Injection doesn't work after set up UI-Router

【发布时间】：2015-08-13 10:09:40

【问题描述】：

我创建了一个目录 (root/app/views/partials/)，当我编辑部分视图时，浏览器中没有任何变化（没有注入）。例如，我必须编辑 app.js 之类的文件才能查看对 partials/home.html 所做的更改（或重新加载页面）。 有什么事情可以说有一个新的目录可以观察 grunt 或其他东西吗？使用 ng-route 一切都很好，通常 ui-router 至少可以做与 ng-route 相同的事情。

root>app>app.js

angular
.module('frontApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngSanitize',
'ngTouch',
'ui.router'
]).config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider)
$urlRouterProvider.otherwise('/');
$stateProvider
  .state('home', 
    url: '/',
    templateUrl: '../views/partials/home.html',
    controller: function($scope)
      $scope.msg = 'Xavier';
    
  );
]);

root>app>views>index.html

<div id="container" ui-view></div>

root>app>views>partials>home.html

<div>
    <p>It doesn't work</p>
</div>

我不明白为什么每次在局部视图上编辑某些内容时都必须手动重新加载。

我认为问题来自 Grunt，因为我只在我刚刚创建的目录中遇到了问题。所以我也会给你咕噜咕噜的信息：

gruntfile.js

// Generated on 2015-05-30 using generator-angular 0.11.1
'use strict';

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/,*/*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'

module.exports = function (grunt) 

  // Load grunt tasks automatically
  require('load-grunt-tasks')(grunt);

  // Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);

  // Configurable paths for the application
  var appConfig = 
    app: require('./bower.json').appPath || 'app',
    dist: 'dist'
  ;

  // Define the configuration for all the tasks
  grunt.initConfig(

    // Project settings
    yeoman: appConfig,

    // Watches files for changes and runs tasks based on the changed files
    watch: 
      bower: 
        files: ['bower.json'],
        tasks: ['wiredep']
      ,
      js: 
        files: ['<%= yeoman.app %>/scripts/,*/*.js'],
        tasks: ['newer:jshint:all'],
        options: 
          livereload: '<%= connect.options.livereload %>'
        
      ,
      jsTest: 
        files: ['test/spec/,*/*.js'],
        tasks: ['newer:jshint:test', 'karma']
      ,
      styles: 
        files: ['<%= yeoman.app %>/styles/,*/*.css'],
        tasks: ['newer:copy:styles', 'autoprefixer']
      ,
      gruntfile: 
        files: ['Gruntfile.js']
      ,
      livereload: 
        options: 
          livereload: '<%= connect.options.livereload %>'
        ,
        files: [
          '<%= yeoman.app %>/,*/*.html',
          '.tmp/styles/,*/*.css',
          '<%= yeoman.app %>/images/,*/*.png,jpg,jpeg,gif,webp,svg'
        ]
      
    ,

    // The actual grunt server settings
    connect: 
      options: 
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 35729
      ,
      livereload: 
        options: 
          open: true,
          middleware: function (connect) 
            return [
              connect.static('.tmp'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect().use(
                '/app/styles',
                connect.static('./app/styles')
              ),
              connect.static(appConfig.app)
            ];
          
        
      ,
      test: 
        options: 
          port: 9001,
          middleware: function (connect) 
            return [
              connect.static('.tmp'),
              connect.static('test'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect.static(appConfig.app)
            ];
          
        
      ,
      dist: 
        options: 
          open: true,
          base: '<%= yeoman.dist %>'
        
      
    ,

    // Make sure code styles are up to par and there are no obvious mistakes
    jshint: 
      options: 
        jshintrc: '.jshintrc',
        reporter: require('jshint-stylish')
      ,
      all: 
        src: [
          'Gruntfile.js',
          '<%= yeoman.app %>/scripts/,*/*.js'
        ]
      ,
      test: 
        options: 
          jshintrc: 'test/.jshintrc'
        ,
        src: ['test/spec/,*/*.js']
      
    ,

    // Empties folders to start fresh
    clean: 
      dist: 
        files: [
          dot: true,
          src: [
            '.tmp',
            '<%= yeoman.dist %>/,*/*',
            '!<%= yeoman.dist %>/.git,*/*'
          ]
        ]
      ,
      server: '.tmp'
    ,

    // Add vendor prefixed styles
    autoprefixer: 
      options: 
        browsers: ['last 1 version']
      ,
      server: 
        options: 
          map: true,
        ,
        files: [
          expand: true,
          cwd: '.tmp/styles/',
          src: ',*/*.css',
          dest: '.tmp/styles/'
        ]
      ,
      dist: 
        files: [
          expand: true,
          cwd: '.tmp/styles/',
          src: ',*/*.css',
          dest: '.tmp/styles/'
        ]
      
    ,

    // Automatically inject Bower components into the app
    wiredep: 
      app: 
        src: ['<%= yeoman.app %>/index.html'],
        ignorePath:  /\.\.\//
      ,
      test: 
        devDependencies: true,
        src: '<%= karma.unit.configFile %>',
        ignorePath:  /\.\.\//,
        fileTypes:
          js: 
            block: /(([\s\t]*)\/2\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/2\s*endbower)/gi,
              detect: 
                js: /'(.*\.js)'/gi
              ,
              replace: 
                js: '\'filePath\','
              
            
          
      
    ,

    // Renames files for browser caching purposes
    filerev: 
      dist: 
        src: [
          '<%= yeoman.dist %>/scripts/,*/*.js',
          '<%= yeoman.dist %>/styles/,*/*.css',
          '<%= yeoman.dist %>/images/,*/*.png,jpg,jpeg,gif,webp,svg',
          '<%= yeoman.dist %>/styles/fonts/*'
        ]
      
    ,

    // Reads HTML for usemin blocks to enable smart builds that automatically
    // concat, minify and revision files. Creates configurations in memory so
    // additional tasks can operate on them
    useminPrepare: 
      html: '<%= yeoman.app %>/index.html',
      options: 
        dest: '<%= yeoman.dist %>',
        flow: 
          html: 
            steps: 
              js: ['concat', 'uglifyjs'],
              css: ['cssmin']
            ,
            post: 
          
        
      
    ,

    // Performs rewrites based on filerev and the useminPrepare configuration
    usemin: 
      html: ['<%= yeoman.dist %>/,*/*.html'],
      css: ['<%= yeoman.dist %>/styles/,*/*.css'],
      options: 
        assetsDirs: [
          '<%= yeoman.dist %>',
          '<%= yeoman.dist %>/images',
          '<%= yeoman.dist %>/styles'
        ]
      
    ,

    // The following *-min tasks will produce minified files in the dist folder
    // By default, your `index.html`'s <!-- Usemin block --> will take care of
    // minification. These next options are pre-configured if you do not wish
    // to use the Usemin blocks.
    // cssmin: 
    //   dist: 
    //     files: 
    //       '<%= yeoman.dist %>/styles/main.css': [
    //         '.tmp/styles/,*/*.css'
    //       ]
    //     
    //   
    // ,
    // uglify: 
    //   dist: 
    //     files: 
    //       '<%= yeoman.dist %>/scripts/scripts.js': [
    //         '<%= yeoman.dist %>/scripts/scripts.js'
    //       ]
    //     
    //   
    // ,
    // concat: 
    //   dist: 
    // ,

    imagemin: 
      dist: 
        files: [
          expand: true,
          cwd: '<%= yeoman.app %>/images',
          src: ',*/*.png,jpg,jpeg,gif',
          dest: '<%= yeoman.dist %>/images'
        ]
      
    ,

    svgmin: 
      dist: 
        files: [
          expand: true,
          cwd: '<%= yeoman.app %>/images',
          src: ',*/*.svg',
          dest: '<%= yeoman.dist %>/images'
        ]
      
    ,

    htmlmin: 
      dist: 
        options: 
          collapseWhitespace: true,
          conservativeCollapse: true,
          collapseBooleanAttributes: true,
          removeCommentsFromCDATA: true,
          removeOptionalTags: true
        ,
        files: [
          expand: true,
          cwd: '<%= yeoman.dist %>',
          src: ['*.html', 'views/,*/*.html'],
          dest: '<%= yeoman.dist %>'
        ]
      
    ,

    // ng-annotate tries to make the code safe for minification automatically
    // by using the Angular long form for dependency injection.
    ngAnnotate: 
      dist: 
        files: [
          expand: true,
          cwd: '.tmp/concat/scripts',
          src: '*.js',
          dest: '.tmp/concat/scripts'
        ]
      
    ,

    // Replace Google CDN references
    cdnify: 
      dist: 
        html: ['<%= yeoman.dist %>/*.html']
      
    ,

    // Copies remaining files to places other tasks can use
    copy: 
      dist: 
        files: [
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>',
          dest: '<%= yeoman.dist %>',
          src: [
            '*.ico,png,txt',
            '.htaccess',
            '*.html',
            'views/,*/*.html',
            'images/,*/*.webp',
            'styles/fonts/,*/*.*'
          ]
        , 
          expand: true,
          cwd: '.tmp/images',
          dest: '<%= yeoman.dist %>/images',
          src: ['generated/*']
        , 
          expand: true,
          cwd: 'bower_components/bootstrap/dist',
          src: 'fonts/*',
          dest: '<%= yeoman.dist %>'
        ]
      ,
      styles: 
        expand: true,
        cwd: '<%= yeoman.app %>/styles',
        dest: '.tmp/styles/',
        src: ',*/*.css'
      
    ,

    // Run some tasks in parallel to speed up the build process
    concurrent: 
      server: [
        'copy:styles'
      ],
      test: [
        'copy:styles'
      ],
      dist: [
        'copy:styles',
        'imagemin',
        'svgmin'
      ]
    ,

    // Test settings
    karma: 
      unit: 
        configFile: 'test/karma.conf.js',
        singleRun: true
      
    
  );


  grunt.registerTask('serve', 'Compile then start a connect web server', function (target) 
    if (target === 'dist') 
      return grunt.task.run(['build', 'connect:dist:keepalive']);
    

    grunt.task.run([
      'clean:server',
      'wiredep',
      'concurrent:server',
      'autoprefixer:server',
      'connect:livereload',
      'watch'
    ]);
  );

  grunt.registerTask('server', 'DEPRECATED TASK. Use the "serve" task instead', function (target) 
    grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
    grunt.task.run(['serve:' + target]);
  );

  grunt.registerTask('test', [
    'clean:server',
    'wiredep',
    'concurrent:test',
    'autoprefixer',
    'connect:test',
    'karma'
  ]);

  grunt.registerTask('build', [
    'clean:dist',
    'wiredep',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'ngAnnotate',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'filerev',
    'usemin',
    'htmlmin'
  ]);

  grunt.registerTask('default', [
    'newer:jshint',
    'test',
    'build'
  ]);
;

编辑：如果我将部分视图移动到视图目录，它可以正常工作，所以我想我必须配置 grunt 或类似的东西将观察哪个目录。

【问题讨论】：

您是否在您的应用模块中添加了 angular-ui-router.js &\ ui-router？

是的，我这样做了，我更新了问题。

templateUrl 明确表示您的视图应该添加到views 文件夹中。如果您将 html 放在其他位置，则必须相应地设置路径

@pankajparkar 我阅读了文档，没有关于所需目录的内容。 Doc这里什么都没有...你能告诉我你在哪里找到了另一个文档吗？

只要你把你的视图放在任何地方..你应该将该路径引用到templateUrl。

【参考方案1】：

我发现问题似乎是 Grunt 没有观看我的新文件夹部分。我找到了一个 gruntfile.js，里面有

grunt.initConfig(
...
livereload: 
    options: 
      livereload: '<%= connect.options.livereload %>'
    ,
    files: [
      '<%= yeoman.app %>/,*/*.html',
      '.tmp/styles/,*/*.css',
      '<%= yeoman.app %>/images/,*/*.png,jpg,jpeg,gif,webp,svg'
    ]
  
...
)

我加了一行

<%= yeoman.app %>/,*//,*/*.html

在“文件”数组中，但我无法解释它是什么...我看到 grunt 只看到了一个级别，但我不明白这个表达式。我想查看视图中的所有 html 文件以及视图中所有目录中的所有文件，但我不知道该怎么做。是正则表达式吗？

现在它可以工作了，但不是我想要的。当我知道表达式是什么时，我会尝试做正确的表达式，让 grunt 观察 views 目录中的所有内容。

EDIT1：我找到了这个Simple regex in Gruntfile 但我不知道如何使它对所有目录都递归。当我找到正确的解决方案后，我立即将其发布在此处。

EDIT2：不要在这篇文章之上使用我的第一次尝试。我已经明白发生了什么，我会尽我所能向你解释。

'<%= yeoman.app %>/,*/*.html' (yeoman.app = 'app')

将匹配

app/*.html 

或

app/*/*.html 

我有

app/views/partials/home.html

所以我编辑此行以寻找更深层次的目录（这里多 2 级）。我用这一行替换了当前行：

'<%= yeoman.app %>/,*/,*/*/,*/*/*/*.html'

有关通配模式的更多信息，请参见edit1中的链接