Как подружить jade с angular.js?

Question

[whiteleaf]

Здравствуйте,

Сейчас изучаю node.js, express и angular.js. Хочу использовать эти технологии для реализации SPA сайта, но у меня почему-то не работает Angular.js с Jade.

Подскажите, пожалуйста, как можно их подружить и меня интересует еще вопрос касательно ссылок. Как я понимаю, URL не передается на сервер для обработки, и всем занимается Angular.js если использовать его роутинг. Можно ли реализовать рабочие ссылки с помощью Angular.js?

layout.jade

html(ng-app)
   head
      title
      link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css")
      link(rel='stylesheet', type="text/css", href='/css/style.css')
      script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js")
   body
      .navbar.navbar-default
         .container
            ul.nav.navbar-nav
               li
                  a(href='/') home
               li
                  a(href='/chat') chat
       block content

index.jade

extends layout

block content

   .container
      h1 Hello from index page!

      input(type='text', ng-model="word") {{ word }}

Comments

[Kano]

Ответьте на вопрос где компилируются Jade шаблоны? На стороне сервера (nodejs) или на клиентской стороне?

[whiteleaf]

Kano: На стороне сервера (Node.js)

[Артур Мудрик]

whiteleaf: ну так и компилируйте их на стороне сервера, Ангулар здесь вообще ни при чем

Answer 1

[Дмитрий Гусев]

Вам стоит посмотреть в данном случае на Jade как на обычный хтмл
Разница только в синтаксисе, на выходе получается тот же хтмл
у инпута нет текста и получится следующее

input(type='text', ng-model="word") {{ word }}
<input type='text'  ng-model="word"></input> {{ word }}

Вам нужно использовать value

input(type='text', ng-model="word", value="{{ word }}") 
<input type='text'  ng-model="word" value="{{ word }}"></input>

Answer 2

[Юрий Ярош]

На стороне сервера в процессе сборки и упаковки.
Обычно использовал gulp-angular-templatecache и gulp-jade соответственно.

Comments

[almac]

Поясните плиз, хочется понять: мы пишем jade файлы, запускаем gulp таск, который делает из jade обычный html после сборки фронт-енда, так? Непонятно, что означает "jade генерируется на стороне сервера". Как это?

[Юрий Ярош]

Для первого ангуляра это выглядит так:
1. gulp таск (c gulp-jade) для jade компилит jade шаблоны с ангулярными дериктивами в html
2. gulp таск (c gulp-angular-templatecache) для упаковки шаблонов инлайнит их в один большой js файл, в котором просто происходит популяция cache сервиса ангуляра
3. Браузер грузит один большой JS файл с шаблонами, они добавляются в кэш браузера, после чего, при обращении по соответствующим URL'ам, шаблоны грузятся с кэша браузера. Это в проде, в деве естественно не нужно его подгружать, и оно напрямую обратится к URL'кам с html шаблонами