Angular automating importing scripts

Question

I am wondering if there is a better way to import all my angular scripts. Currently, if I add a new controller or component I need to go into my index.html and import it at the bottom. This is fine but is a tedious task and I can imagine after the application grows, this may get messy. Is there a best practice to automate this?

My index page looks like this: (All criticism is welcome)

<!DOCTYPE html>
<html lang="en" ng-app="app">
    <head>
        <title>Test Page</title>
        <!-- Stylesheets -->
        <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/main.css">

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
    </head>
    <body>
        <popcorn-header></popcorn-header>

        <!-- .container -->
        <div class="container">

            <div class="row">
                <div class="col-lg-12 text-center">

                    <div ui-view></div>

                </div>
            </div>

        </div>
        <!-- /.container -->

        <!-- Vendor -->
        <script src="lib/jquery/dist/jquery.min.js"></script>
        <script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="lib/angular/angular.min.js"></script>
        <script src="lib/angular-route/angular-route.min.js"></script>
        <script src="lib/angular-animate/angular-animate.min.js"></script>
        <script src="lib/angular-resource/angular-resource.min.js"></script>
        <script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script>
        <script src="https://www.youtube.com/iframe_api"></script>
        <script src="lib/angular-youtube-mb/dist/angular-youtube-embed.min.js"></script>

        <!-- Bootstrapping -->
        <script type="text/javascript" src="app.js"></script>

        <!-- Routes -->
        <script type="text/javascript" src="routes.js"></script>

        <!-- Core -->
        <script type="text/javascript"src="components/api/api.js"></script>
        <script type="text/javascript"src="constants.js"></script>

        <script type="text/javascript"src="components/api/ApiFactory.js"></script>

        <script type="text/javascript"src="components/header/HeaderDirective.js"></script>

        <script type="text/javascript"src="components/feed/feed.js"></script>
        <script type="text/javascript"src="components/feed/FeedController.js"></script>
        <script type="text/javascript" src="components/feed/FeedDirective.js"></script>
    </body>
</html>

Look at some angular seed projects such as https://github.com/ngbp, These have build script (grunt script) that automate this task. — Chandermani, May 13 '15 at 15:01
possible duplicate of [Include all javascript files in a directory to a html file in angularjs? with grunt?](http://stackoverflow.com/questions/24097146/include-all-javascript-files-in-a-directory-to-a-html-file-in-angularjs-with-gr) — Maarten Bicknese, May 13 '15 at 15:01

jad-panda · Answer 1 · 2015-05-13T15:42:03.817

1

If your application is smaller and has only 10-20 script and css files then writing simple grunt task for generating html will be simple and good. But if you have hundreds of script and styles then you should use one of the following module loader library. these libraries will make your life really easy in managing modules based application.

And Angular's module system works really great with all of these.

RequireJs

http://requirejs.org/

Browserify

http://browserify.org/

Webpack

http://webpack.github.io/

edited May 13 '15 at 15:42

answered May 13 '15 at 15:07

jad-panda

2,509
16
22

Are there any benefits to one over the other? I think Browserify looks the most appealing to me. – Luca May 13 '15 at 16:39
1

@Luca, I have worked with Requirejs (Asynchronous Module Definition, AMD) for quite a long and it works really great, requirejs is the oldest guy in the market. Browserify is more about having node.js module flavour(CommonJS module system) on the front end side. And, Webpack is quite new in the market and it supports both CommonJs and AMD. Webpack is all in one bundler /module system, it also support packing of all static resources (stylesheets, images, webfonts etc.). webpack's concepts like Multiple entry points and common files etc. are really amazing, at-least for me – jad-panda May 13 '15 at 17:50

Angular automating importing scripts

1 Answers1