How to integrate AngularJS with Expressjs & NodeJS ? How to replace Jade with angular?

Question

I have jade as default templates and want to remove completely and use angular instead. How to do it ? How to remove Jade from the package ?

I want to use Plain HTML + Angular for creating frontend without ejs or any package.

Answer 1

Place this in your express app.js file or edit it if already present:

app.use('/', express.static(path.join(__dirname, '/your directory')));

remove any other lines like app.set(views... or app.set(view engine).

Answer 2

First, you need to set your view engine in your Express main app.js file to html.

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

Remove all the configurations made in your app.js using

app.set

Now, we need to remove the Jade template engine module from our list of packages installed

npm uninstall jade

Now update your package.json file with

npm update -g

We have now set up our template engine as HTML and now we need to update our express app.js to point to directory for Angular js Default we use Public directory

app.use(express.static(path.join(__dirname, 'public')));

Now place your Angular js code in public directory of your Express app.

Also, make sure to change the routes accordingly in Angular which will point to Express Node js routes defined as required by your app.

Answer 3

You don't need to use jade with angular. You can still make html templates with angular in stead.

The way to do that is to create a tag in your html

like:

<your-tagname> </your-tagname>

then you create a simple directive inside your angular js code.

pl.directive('yourTagname', function(){
    return {
        restrict: 'E' ,
        templateUrl: 'view/yourhtmlpagename.html'
    };

});

This will load any html sniper/content inside your custum html tag. If you don't create any jade files, that will be easily ignored.

Only make sure to point to your index.html and not index.jade in your express code if you use node.js.