Question

我试图启动一个角度模块，但我似乎无法理解它为什么不起作用。所有的控制器，模块和指令对我来说都没问题。我觉得好像问题是在index.html页面中如何加载所有内容。任何人都知道可能是什么问题？我已经检查了类似的问题但到目前为止没有运气。

的index.html

    <!doctype html>
    <html lang="en" ng-app="application">
    <head>
        <meta charset="utf-8">
        <title>My Portfolio</title>
        <link rel="stylesheet" href="styles/main.css"/>
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/angular-route/angular-route.min.js"></script>
        <script src="bower_components/angular-loader/angular-loader.min.js"></script>
        <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="scripts/module.js"></script>
        <script src="scripts/controllers/mainHeroController.js"></script>
        <script src="scripts/directives/mainHero.directive.js"></script>
    </head>

    <body ng-app="webApp">
        <nav id="main-navbar" class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand" href="#">My Portfolio</a>
            </div>
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Page 1</a></li>
              <li><a href="#">Page 2</a></li> 
              <li><a href="#">Page 3</a></li> 
            </ul>
          </div>
        </nav>
            <div id="main-jumbotron" class="jumbotron container-fluid">
            <div class="row"> 
                <div class="col-md-4">
                    <img id="profile-pic" src="images/ProfilePic.jpg"/>
                </div>
                <div class="col-md-8">
                  <h1 class="display-3">Hello world!</h1>
                      <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
                      <hr class="m-y-2">
                      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
                      <p class="lead">
                        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
                    </p>
                </div>    
            </div>
            </div>
        <div id="container1">
            <mainHero></mainHero>
        </div>
        <div id="container2">
            Container 2
        </div>
    </body>
    </html>

module.js

    (function()
    {
        'use strict'

        angular
            .module('webApp', [])


    })();

mainHero.js

    (function mainHeroDirective() 
        {

        'use strict'

        angular
            .module('webApp')
            .directive('mainHero', mainHero);

         mainHero.$inject = [];

        function mainHero() 
        {
            var directive =
                {
                    restrict: 'E',
                    controller: 'MainHeroController',
                    //controllerAs: 'mainHero',
                    scope: {},
                    template: 'Directive works!'   
                }

        }
    })();

mainHeroController.js

    (function mainHeroController() 
        {

        'use strict'

        angular
            .module('webApp')
            .controller('MainHeroController', MainHeroController);

        mainHeroController.$inject = [];

        function MainHeroController() 
            {
                alert('works!');
            }

     })()

Answer 1

错误实际上是由文档顶部的“ng-app”引起的：

<html lang="en" ng-app="application">

您可以通过错误中的URL告诉（种类）：

http://errors.angularjs.org/1.5.8/ $注射器/ NOMOD？的 P0 =应用

你的指令的定义方式还有另一个问题，因为函数没有返回任何内容，也是控制器中的拼写错误，因为案例不一致。

我将其复制到codepen并更正了这些错误：

http://codepen.io/anon/pen/ZpbZRJ

希望它有所帮助！

需要帮助才能加载我的Angular模块：未捕获错误：[$ injector：modulerr]

1 个答案: