How to set base jade for all files with ui-router

Question

How can I create a base jade file for next jade files? Because if I have something like this:

base.jade

doctype html
html(ng-app='app')
  head
    title= title
    meta(charset='utf8')
    meta(name="viewport" content="width=device-width, initial-scale=1")
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel='stylesheet', href='/stylesheets/bootstrap.css')
    base(href='/')
  body
    .container(ui-view)
    script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js")
    script(src="/javascripts/bootstrap.js")
    script(src='/javascripts/angular.js')
    script(src='/javascripts/angular-ui-router.js')
    script(src='/javascripts/app.js')

home.jade

extends base
h1 Welcome

it loops itself and I get "WARNING: Tried to load angular more than once." because in ui-view it's re-rendering base.jade again and again

when I remove this line "extends base" stuff in home.jade is rendering but without base.jade

edit:

app.js (angular)

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/');
    $locationProvider.html5Mode(true);
    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: '/views/home'
        })
        .state('login', {
            url: '/users/login',
            templateUrl: '/views/login'
        })
}
]);

if its like that then I get 404 not found views/login but if I change it to /views/login.jade then I get jade file but not compiled... so it works, but how to get compiled file?

One more thought, it could be that the template you trying to load into ui-view can't be found and index page is loaded instead which leads to angular being loaded again. Can you add your app file structure and show angular router setup — Molda, Jun 25 '16 at 06:52
Thank you, now I understand its maybe becuse the views folder is not in public directory, but even if its there, I only can get it with .jade (but then I get only static jade file - not compiled) - more in updated code :) — Hulk Bulk, Jun 25 '16 at 11:18
If you don't need to add any data to to angular views( which you shouldn't, they should be static templates) you should consider placing them in public folder under templates directory compiled to html (that's common setup anyways) you should only need to render index page on server so use jade for that using `res.render` the rest of views should be static templates and angular on client takes care of rendering them. — Molda, Jun 25 '16 at 11:47
I just get damn headache. Its loading twice because for example in home.jade I have "extends base" so it gets again whole base.jade and put into ui-view and then in ui-view I have loaded again all scripts and finally in second ui-view I have the look I want (that says my html structure) but for God sake when I remove this line "extends base" then home.jade loads but without BASE damn... how can I set base jade for all files... — Hulk Bulk, Jun 25 '16 at 11:50
OK instead of doing res.render('home.. render base using res.render('base... and place home.html into public dir and in angular load home.html for `/` path — Molda, Jun 25 '16 at 11:54
do u know that I lost whole yesterday on doing this? DAMN THANK YOU SO MUCH.. haha my all js files work fine (api etc) but I couldn't deal with damn jade xD thank you again :D! but imo its sad that I have to compile jade to html before using it, but I understand thats because angular can only works on clientside files :) thank you again and have a good day Sir! :) btw how can I + your answer :)? — Hulk Bulk, Jun 25 '16 at 12:13
Glad I could help. Don't worry about *+ my answer*. Have a nice day too Sir :) — Molda, Jun 25 '16 at 12:21
You could setup route for your templates to render them from jade but I wouldn't recommend it because it's unnecessary overhead on server. It's even better to have nginx (in case you use it) serve static assets such as templates — Molda, Jun 25 '16 at 12:40

How to set base jade for all files with ui-router

0 Answers0