未加载内联HTML ng模板

Inline HTML ng-templates not loading

本文关键字：ng 模板 HTML 加载      更新时间：2023-09-26

我正在学习Thinkster上的教程来学习Angular和MEAN Stack，但由于某种原因，我无法将模板与加载的HTML内联加载。有人能指出我哪里错了吗？代码的颜色不正确，在浏览器中加载时页面也不会呈现任何内容。

我有什么不明白的？模板标记似乎不匹配？

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Flapper News</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" style="margin-left:20px; margin-right:20px;"-->
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <ui-view></ui-view>
            </div>
        </div>
        <!-- Start template -->
        <script type="text/ng-template" id="/home.html">
            <div class="page-header">
                <h1>Flapper News</h1>
            </div>
            <div ng-repeat="post in posts | orderBy: '-upvotes'">
                <span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></span>
                {{post.upvotes}}
                <span style="font-size:20px; margin-left:10px;">
                    <a ng-show="post.link" href="{{post.title}}">
                        {{post.title}}
                    </a>
                    <span ng-hide="post.link">
                        {{post.title}}
                    </span>
                </span>
            </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> 
        <!-- end template -->
        <!-- start template -->
        <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="incrementUpvotes(comment)"></span>
            {{comment.upvotes}} - by {{comment.author}}
            <span style="font-size:20px; margin-left:10px;">
                {{comment.body}}
            </span>
          </div>
        </script>
        <!-- end template -->
    </body>
</html>

我得到这个错误：

Error: $injector:modulerr
Module Error

这是我的app.js

    /*global angular*/
var app = angular.module('flapperNews', []);
angular.module('flapperNews', ['ui.router']);
app.factory('posts',[function(){
    var o = {
        posts: []
    };
    return o;
}]);
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.controller('MainCtrl', ['$scope','posts', function($scope, posts) {
    $scope.posts = posts.posts;
    $scope.posts = [
        {title: 'post 1', upvotes: 12},
        {title: 'post 2', upvotes: 14},
        {title: 'post 3', upvotes: 16},
        {title: 'post 4', upvotes: 11},
        {title: 'post 5', upvotes: 1}
        ];
    $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 = '';
    }
    $scope.incrementUpvotes = function(post){
        post.upvotes += 1;
    }
}]);
app.controller('PostsCtrl', [ '$scope', '$stateParams', 'posts',
    function($scope, $stateParams, posts){
        $scope.post = posts.posts[$stateParams.id];
    }]);

检查angular-ui-router.js库地址，它是cloudfare而不是cloudflare。

编辑

从主状态中删除不必要的;

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

并移除线路angular.module('flapperNews', ['ui.router']);将ui.router添加到第一行var app = angular.module('flapperNews', ['ui.router']);

到工作JS:

var app = angular.module('flapperNews', ["ui.router"]);
app.factory('posts',[function(){
    var o = {
        posts: []
    };
    return o;
}]);
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.controller('MainCtrl', ['$scope','posts', function($scope, posts) {
    $scope.posts = posts.posts;
    $scope.posts = [
        {title: 'post 1', upvotes: 12},
        {title: 'post 2', upvotes: 14},
        {title: 'post 3', upvotes: 16},
        {title: 'post 4', upvotes: 11},
        {title: 'post 5', upvotes: 1}
        ];
    $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 = '';
    }
    $scope.incrementUpvotes = function(post){
        post.upvotes += 1;
    }
}]);
app.controller('PostsCtrl', [ '$scope', '$stateParams', 'posts',
    function($scope, $stateParams, posts){
        $scope.post = posts.posts[$stateParams.id];
    }]);

HTML:

相关文章：