Question

我想问一些帮助。我正在做这个教程，在Angular部分结束时，我的<h1>标签没有出现。除了标题，我把一切都做对了。你能帮我解决一下吗？

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

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
    <script src="http://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" ng-controller="MainCtrl">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">

        <ul-view></ul-view>

  <script type="text/ng-template" id="/home.html">
    <div class="page-header">
        <h1>Flapper News</h1>
    </div>
    </script>

    <script type="text/ng-template" id="/posts.html">
        <div class="page-header">
            <h3>
                <a ng-show="post.link" href="{{post.link}}">    
                    {{post.title}}
                </a>
                <span ng-hide="post.link">
                   {{post.title}}
                </span>
            </h3>
        </div>

        <div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
            <span class="glyphicon glyphicon-thumbs-up"
                ng-click="font-size:20px; margin-left:10px;"></span>
                {{comment.upvotes}} - by {{comment.author}}
            <span style="font-size:20px; margin-left:10px;">
                {{comment.body}}
            </span>
        </div>

        <form ng-submit="addComment()" style="margin-top:30px;">
           <h3>Add a new comment</h3>

        <div class="form-group">
            <input type="text" class="form-control" placeholder="Comment" ng-model="body">
        </div>
        <button type="submit" class="btn btn-primary">Post</button>
    </form>
    </script>







            <div ng-repeat ="post in posts | orderBy: '-upvotes'">
       <span class="glyphicon glyphicon-thumbs-up" ng-click="upvote(post)"></span>
           {{post.upvotes}}
       <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>
               <a href="#/posts/{{$index}}">Comments</a>
           </span>
       </span>
    </div>

           <form ng-submit="addPost()" style="margin-top:30px;">
           <h3>Add new post</h3>

        <div class="form-group">
            <input type="text" class="form-control" placeholder="Title" ng-model="title">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Link" ng-model="link">
        </div>
        <button type="submit" class="btn btn-primary">Post</button>
    </form>        

        </div>
    </div>

</body>
</html>

这就是我的app.js文件的样子：

var app = angular.module('flapperNews', ['ui.router']);

app.config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

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



        $urlRouterProvider.otherwise('home');
    }


]);


app.factory('posts', [function(){
    //service body
    var o = {
        posts: []
    };
    return o;
}]);

app.controller('MainCtrl', [
    '$scope',
    'posts',
    function($scope, posts){
        $scope.test = 'Hello World';
        $scope.posts = posts.posts;
        $scope.posts = [
            {title: 'post 1', upvotes: 5},
            {title: 'post 2', upvotes: 2},
            {title: 'post 3', upvotes: 15},
            {title: 'post 4', upvotes: 9},
            {title: 'post 5', upvotes: 4}
        ];

        $scope.addPost = function(){
            if($scope.title || $scope.title === '') {return;}
        $scope.posts.push({
            title: $scope.title, 
            link: $scope.link, 
            upvotes: 0,
            comments: [
                {author: 'Joe', body: 'Cool post!', upvotes: 0},
                {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
            ]
        });
        $scope.title = '';
        $scope.link = '';
        };

        /* The function that increments upvotes */
        $scope.incrementUpvotes = function(post) {
            post.upvotes += 1;
        };

}]);



app.controller('PostsCtrl', [
    '$scope',
    '$stateParams',
    'posts',
    function($scope, $stateParams, posts) {

        $scope.post = posts.posts[$stateParams.id];
        $scope.addComment = function(){
        if($scope.body === '') {return;}
        $scope.post.comments.push({
            body: $scope.body,
            author: 'user',
            upvotes:0
    });
    $scope.body = '';
    };
    }



]);

Answer 1

我认为xlsb是错误的。应该是

<强> <ul-view></ul-view>

Thinkster.io MEAN堆栈教程

1 个答案: