javascript - How to load angularjs scripts files -
i have angularjs application, , there bunch of controllers, services , directives. let me controller.js, service.js , directive.js, truth there many more js files three. reduce http request, i'm combining js files one, let me it's app.js. index.html looks like
<html lang="en"> <body> <div data-ng-view></div> <script src="app.js"></script> </body> </html> however, in development environment, want debug separated files not combined one. modified index.html gives capability.
<html lang="en"> <body> <div data-ng-view></div> <script src="controller.js"></script> <script src="service.js"></script> <script src="directive.js"></script> </body> </html> however, don't want change index.html. possible define like:
require('controller.js'); require('service.js'); require('directive.js'); in app.js. i've done search, , results show there's way using angularjs , requirejs together, however, needs me re-define controllers , services in requirejs way. takes lot of effort in case. and, don't need implement dynamically loading since in production environment, there's 1 javascript file needs downloaded.
if want keep files separate testing , debugging, combine them production, i'd recommend build system grunt.js or personal favorite, gulp.js. using these automated build tools, have create task create project directory, combine, minify, , mangle js files , generate maps allow dev tools reference original files. can wonders workflow. require node.js, have install well. it's still amount of effort, i'd think better rewriting code.
an example build file specific case might like:
//this(my-js) grab js file in js directory, combine, minify, mangle, //rename , create sourcemaps. has dependency(js-libs) handle //your libraries first. gulp.task('my-js', ['js-libs'], function() { return gulp.src([ 'src/js/*.js', ]) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(concat('app.min.js')) .pipe(uglify()) .pipe(sourcemaps.write('maps')) .pipe(gulp.dest('build/js')); }); //this task run js task , start task watches files //changes , reruns my-js task anytime changes gulp.task('default', ['my-js'], function () { gulp.watch('src/js/*.js', ['my-js']); }); now example came off top of head. untested. once es6 comes out we'll have access import 'somefile'. also, keep in mind when http/2 implemented, we'll have multiplexing, allow multiple file requests in single connection: https://http2.github.io/faq/#why-is-http2-multiplexed
Comments
Post a Comment