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

The draggable=true attribute in EaselJS (MovieClip) canvas does not display a ghost image

I am currently working with a canvas element that contains animations powered by EaselJS. The canvas is wrapped in a parent div with draggable set to true. <div class="outer-parent" draggable="true"> <div class="inner-parent"> <canvas& ...

javascripthtmlhtml5-canvaseaseljscreatejs

magnific popup: trigger the display by clicking on an element other than the image

A recent request from the client calls for the image caption to cover the thumbnail fully when hovered over. To meet this requirement, I now need to enable clicking on the caption to open Magnific Popup rather than using the <a> tag. Here is what I h ...

javascriptjquerymagnific-popup

Encountering issues importing Ace Document Object in a Vue webpack project?

In my Vue and Webpack project, I am trying to incorporate the Ace editor. My goal is to associate each file with a single instance of an Ace Document. To achieve this, I followed the default import method: import Ace from 'ace-builds' When atte ...

javascriptvue.jswebpackimporterrorace-editor

Is there a way to synchronize the autohide duration for both the LinearProgress MUI and SnackBar components?

Can someone help me align my SnackBar with the LinearProgress so that they both have an auto-hide duration of 4 seconds? I've been struggling to figure it out for hours and haven't found a solution yet. Could the issue be in the useEffect part of ...

javascriptcssreactjsmaterial-ui

Guide on extracting data from a JavaScript table using Python

Looking to extract information from a table on this page: . There are a total of 18 pages, but the url remains constant for each page. My usual method involves using BeautifulSoup to scrape data from HTML pages. However, in this case, the required data is ...

javascriptpythonhtmldatatable

Change the input value by clicking different buttons

Looking for a way to change the value or source of an input when clicking on different buttons? For example, clicking on Button 1 changes the input to "apple" and Button 2 changes it to "orange", etc. Here is a snippet of what I have tried so far: $(doc ...

javascriptjquery

Issue in NativeScript: The scrollable height is consistently shown as 0

I have created a Chat feature and I am trying to make sure that the chat window always scrolls to the most recent message. Here is the HTML code: <ActionBar> <NavigationButton (tap)="onBackTap()" android.systemIcon="ic_menu_bac ...

angularlistviewnativescript

Implement real-time word counting in Angular as users type

I am looking to monitor word count in real-time as a user enters text into a textarea field If the word limit of 100 is exceeded, further typing should be restricted I aim to display the word count dynamically as the user types wordCounter() This functi ...

angulartypescript

Accessing Data from Nested PHP Array in Javascript

My current situation is this: I have a MYSQL database that consists of two fields: 'ID' and 'string'. The 'string' field stores serialized arrays. To extract the data back, I utilize the following PHP code: $result = mysql_q ...

phpjavascriptmysqlajax

Organize and display a list of contacts alphabetically by the first letter of their

I have a list of contacts that I need help with. Despite searching on Stack Overflow, I couldn't find the answer. Can someone please assist? Thank you. export const rows = [ { id: 1, name: 'Snow', email: 'Jon', co ...

javascriptreactjstypescript

Utilizing "this" in a situation where the function and selector are not combined

When it comes to utilizing this in different scenarios, the results may vary. In example 1, we see that by directly accessing this, we are able to obtain the correct result. $("#my_div").on("click", function () { alert( $(this).attr("id") ) }); Howev ...

javascriptjquery

Organize express controller by breaking it up into multiple separate files

Recently, I've set up an express js controller file as follows The File Path: /controllers/usersController.js // Register User module.exports.register = function(req, res) { ... } // Login User module.exports.login = function(req, res) { ... } // ...

javascriptnode.jsexpress

Guide to defining AngularJS 1.x Material theme color in SCSS

Is there a way to define Angular 1.x material theme colors as SCSS properties? Specifically, I am looking to use the theme's primary color for the background property. Here is an example: .sampleclass {background: theme-primary-color;} ...

angularjssassangularjs-materialmaterial-design

What is causing this issue? Error: [$compile:nonassign] The expression 'undefined' cannot be assigned! AngularJS 1.5

I'm currently working on developing a component to post "Tweets" on my personal website. However, I am facing an issue where I cannot input any text into the textarea. Below is an image showcasing the error: Please review my code in the file "editor ...

javascriptnode.jsangularjs

Using spyOn to fake Observable responses - a step-by-step guide

My service is set up to request JSON data through HTTP: export class TodosService { constructor(private http: HttpClient) {} getTodos(): Observable<any> { return this.http.get<any>('https://jsonplaceholder.typicode.com/todos') ...

angularunit-testingkarma-jasmine

Uncovering hidden links in a menu with Python Selenium and JavaScript

Can someone provide guidance on how to activate the JavaScript submenu associated with this button, "x-auto-54"? <table id="x-auto-54" class=" x-btn avtar-x-btn x-component x-btn-noicon x-unselectable " cellspacing="0" role="prese ...

javascriptjquerypythonseleniumhidden

What is the best way to swap out the css selector using jQuery?

Looking to switch the height attribute to min-height This is how I usually update the value, but uncertain about changing the attribute $('.mySelector').css('height','650px') <div class="mySelector" style="cursor: -moz-g ...

javascriptjquery

What is the method for deactivating a form input field in Angular Formly?

Is there a specific way to disable a form input field using Angular Formly? I have tried searching online and cannot find a clear answer. Even after checking Formly's 'field configuration docs', I only found one mention of the word 'dis ...

javascriptangularjsangular-formly

Encountering a Typescript error while attempting to iterate through Enum keys for generating JSX components

I'm really struggling with this problem. Here's a simple enum I have: export enum depositTypes { ACH = 42, Wire = 36, Check = 3, Credit = 2, } I'm trying to create option tags for a select element, like so: Object.keys(depositTyp ...

javascriptreactjstypescriptenumsmapping

Removing the arrow icon preceding an image in a new line when dealing with dynamic data

My Angular project renders dynamic content that includes the following HTML structure: <div class="complted" *ngFor="let step of letStep1to7; let i = index; let first = first"> <table> <td class="steps" ...

javascriptcssangularbootstrap-4