(棱角分明)简单的嵌套视图不起作用

Question

我正在学习Angular，但我被ui-router困住了。
这是代码。我正在使用PUG和Livescript，我怀疑我是否因为这两个问题而遇到问题。

我的代码类似于stackoverflow中的一些答案，但我无法使其工作。 create.pug没有显示。

main.pug是index.pug
的子项create.pug 是 main.pug 的孩子

create.pug -> main.pug -> index.pug

版本：

angular -> 1.6.3
angular-ui-router -> 0.4.2

索引.哈巴狗

html(ng-app="app.main")
  head ...
  body
    div(ui-view)

主哈巴狗

md-subheader
  h1 To Do
md-divider
section(ui-view)

创建.哈巴狗

md-input-container
  label Title
  input(type="test" ng-model="app.new_task" ng-keypress="createTask($event)")

main.ls

MainController = ($scope) !->
angular
  .module 'app.main'
  .controller 'MainController', MainController

create.ls

TaskCreateController = ($scope) !->
  app = @
  app.taskList = []
  $scope.createTask = ($event) !->
    if $event.keyCode !== 13 || !app.new_task
      return
  app.taskList.push app.new_task
  app.new_task = ''
  angular
    .module 'app.main'
    .controller 'TaskCreateController', TaskCreateController

router.ls

routeHelper = ($locationProvider, $stateProvider, $urlRouterProvider) !->
this.$get = ($state) ->
  'configureStates': (states) !->
      Object
        .entries states
        .forEach ([name, config]) !->
          $stateProvider.state name, config
$locationProvider.html5Mode false
$urlRouterProvider.otherwise '/'
angular
  .module 'app.main'
  .provider 'routeHelper', routeHelper

routes.ls

setupRoutes = (routeHelper) !->
  routeHelper.configureStates do
    'home':
      'url': '/'
      'templateUrl': 'modules/main/main.html'
      'controller': 'MainController'
      'controllerAs': 'app'
    'home.create':
      'url': '/create'
      'templateUrl': 'modules/task/create/create.html'
      'controller': 'TaskCreateController'
      'controllerAs': 'app'
angular
  .module 'app.main'
  .run setupRoutes

Answer 1

mmh 我会尝试在这里添加一个缩进级别：

head(ng-app="app.main") ...
body
  div(ui-view)

自

head(ng-app="app.main") ...
  body
    div(ui-view)

或者更确切地说

html(ng-app="app.main")
  head
  body