javascript - (AngularJS) Injection doesn't work after set up UI-Router -
i created directory (root/app/views/partials/) , when edit partial view nothing change in browser (no injection). have edit file app.js see changements done on partials/home.html exemple (or reload page). there there new directory observe grunt or else? ng-route , ui-router can done @ least same thing 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> i don't understand why have reload manually each evertime edit on partial view.
i think problem come grunt because have problem in directory created. give grunt information :
gruntfile.js
// generated on 2015-05-30 using generator-angular 0.11.1 'use strict'; // # globbing // performance reasons we're matching 1 level down: // 'test/spec/{,*/}*.js' // use if want recursively match subfolders: // 'test/spec/**/*.js' module.exports = function (grunt) { // load grunt tasks automatically require('load-grunt-tasks')(grunt); // time how long tasks take. can when optimizing build times require('time-grunt')(grunt); // configurable paths application var appconfig = { app: require('./bower.json').apppath || 'app', dist: 'dist' }; // define configuration tasks grunt.initconfig({ // project settings yeoman: appconfig, // watches files changes , runs tasks based on 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}' ] } }, // actual grunt server settings connect: { options: { port: 9000, // change '0.0.0.0' access server 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 par , there 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 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 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 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 usemin blocks enable smart builds automatically // concat, minify , revision files. creates configurations in memory // 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 , useminprepare configuration usemin: { html: ['<%= yeoman.dist %>/{,*/}*.html'], css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], options: { assetsdirs: [ '<%= yeoman.dist %>', '<%= yeoman.dist %>/images', '<%= yeoman.dist %>/styles' ] } }, // following *-min tasks produce minified files in dist folder // default, `index.html`'s <!-- usemin block --> take care of // minification. these next options pre-configured if not wish // use 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 make code safe minification automatically // using angular long form 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 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 tasks in parallel speed 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 start 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 "serve" task instead', function (target) { grunt.log.warn('the `server` task has been deprecated. use `grunt serve` start 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' ]); }; edit: if move partial view views directory work think have configure directory observed grunt or that.
i found problem seems grunt doesn't watch new folder partials. found gruntfile.js , inside there
grunt.initconfig({ ... livereload: { options: { livereload: '<%= connect.options.livereload %>' }, files: [ '<%= yeoman.app %>/{,*/}*.html', '.tmp/styles/{,*/}*.css', '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' ] } ... }) i added line
<%= yeoman.app %>/{,*/}/{,*/}*.html in 'files' array can't explain it... i've seen there 1 level watched grunt don't understand expression. watch html file in views , files in directories in views don't know how that. regular expression ?
now work not wanted. when i'll know expression i'll try right expression make grunt watch in views directoy.
edit1: found simple regex in gruntfile don't know how make recursive directories. when found right solution post here immediately.
edit2: don't use first try on top of post. have understand happend , explain best can.
'<%= yeoman.app %>/{,*/}*.html' (yeoman.app = 'app') will match
app/*.html or
app/*/*.html and had
app/views/partials/home.html so edit line looking deeper dir (here 2 levels more). replaced current line 1 :
'<%= yeoman.app %>/{,*/,*/*/,*/*/*/}*.html' for more information globbing pattern see link in edit1
Comments
Post a Comment