What Are the Possible Use Cases for Template Engine in Angular 2?

For the development of a large single page application (SPA) with Angular 2.0, I have decided to utilize a template engine like JADE/PUG in order to enhance clarity and clean up the code. My goal is to achieve optimal performance for the application.

The technology stack I plan to use includes: HTML5, CSS (SASS), ANGULAR 2, and Bootstrap.

I am wondering if it is advisable to employ a template engine alongside Angular 2.0 for improving code readability and organization in the context of developing a sizable SPA. While researching about JADE, I have some doubts regarding its suitability.

javascriptangularjsangularpugtemplate-engine

Answer №1

... My recommendation for you (based on my current stack) is to utilize HTML in External files and connect it to your component via require, allowing webpack to handle the rest of the magic.

For example:

 import { Component, AfterViewInit, ElementRef } from '@angular/core';
    import "fullcalendar";


    require('style!fullcalendar/dist/fullcalendar.css');


    @Component({
        selector: 'about',
        template: require('./about.component.html'),
        styles: [String(require('./about.component.scss'))]
    })

    export default class AboutComponent implements AfterViewInit {
        calendarElement: any;
        public message: string;

        constructor(private elementRef: ElementRef) { }

        ngAfterViewInit() {
            this.calendarElement = jQuery(this.elementRef.nativeElement);
            this.calendarElement.fullCalendar({});
        }

    }

In addition to utilizing this method for including external sass files in my component as well.

Answer №2

JADE may not be the best choice for a Single Page Application (SPA).

While JADE is a server side view technology that generates HTML with the necessary data, it is more commonly used in traditional non-SPA applications.

SPAs typically only receive data from the server, rather than full HTML each time.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Experiencing Difficulty Retaining Checkbox State Using LocalStorage Upon Page Reload

At the moment, I have a script that automatically clicks on a random checkbox whenever the page loads or refreshes. Through localStorage, I can also view the value of the input assigned to the randomly selected checkbox. However, I'm facing an issue ...

javascripthtmlcsslocal-storage

Obtaining the sum of two variables from two separate functions results in a value of NaN

Why is it that I'm seeing a NaN result when trying to access a variable in two different functions? This is my code var n_standard = 0; var n_quad = 0; var totalQuad; var totalStandard; var total = totalStandard + totalQuad; ...

javascriptjqueryajax

JSON file not found by the system

I am currently working on a basic program that consists of 3 files: 1. An HTML file named index.html 2. A JavaScript file named app.js 3. A JSON dataset called dataset.json I am struggling to make the browser recognize the data in my program. This is ...

javascriptjqueryjson

Using v-for to show the values of an object in Vuetify

I am currently developing a function in vuejs that allows users to select tables from a database, with the columns' names automatically appearing in a v-list-item component. However, I am facing difficulty in displaying these column names effectively. ...

javascriptvue.jsvuejs2vuetify.js

Can an Updatepanel control be added to a webpage using Javascript or JQuery?

I'm currently working on a project that involves allowing users to drag icons representing user controls onto a web page. For the desired functionality, these user controls must be contained within an updatepanel (or a similar AJAX-enabled frame) so ...

javascriptjqueryasp.netasp.net-controls

Need to get an item from a collection at the library?

