0

I'm studying Angular, and I'm stuck with ui-router.
Here is the code. I'm using PUG & Livescript, I doubt that I'm having issue because of these two.

My codes are similar to some answers here in stackoverflow, but I can't make it to work. create.pug is not showing.

main.pug is a child of index.pug
create.pug is a child of main.pug

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

versions:

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

index.pug

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

main.pug

md-subheader
  h1 To Do

md-divider
section(ui-view)

create.pug

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
CRIS
  • 335
  • 3
  • 17
  • What is not working ? – Ehvince Mar 20 '17 at 21:42
  • create.pug is not showing – CRIS Mar 21 '17 at 08:29
  • ok then IMO it's necessary to see how you do template inheritance, to have the full picture. – Ehvince Mar 21 '17 at 09:18
  • these are the only files that I have (excluding vendor files, for now) I'm not sure what exactly is template inheritance, I'm new to this. – CRIS Mar 21 '17 at 14:01
  • When you say "main.pug is a child of index.pug ", how do you make that, do you use Pug [includes](https://pugjs.org/language/includes.html) or [content bloks](https://pugjs.org/language/inheritance.html) ? – Ehvince Mar 21 '17 at 15:28
  • I use this inside of index.pug `div(ui-view)`. Is this not enough? some of the blogs and tutorial only use `ui-view`. – CRIS Mar 22 '17 at 14:07
  • `ui-view` looks nice. But it has to be seen from the `ng-app`. On `index.pug` that looks fine. But in your other pug files, I doubt it. Without template inheritance, main.pug has no way to be below the `ng-app`. I'd check that in your final html, ng-app is in a tag that embrasses the rest of the html. How you showed us in the question looks like you have different html files that are not linked together. So the JS app that is started in one can not see the html of the others. – Ehvince Mar 22 '17 at 14:59
  • I'd advise to start smaller. Start with a file, check the ng app works, add another pug file and check. It's complicated and confusing now. – Ehvince Mar 22 '17 at 15:00

1 Answers1

0

mmh I'd try to add an indentation level here:

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

to

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

or rather

html(ng-app="app.main")
  head
  body
Ehvince
  • 17,274
  • 7
  • 58
  • 79