angularjs - Angular - Place scripts in its own import file -
the idea have thin index.html file, right essay of script tags in development mode this
<html> <body> <script></script> <script></script> <script></script> <script></script> <script></script> <script></script> <script></script> <!-- etc --> </body> i thought using
<html> <body> <link rel="import" href="imports.html" </body> with imports.html looking like
<script></script> <script></script> <script></script> <script></script> <script></script> but kinds of injector errors. main question approach work adjustments?
yes, use gulp browserify let use require tags nodejs, , build dependency chain 1 bundled file, can uglify , gzip dramatically lower load time. gulp has many modules this. i'd recommend browser-sync too.
i split loads 2 files, depends.js requires angular dependencies, , app.js has lighter app code changing. use watchify monitor browserify chain , when triggers doesn't have update dependencies, caches non changing files , live reload incredibly fast. can setup load dependencies asynchronously head tag prior css can have major impact since contains majority of payload. when using browserify source code way cleaner since anonymous function wrapping @ build time you.
i should note app.js never physically requires depends.js because bundle 1 package slow down live reload builds, , wouldn't allow clever pushes allow depends.js stay cached on client. assumes angular defined on window object, guaranteed (described below).
i use same setup in prod because beneficial load times, chrome dev tools network tab shows of scripts load asynchronously. need wrap app code in function , execute @ end of depends code if load async because otherwise app try , call angular before it's loaded, since app code smaller dependencies.
here example of how clean code becomes - angularjs browserify
Comments
Post a Comment