Is it possible to import and use an object from a library? For instance, suppose we have a file named data.js with the following content: return { "name": "Testing" } In the file index.js, could we do something like this: const data = require('. ...

javascriptnode.js

Partial view remains stagnant despite successful ajax post completion

I am currently in the process of developing a system that will showcase uploaded images from a file input into a specific div within my view. (with intentions to incorporate document support in the future) The challenge I am facing is that the partial vie ...

javascripthtmljqueryajaxasp.net-core-mvc

"Modify marker icon upon click event in Google Maps by utilizing the loadGeoJson function

I have successfully loaded the markers from a json file using loadGeoJson. While I am able to SET the marker icon/img on load, I am unsure of how to CHANGE it upon click. Is there a way to target the clicked marker and perform a setIcon or similar action ...

javascriptgoogle-mapsgoogle-maps-api-3clickicons

Struggling to retrieve form data in Node.js, Express, and MongoDB?

How can I properly access the data submitted through a form using Node and Express, in order to store it in MongoDB? When I try to retrieve the NAME field, I get "undefined", and for DATA I get "[object Object]". In my MongoDB database, the _id is genera ...

node.jsangularjsmongodbformsexpress

Unfortunately, we encountered an AJAX error while trying to access data from the website datatables.net. You can find

I'm currently working on adding data to a datatables.net datatable using a JSON response, following the example provided here. To achieve this, I am making use of an AJAX call to fetch a JSON response from a database. After obtaining the data, I uti ...

javascriptjqueryjsonajaxdatatables

React state not being updated by setState method

Here's the situation: let total = newDealersDeckTotal.reduce(function(a, b) { return a + b; }, 0); console.log(total, 'tittal'); //displays correct total setTimeout(() => { this.setState({ dealersOverallTotal: total }); }, 10); cons ...

javascriptreactjsstatesetstate

Attempting to grasp the fundamentals of angular Routing, however, upon attempting to reload the page, nothing appears to be displayed

While working in the Bracket editor, I created a file structure with various files located under the 'scripts' tags within the Index.html file. The root folder is named 'projectAngular', inside which there are subfolders like 'appC ...

javascripthtmlangularjsngroute

VueJS with Vuetify: Issue with draggable cards in a responsive grid

I am currently working on creating a gallery that allows users to rearrange images. To test this functionality, I am using an array of numbers. It is important that the gallery is responsive and displays as a single column on mobile devices. The issue I ...

javascriptvue.jsvuetify.jsvuedraggable

Access an element (such as a controller, service, or directive) located within a different module

Can functions from the same module or a different one be accessed? For example: var myFunction = angular.module("myModule").get("myFunction") … or: var myCtrl = angular.module("app").controllers["myCtrl"] When it comes to services, can an injec ...

angularjsdependency-injection

Modifying button styles in Angular UI Datepicker

In this plunk, there is an Angular UI Datepicker with a template. I'm trying to customize the colors of the "Today", "Clear", and "Close" buttons by editing the popup.html. However, even after changing the classes in the code, the datepicker still sho ...

javascriptangularjsangular-ui-bootstrapangular-ui

What is the most effective way to send a list of objects to a Controller

https://i.stack.imgur.com/oyi5v.png This form is for billing purposes. You can add the item name, quantity, and price multiple times to calculate the total amount. Once you click on submit, all the included items along with other parameters like bill nu ...

javascriptc#jqueryasp.net-mvc-5

Display the y-axis label on a Kendo UI chart using AngularJS

I'm attempting to create a bar chart using kendoui along with angularjs. Below is the code I am using for the chart: <div kendo-chart k-theme="'Flat'" k-title="{ text: 'STATUS NFE', visible: tr ...

angularjskendo-ui

"Unable to convert object into a primitive value" error message appears on Internet Explorer

Currently working on a webpage using Angular 7. The code is functioning perfectly in Chrome, however, I am facing an Exception error while running it in IE: An issue arises: Can't convert object to primitive value (polyfills.ts) The source of the er ...

angulartypescriptinternet-explorertypeerror

Is NextJS rendering solely on the server, or is it capable of rendering on both

Within my users.js JSX file, I have an exported component that looks like this: ... return <MainContainer keywords="users"> export default Users During the process of SSR/SSG, the browser displays the users HTML (comprising of <li> t ...

javascriptnext.js

Dynamic Route Matching in NextJS Middleware

Currently, I am in the process of developing a website that incorporates subdomains. Each subdomain is linked to a file-based page using middleware. Take a look at how the subdomains are being mapped to specific pages: app.com corresponds to /home app.com ...

javascripttypescriptnext.js