I was making HTML Render from Node js so that i can show things on angular side,
But their are some Directives of angular which I want to set in EJS Rendering, so that the directive magic should happens on UI when it is render.
The problem here is coming that EJS is not allowing to put angular Directives in its format. Is their any possible way for this.
Angular 5 in EJS file while rendering that Template from Node JS.
Short answer : don't do that.
Using angular isn't using a library : using Angular means your are using a whole platform.
You write your code in Typescript, which is then compiled to vanilla Javascript. This means, once your code is compiled, the syntax you're using to make Angular component changes too.
In your case, you use NodeJS to serve static pages : The very principle of Angular is to create SPA (Single Page Applications). If you create static files that you serve with a server, then what is the point of creating a SPA ?
So the answer is : don't use EJS to create templates that will contain Angular components. I don't even know if it is possible, but in any case, this is a very bad practice.
Related
Can anyone please explain what is Ejs , can we build a full fledge frontend using Ejs while using node.?
I have been searching for it but i can not find the answer i want.?And please someone differentiate between the frontend frameworks like (angular and react) and Ejs..
EJS is a template system. You define HTML pages in the EJS syntax and you specify where various data will go in the page. Then, your app combines data with the template and "renders" a complete HTML page where EJS takes your data and inserts it into the web page according to how you've defined the template. For example, you could have a table of dynamic data from a database and you want EJS to generate the table of data according to your display rules. It saves you from the drudgery of writing code to dynamically generate HTML based on data.
EJS is compatible with Express for back-end use as it hooks into the View engine architecture that Express provides and lets you render web pages to the client with res.render() in Express.
FYI, there are dozens of competing template systems for use in node.js. EJS is a popular one and people typically choose one based on features that match your needs, how their layout language fits what you want to use, what seems easiest to you to use, etc... I've used Pug, Handlebars, Nunjucks and EJS. Nunjucks is my current favorite.
EJS (along with all the other competing template engines) allows you to generate full-blown HTML pages which certainly enables a "proper front-end".
EJS is a tool for generating web pages that can include dynamic data and can share templated pieces with other web pages (such as common headers/footers). It is not a front-end framework. While EJS can be used by client-side Javascript to generate HTML on the client-side, it is more typically used by your back-end to generate web pages in response to some URL request. EJS is not a client-side framework like Angular or React and does not dictate what client-side framework you do or don't use (if any). It is mostly covers a separate solution space.
I have the basic question how the frameworks and platforms Angular 2 and Express.js in the 'mean' approach works together and where are the boundaries between client-side and server-side.
After reading much stuff to this topic I understand, that by calling the basic URL of the website (SPA) the Angular2-application will be send completely as package to the client (browser) where the (angular logic) will dynamically change the views by javascript in the client-browser as defined.
I also have create an angular2 SPA with some components, routing and services.
Now I have the general question to the backend.
I want to create a backend on the basis of node.js with the express.js framework.
-How I have to setup the entire Angular2 (frontend) application in the express.js backend application because express.js based on MVC too?
-Where are the boundaries between the model and view of angular (MVVC) and express.js (MVC) and where they play together?
It would be great if somebody can name me references, tutorials or relevant stuff to this specific topic.
Thanks in advance.
In reference to the MEAN stack, Express.js is not used as the MVC, but Angular is. Express.js serves as middleware / a framework to help build your API quickly than if you just wrote in Node.js (Express.js is a framework for Node.js).
What you said here:
calling the basic URL of the website (SPA) the Angular2-application will be send completely as package to the client (browser) where the (angular logic) will dynamically change the views by javascript in the client-browser as defined
Is exactly right, Angular 2 will act as the MVC, in browser, where the client will dynamically change views. Express.js will help you define the "basic URL" i.e. localhost:8000/ and what "package" as you have described, is sent to the client. This "package" is your entire Angular application.
One of my favorite tutorials is from Scotch.io, though it is Angular 1.x, it's still helpful for building any MEAN stack application.
https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular
The line
app.use(express.static(__dirname + '/public'));
Tells the application where to find all your JS / CSS / HTML files, or in your case, your Angular application. (Make sure your Angular application is in the directory that you list above relative to your Express/Node.js application)
Hope this helps!
I am using node.js with react.js as my templating library. I am able to render my components on server side by using node's res.render(..), but I want to make my components dynamic by rendering them on client side using react.js and calling the onclick handlers. I have my components defined in .jsx format. How can I interact with the browser in client side and render my react components dynamically?
You will need to have your code transpiled and bundled, then you can insert it in a script tag just like any other script. One popular option is webpack; another is the use of Browserify with babelify in a gulp task.
You can start using it with ES6 class syntax using babel js. I have created a sample component here
You can also use react-starter-kit which gives you all the setup pre-loaded. A good place to start would be Facebook's react documentation
Now with grunt plugins I can convert jade to pure html easily.
What is the best practice when deploying html to node server.
Is it better to leave jade as it is or convert into html then deploy it?
Does it improve time when node is starting up and other others?
There is also another option: to render on the client.
But your question is too general, it depends!
render jade on server side (JADE -> HTML)
pro: can use placeholder
contra: need node.js, express on the server
render jade on the client (JADE -> JS)
pro: no node.js on the server - just a static http service
contra: need jade runtime on the client
convert at compile time (HTML at runtime)
pro: fast, no runtime rendering engine needed
contra: only dynamic until compile time, not dynamic at runtime
Does it improve time when node is starting up and other others?
I think you can ignore the starup time for node.js and requiring express. But you can measure the time for each request express and jade will need and compare it with a static file serving service like apache, nginx. For both solutions you can using caching techniques.
I am working on a single page web application and have run into a question for which I cannot seem to find the answer.
Is there a way to load partial views from server side when using angular? I am using nodeJs, with express and Jade, and wanted to load partial views into angular, but I am confused on how I would do such. Is there any particular guideline that I should follow to structure my files?
I do not want to load all of my partials from angular, so I wanted to know if there is a way to load the views in from node.
EDIT: What I mean to ask is, am I allowed to load in partial jade views on angular? Does that have any effect on the way the page renders?
You can't. Angular is a Single Page Application framework, it means that you application (ie HTML+CSS+JS) is loaded once at first load in the browser, and all what happens is a communication of raw data (JSON over REST for example), Angular is in charge of displaying correctly the already-loaded-html correctly according to these raw data.