javascript - angularjs ui-view元素不呈现内容

标签 javascript angularjs routes angularjs-routing angular-ui-router

我正在关注 this教程以熟悉 MEAN堆。我到了他们开始使用路由配置的地步 ui-router .我已经像他们一样设置了所有内容,但我的页面没有在我的 <ui-view> 中呈现任何内容。元素。

(在我添加路由配置之前这是有效的)

这是我的文件的样子:

index.html:

<!DOCTYPE html>
<html>
<head>
  <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 scr="indexHomeState.js"></script>
  <script src="indexController.js"></script>
  <script src="postsService.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>

      <div ng-repeat="post in indexCtrl.getPosts() | orderBy:'-upvotes'">
        <span class="glyphicon glyphicon-thumbs-up"
          ng-click="indexCtrl.incrementUpvotesForPost(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>
      </div>

      <form ng-submit="indexCtrl.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="indexCtrl.title"></input>
        </div>
        <div class="form-group">
          <input type="text"
          class="form-control"
          placeholder="Link"
          ng-model="indexCtrl.link"></input>
        </div>
        <button type="submit" class="btn btn-primary">Post</button>
      </form>
    </script>


</body>
</html>

路由配置(indexHomeState.js)

angular.module('flapperNews')
.config('indexHomeState', indexHomeState);


indexHomeState.$inject = ['$stateProvider', '$urlRouterProvider'];

function indexHomeState($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('home', {
        url: '/home',
        templateUrl: '/home.html',
        controller: 'indexController as indexCtrl'
    });
    $urlRouterProvider.otherwise('home');


}

我的 Angular 应用程序/ Controller 声明:

angular.module('flapperNews', ['ui.router'])
.controller('indexController', indexController);

indexController.$inject = ['postsService'];

function indexController(postsService) {
    var vm = this;
    vm.test = 'Hello world';

    vm.getPosts = postsService.getPosts;
    vm.addPost = postsService.addPost(vm.title, vm.link);
    vm.incrementUpvotesForPost = postsService.incrementUpvotesForPost;

}

邮政服务

angular.module('flapperNews')
.factory('postsService', postsService);

function postsService() {
    var serv = this;
    var 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}
    ];
    function getPosts() {
        return posts;
    }
    function addPost(title, link) {
        if(!title || title === '') { return; }
        posts.push({
            title: vm.title,
            link: vm.link,
            upvotes: 0
        });
        vm.title = '';
        vm.link = '';
    }
    function incrementUpvotesForPost(post) {
        post.upvotes ++;
    }
    return {
        getPosts: getPosts,
        addPost: addPost,
        incrementUpvotesForPost: incrementUpvotesForPost
    }

}

最佳答案

您的代码看起来不错,只是您缺少的是,您需要更改

$urlRouterProvider.otherwise('home');

$urlRouterProvider.otherwise('/home');

此外,您将 indexHomeState.jssrc 拼错为 scr,这限制了您的 JS 文件加载

脚本

<script src="indexController.js"></script>

由于您的应用中没有 indexHomeState 提供程序,因此您不应将 indexHomeState 作为字符串添加到配置 block 中。

angular.module('flapperNews')
  .config('indexHomeState', indexHomeState);

这很简单

angular.module('flapperNews')
  .config(indexHomeState); //removed `'indexHomeState',` from config

Demo Plunkr

关于javascript - angularjs ui-view元素不呈现内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32078706/

相关文章:

javascript - 使用javascript打字时如何避免光标向后移动

javascript - 如何使用 google map api 获得精确位置?

javascript - 将 JSON 对象从 Rails Controller 发送到 Javascript

javascript - 如何在 Javascript 循环中触发的回调函数中抛出一次错误?

javascript - 是否可以使用 AngularJS 验证包含名称为 objectVO.fieldname 的文本字段

asp.net-mvc-2 - 将/action/1,2,3 绑定(bind)到List<int>

javascript - AngularJS select2 不显示任何值

javascript - 如何在数据库中为特定用户保存动态 html 代码

ruby-on-rails - controller#index 方法显示路由错误

asp.net-mvc - 如何接受电子邮件地址作为路由值?