什么是html中的等效jade文件?

时间:2014-11-15 18:48:47

标签: angularjs pug

我必须将应用程序从jade迁移到html 5(bootstrap 3)。我阅读了文档jade template engine。它很有用但我找不到我需要的所有信息。这是完整的index.jade文件:

html(lang='en', data-ng-app='angular-client-side-auth')
head
meta(charset='utf-8')
title Angular Auth Example
link(rel='stylesheet', href='/css/app.css')
link(href="/components/bootstrap/dist/css/bootstrap.min.css", rel="stylesheet")
link(href="/components/font-awesome/css/font-awesome.min.css", rel="stylesheet")
// This is needed because Facebook login redirects add #_=_ at the end of the URL
script(type="text/javascript").
if (window.location.href.indexOf('#_=_') > 0) {
window.location = window.location.href.replace(/#.*/, '');
}
body(data-ng-cloak)
.navbar(data-ng-controller="NavCtrl")
.navbar-inner
.container-fluid
ul.nav.nav-tabs
li(data-access-level='accessLevels.anon', active-nav)
a(href='/login') Log in
li(data-access-level='accessLevels.anon', active-nav)
a(href='/register') Register
li(data-access-level='accessLevels.user', active-nav)
a(href='/') Home
li(data-access-level='accessLevels.user', active-nav='nestedTop')
a(href='/private') Private
li(data-access-level='accessLevels.admin', active-nav)
a(href='/admin') Admin
li(data-access-level='accessLevels.user')
a(href="", data-ng-click="logout()")
| Log out
div#userInfo.pull-right(data-access-level='accessLevels.user')
| Welcome 
strong {{ user.username }} 
span.label(data-ng-class='{"label-info": user.role.title == userRoles.user.title, "label-success": user.role.title == userRoles.admin.title}') {{ user.role.title }}
.container(data-ui-view)
#alertBox.alert.alert-danger(data-ng-show="error")
button(type="button", class="close", data-ng-click="error = null;") ×
strong Oh no! 
span(data-ng-bind="error")
script(src='/components/angular/angular.min.js')
script(src='/components/angular-cookies/angular-cookies.min.js')
script(src='/components/angular-ui-router/release/angular-ui-router.min.js')
script(src='/js/routingConfig.js')
script(src='/js/app.js')
script(src='/js/services.js')
script(src='/js/controllers.js')
script(src='/js/filters.js')
script(src='/js/directives.js')
// Partial views... Load up front to make transitions smoother
script(type="text/ng-template", id="404")
include partials/404
script(type="text/ng-template", id="admin")
include partials/admin
script(type="text/ng-template", id="home")
include partials/home
script(type="text/ng-template", id="login")
include partials/login
script(type="text/ng-template", id="private/layout")
include partials/private/layout
script(type="text/ng-template", id="private/home")
include partials/private/home
script(type="text/ng-template", id="private/nested")
include partials/private/nested
script(type="text/ng-template", id="private/nestedAdmin")
include partials/private/nestedAdmin
script(type="text/ng-template", id="register")
include partials/register

以下两个标记的等效html / js是什么:

  1. li(data-access-level ='accessLevels.anon',active-nav) a(href ='/ login')登录
  2. 脚本(type =“text / ng-template”,id =“404”) 包括partials / 404
  3. 感谢您的帮助。

2 个答案:

答案 0 :(得分:1)

1 =如果用户未经过身份验证(accessLevels.anon),则激活(显示)导航栏上的“登录”链接

2)显示位于partials文件夹中的404错误页面

答案 1 :(得分:1)

您可以在此处查看 - http://naltatis.github.io/jade-syntax-docs/

1

<li data-access-level="accessLevels.anon" active-nav> </li><a href="/login">Log in</a>

2

<script type="text/ng-template" id="404">  ... 'included partial html' ... </script>