CODEWITHSUNDEEP
angularjsexpressmean-stack
Kamlesh Meghwal
Kamlesh Meghwal

Reputation: 4972

Html template with Angular

How to use Html template instead of Jade in Angular Application.

layout.html:

<body>
{% block content %}{% endblock %}
<h1>Hello!! whats up from layout</h1>
</body>

index.html:

{% extends 'includes/layout.html' %}

{% block content %}
<section> <h1>hello</h1></section>
{% endblock %}

Server.js

app.set('views',__dirname + '/server/views');
app.engine('html', require('ejs').renderFile);
app.set('view engine','html');

app.get('*',function(req,res){
  res.render('index');
});

But i am not getting output as expected, below is the snap of what i am getting in the browser.

{% extends 'includes/layout.html' %} {% block content %}
hello

{% endblock %}

I don't understand what i am missing.

Upvotes: 0

Views: 469

Answers (3)

S Panfilov
S Panfilov

Reputation: 17581

This is a clientside solution. Just FYI.

  1. You may set any other character for angular's interpolate symbol:

    app.config(function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[').endSymbol(']]');
});

(but it's may hurt - ide with angular support didn't recognize your symbol)

  1. The best practice of binding - is use ngBind whenever it's possible (instead of {{ }} expresions):

    <span ng-bind="myVal"></span>

It is preferable to use ngBind instead of {{ expression }} if a template is momentarily displayed by the browser in its raw state before Angular compiles it. Since ngBind is an element attribute, it makes the bindings invisible to the user while the page is loading. (from docs)

instead of

    <span>{{myVal}}</span>

Upvotes: 0

NarendraSoni
NarendraSoni

Reputation: 2258

I have a nice little working MEAN stack application, and i believe it can be a good base for you to set up express/node app with AngularJS HTML templates.

Even if your configured view engine in app.js(server.js or whatever name you call it) might be jade or EJS, Expressjs is quite flexible,you can still serve the HTML partials using AngualrJS routes.

So my base index.html looks something like this:

NOTE: there are ways to efficiently load JS files, but since it's a small To-Do App. so i am not going for it.

    <!DOCTYPE html>
    <html lang="en" ng-app="app">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MEAN To Do Application </title>

    <link href="vendor/flat-ui/css/vendor/bootstrap.min.css" rel="stylesheet">
    <link href="vendor/flat-ui/css/flat-ui.css" rel="stylesheet">

    </head>
    <body ng-controller="AppCtrl">
    <div ng-include="'app/header.tpl.html'"></div>
    <div ng-view class="container-fluid"></div>

    <script src="vendor/flat-ui/js/vendor/jquery.min.js"></script>
    <script src="vendor/flat-ui/js/vendor/html5shiv.js"></script>
    <script src="vendor/flat-ui/js/vendor/respond.min.js"></script>
    <script src="vendor/flat-ui/js/vendor/video.js"></script>
    <script src="vendor/flat-ui/js/flat-ui.min.js"></script>

    <script type="text/javascript" src="vendor/angular-full/angular.min.js"></script>
    <script src="vendor/angular-full/angular-resource.min.js"></script>
    <script src="vendor/angular-full/angular-route.min.js"></script>
    <script src="/socket.io/socket.io.js"> </script>
    <script src="common/socketservice.js"></script>
    <script src="app/app.js"></script>  
    <script src="app/meetups/meetups.js"></script>  
    </body>
    </html>

Then here comes by Angular routes config(refer):

angular.module('meetups',['ngResource'],['$routeProvider',function($routeProvider){
    $routeProvider
    .when('/',{
        templateUrl: 'app/meetups/list.tpl.html',
        controller: 'MeetupsController'
    })
    .when('/create',{
        templateUrl : 'app/meetups/create.tpl.html',
        controller: 'MeetupsController'
    })
    .when('/:id',{
        templateUrl: 'app/meetups/details.tpl.html',
        controller: 'MeetupsController'
    })
    .when('/:id/edit',{
        templateUrl: 'app/meetups/edit.tpl.html',
        controller: 'MeetupsController'
    })
    .otherwise({redirectTo: '/'})
    ;
}]);

I hope i answered your question.

Upvotes: 0

Ryan Miller
Ryan Miller

Reputation: 1063

Looks like you're not utilizing the proper view engine. See this article by Rod Dodson. The crucial line is:

app.set('view engine', 'ejs');

You have:

app.set('view engine','html');

This means express is simply rendering your EJS templates as raw HTML. Make sure Express understands which view engine you want to use, and you should be set.

Upvotes: 1

Related Questions