(AngularJS)在设置了UI-Router后注入不起作用
(AngularJS) Injection doesn't work after set up UI-Router
我创建了一个目录(root/app/views/partials/),当我编辑一个局部视图时,浏览器中没有任何变化(没有注入)。我必须编辑像app.js这样的文件,以查看对partials/home.html所做的更改,例如(或重新加载页面)。有没有什么东西可以说明有一个新的目录来观察grunt或其他东西?有了ng-route,一切都很好,通常情况下,ui-router至少可以做和ng-route一样的事情。
根>软件> 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';
}
});
}]);
根>软件>视图> index . html
<div id="container" ui-view></div>
根>软件>视图>泛音> home。
<div>
<p>It doesn't work</p>
</div>
我不明白为什么每次我在局部视图上编辑一些东西时都要手动重新加载。
我认为问题来自Grunt,因为我只在我刚刚创建的目录中有问题。所以我也会给你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或类似的东西观察。
我发现问题似乎是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
在'files'数组,但我不能解释它是什么…我看到grunt只看了一层,但我不明白这个表情。我想查看视图中所有的html文件以及视图中所有目录下的所有文件但我不知道怎么做。是正则表达式吗?
现在它工作,但不是我想要的。当我知道表达式是什么时,我将尝试做正确的表达式,使grunt在视图目录中查看所有内容。
EDIT1:我在Gruntfile中发现了这个简单的正则表达式,但我不知道如何使它对所有目录递归。当我找到正确的解决方案时,我马上把它贴在这里。
EDIT2:不要把我的第一次尝试放在这篇文章的顶部。我已经明白发生了什么事,我会尽我所能向你解释的。
'<%= yeoman.app %>/{,*/}*.html' (yeoman.app = 'app')
将匹配
app/*.html
或
app/*/*.html
和
app/views/partials/home.html
所以我编辑这一行来寻找更深的dir(这里多了2层)。我将当前行替换为以下一行:
'<%= yeoman.app %>/{,*/,*/*/,*/*/*/}*.html'
有关globing模式的更多信息,请参阅edit1
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- Angular JS/UI Router:为给定状态禁用指令
- 使用AngularJS中的$stateProvider和ui.router
- 带有ui.router的带角度的嵌套视图
- 如何使用AngularJS,Vise和UI Router全局实现身份验证
- 如何使用AngularJS和ui-router从Laravel 5.1获取下载文件
- AngularJS - ui.router - 如何在动态添加它们后重定向到所需的状态
- Angular UI Router-在不了解第二级嵌套视图的情况下更改第三级嵌套视图
- angularjs+ui.router:指令控制器和链接函数之间的不同行为
- AngularJS : ui.router 不显示模板
- [AngularJS][UI Router]在视图中显示视图
- Angular UI Router Resolve在AJAX完成之前未阻止状态更改
- 隐藏空模板,直到使用Restangular和UI Router加载数据
- Angular onEnter ui.router方法无法正常工作
- 如何使用Angular UI Router解析所有状态的数据
- Angular ui-router 解析中的动态依赖注入
- Angular UI-Router最小化错误-如何将Resolve语法改为基于字符串注入
- 注入另一个(父)控制器逻辑到派生状态(angularjs ui-router)
- (AngularJS)在设置了UI-Router后注入不起作用
- 如何在我的应用中包含和使用ui-router而不会出现注入器错误