Question

我是AngularJs的新手，并且仍然坚持使用路由部分的教程：https://thinkster.io/tutorials/mean-stack/routing-views-with-angular

错误讯息：未捕获错误：[$ injector：modulerr]无法实例化模块flapperNews，原因如下：错误：[$ injector：nomod]模块'flapperNews'不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

在此错误消息之前，我有更高版本的angularjs（1.5.7）并且它给了我这个错误 - 有人在网上建议您更改版本。我有这个错误：未捕获的错误：[$ injector：modulerr]

请帮助我，以便我可以继续学习。

以下是我的文件：的index.html：

<html>
    <head>
        <title>My Angular App!</title>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
        <script src="app.js"></script>
        <style> .glyphicon-thumbs-up { cursor:pointer } </style>
    </head>
    <body ng-app="flapperNews">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <ui-view></ui-view>
            </div>
        </div>
        <script type="text/ng-template" id="/home.html">
            <div class="page-header">
                <h1>Flapper News</h1>
            </div>
            <!-- rest of template -->
            <div ng-repeat="post in posts | orderBy:'-upvotes'">
                <span ng-click="incrementUpvotes(post)">&#9650</span>
                <span ng-click="decrementUpvotes(post)">&#9660</span>
                <span style="font-size:20px; margin-left:10px;">
                    <a ng-show="post.link" href="{{post.link}}">
                        {{post.title}}
                    </a>
                    <span ng-hide="post.link">
                        {{post.title}}
                    </span>
                </span>
                - upvotes: {{post.upvotes}}
            </div>
            <form ng-submit="addPost()" 
                style="margin-top:30px;">
                <h3>Add a new post</h3>
                <div class="form-group">
                    <input type="text"
                    class="form-control"
                    placeholder="Title"
                    ng-model="title"></input>
                </div>
                <div class="form-group">
                    <input type="text"
                    class="form-control"
                    placeholder="Link"
                    ng-model="link"></input>
                </div>
                <button type="submit" class="btn btn-primary">Post</button>
            </form>
        </script>
    </body>
</html>

app.js：

var count = 0;
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    count++;
    return Math.floor(Math.random() * (max - min)) + min;
}
(function (){
    angular.module('flapperNews', ['ui.router'])
    .config([
        '$stateProvider',
        '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider) {

          $stateProvider
            .state('home', {
              url: '/home',
              templateUrl: '/home.html',
              controller: 'MainCtrl'
            });

          $urlRouterProvider.otherwise('home');
        }
    ])
    .factory('posts', [function(){
        // service body
        var obj = {
            posts: []
        };
        return obj;
    }])
    .controller('MainCtrl',[
        '$scope', 
        'posts',
        function($scope, posts){
            $scope.test = 'Reddit Emulator';
            $scope.posts = posts.posts

            $scope.addPost = function(){
                if ($scope.title === '' || $scope.title == null)
                    $scope.title = 'post ' + (count + 1);
                $scope.posts.push({
                    title: $scope.title,
                    link: $scope.link,
                    upvotes: getRandomInt(0,25)
                });
                $scope.posts = posts.posts
                $scope.title = '';
                $scope.link = '';
            };
            $scope.incrementUpvotes = function(post) {
                post.upvotes += 1;
            };
            $scope.decrementUpvotes = function(post) {
                post.upvotes -= 1;
            };
    }]);
})

谢谢！

我的文件顶部似乎已被切断但我没有时间修理它的ATM。遗憾

Answer 1

您的Javascript代码封装在

之间

(function (){
 ...
})

需要执行

才能加载内部代码。为此，您可以在末尾添加（）;

(function (){
 ...
})();

Answer 2

您的app.js格式不正确。

试试这个

angular.module('flapperNews', ['ui.router'])
.config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

      $stateProvider
        .state('home', {
          url: '/home',
          templateUrl: '/home.html',
          controller: 'MainCtrl'
        });

      $urlRouterProvider.otherwise('home');
    }
])
.factory('posts', [function(){
    // service body
    var obj = {
        posts: []
    };
    return obj;
}])
.controller('MainCtrl',[
    '$scope', 
    'posts',
    function($scope, posts){
        $scope.test = 'Reddit Emulator';
        $scope.posts = posts.posts

        $scope.addPost = function(){
            if ($scope.title === '' || $scope.title == null)
                $scope.title = 'post ' + (count + 1);
            $scope.posts.push({
                title: $scope.title,
                link: $scope.link,
                upvotes: getRandomInt(0,25)
            });
            $scope.posts = posts.posts
            $scope.title = '';
            $scope.link = '';
        };
        $scope.incrementUpvotes = function(post) {
            post.upvotes += 1;
        };
        $scope.decrementUpvotes = function(post) {
            post.upvotes -= 1;
        };

}]);

然后将getRandomInt函数放在控制器中。

AngularJS Routing ui.router无法实例化模块flapperNews

2 个答案: