Question

我想知道是否有更好的方法来导入我的所有角度脚本。目前，如果我添加一个新的控制器或组件，我需要进入我的index.html并将其导入底部。这很好，但是这是一项繁琐的任务，我可以想象在应用程序增长之后，这可能会变得混乱。是否有自动执行此操作的最佳做法？

我的索引页面如下所示:(欢迎所有批评）

<!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>

Answer 1

如果您的应用程序较小且只有10-20个脚本和css文件，那么编写用于生成html的简单grunt任务将非常简单。但是如果你有数百个脚本和样式，那么你应该使用以下模块加载器库之一。这些库将使您在管理基于模块的应用程序时非常轻松。

Angular的模块系统非常适用于所有这些。

<强> RequireJs

http://requirejs.org/

<强> Browserify

http://browserify.org/

<强>的WebPack

http://webpack.github.io/

Angular自动导入脚本

1 个答案: