1

从 Yeoman Angular 脚手架进行基本安装,在整个生命周期中,我无法让路由器加载基本模板。这是我的设置

//  index.html
<body ng-app="mvmdApp">
  <div class="container" ng-view=""></div>//  not sure how ng-view plays into this


//  app.coffee
myAppModule = angular.module("mvmdApp", [])
  .config( ($routeProvider, $locationProvider) ->
    $locationProvider.html5Mode true

    $routeProvider
      .when("/",
        templateUrl: "views/main.html"
        controller: "MainCtrl"
      )
      .when("/youtube",
        templateUrl: "views/youtube.html"
        controller: "YoutubeCtrl"
      )
  )


//  main.js
angular.module('mvmdApp')
  .controller 'MainCtrl', ($scope) ->
    $scope.awesomeThingss = [
      'HTML5 Boilerplate'
      'AngularJS'
      'Karma'
    ]

    $scope.youtube = ( $scope ) ->
      alert 'hi'

  .controller "YoutubeCtrl", ( $scope ) ->
    alert 'Work!'


//  views/youtube.html
<div class="youtube-unit">
  <div class="outer-frame">
    <div class="inner-frame">
      <iframe width="560" height="315" src="//www.youtube.com/embed/2FNEiTjcMM0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    </div>
  </div>
</div>

主控制器加载正常,我尝试尽可能多地复制它

转到 localhost:9000/youtube 会给我一条Cannot GET /youtube消息。我觉得我已经尝试了每一种组合。

4

2 回答 2

2

这并不简单,但您可以安装connect-modrewrite中间件,您所要做的就是重写任何index.html. 您还必须进行编辑GruntFile.js以修复实时重新加载,并在您的生产服务器上进行重写。有关如何执行此操作的一些提示,请参见此处 - http://ericduran.io/2013/05/31/angular-html5Mode-with-yeoman/

于 2013-09-01T07:56:30.970 回答
0

Html5模式不仅仅是Javascript,它还需要服务器支持。

当您尝试 /youtube 时,它​​首先会转到服务器,如果服务器无法管理它,您应该渲染 Angular 应用程序,以便路由器可以捕获路由并显示您需要的内容。

老实说,我不确定 Yeoman 是否支持 html5 模式。

你可以试试linemanjs,它类似于 Yeoman,它支持 html5 模式。

如果你想使用 Yeoman,谷歌为 yeoman 的 html5 模式或使用 hashbang :)

于 2013-08-31T23:17:00.413 回答