Angular application requred node.js - node.js

I am going to create my first angular application. I have read lots of angular tutorial and many of them mentioned node.js.I am really got confused here.
Do we really need to install node.js and other dependencies to run angular application ?
Can't I just add respective angular libraries in my eclipse and create Angular application?
What are advantages of using node.js?
Also it is necessary to add all angular code is under App folder?
Regards,
Dip

As it is said on note.js website
Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
So it depends if you want to have server logic (services) or not. If you are creating just the UI of the app you don't need note.js. Also Angular is NOT dependable on note.js

Related

Reactjs + Electron + Nodejs

I've been researching for long time but haven't found what I need. Maybe here someone can help me out.
What I want:
I'm trying to create an application that will run inside electron. Both frontend and backend should be encapsulated within a single executable, so I was thinking React js and Nodejs would be a good option.
But it's not as simple as I thought. Found a good boilerplace for reactjs https://github.com/electron-react-boilerplate/electron-react-boilerplate but I have no idea how I could encapsulate nodejs as a backend to it.
It'd also somehow would need to be integrated with the release package and so on...
Additionally I'd need to have a webserver that will run on localhost:[port] when you launch the application.
Technical Summary:
So basically:
Electron with React js - as the application 'face'
Nodejs - as the backend of the application
Webserver running locally - (using react js).
In the application, I would put link to the pages that is served by that locally running reactjs web app.
Hope I was clear. And I really hope someone can help me out.
Thanks!!!
as you know the serverside part is separate from front end.you can lunch react electron together like this article https://flaviocopes.com/react-electron/ .but serverside must start to stand alone . you could use pm2 for launching them.http://pm2.keymetrics.io/
lets talk about electron. what is electron?
according to electronjs.org :
Electron is an open source library developed by GitHub for building
cross-platform desktop applications with HTML, CSS, and JavaScript.
Electron accomplishes this by combining Chromium and Node.js into a
single runtime and apps can be packaged for Mac, Windows, and Linux.
so the electron is a tool for creating desktop applications.it uses chromium engine for accessing resources of the operating system level. but the intention of that is creating apps not a serverside job.
if you have some needs and logics that must handle in a server you should be considering that. otherwise, read about serverless applications.

Why Angular need Node Js? and what is role of Angular Cli?

I am a Beginner to Angular technology and came across this question.
why is Node js needed in Angular as Node js is a backend technology?
You need NodeJs for angular if you intend to create a front end server, use typescript or make anything other than a purely in browser application(unless you use another server framework: Apache, nginx, lighttp, ruby/rails etc.). For example Vanilla javascript does not support require or import functionality so you need node to load file dependencies, and angularjs does not allow for server creation on its own. You can also choose to build angular applications in TypeScript which utilises NodeJs.
It is worth noting that technically speaking nodejs and angularjs are separate frameworks, angular can be run without node but would only support limited functionality(no db access, no server etc).
The CLI is needed in order to run angular commands through the command line, to generate services / components etc.
You can read more about angular here
Angular does not need Node. However to make the dependencies management easier especially in package.json , npm which is a package manager is required. And in order to get npm, you need to install Node first.
As for angular cli, it provides a terminal that makes it easy to execute operations like creation of an angular app, angular components, building...

Best way to implement Angular Universal

I suffer a lot in the past with angular apps and social media, so I'm glad to see that Angular Universal is being developed.
Currently I have some apps that are Angular4 as front end, and Java with Spring as backend. As far as I know there are some ways to implement Angular Universal here but they seem pretty complex (at least is what I read). So I want to know if that is in that way or not...
But anyway, my main question here, is because I saw that in order to implement Angular Universal we should have (ideally) to make the backend with nodejs, how to structure these two technologies, I mean... Should I have Angular app as a frontend app and Nodejs app as a totally different backend app (just like Java) where both are connected with web services? Or should I served Angular4 SPA direcly from Nodejs views?
And where should I place Angular Universal here?
Now that Angular CLI v1.6 is out, there's native support for building Angular Universal into your projects easily using Node.js! Essentially, you would ng build --prod to create a dist/ folder, and then create a simple node back-end and connect to your dist/ folder containing your front-end code. This article gives a great step-by-step guide: Angular server-side rendering in Node with Express Universal Engine.
When you use Angular Universal, it is going to be a single process (Operating system process) that hosts and serves your Angular pages.
In production you may have multiple such processes behind a load-balancer.
Your back-end APIs (if developed in Javascript) may be hosted in the same Node server or in separate server.
The Angular Universal setup steps are detailed here in the official documentation.
However, I had a few wasted hours to find out the following point
Webpack 3 is not compatible with ts-loader versions higher than 3.5.0. At the time of developing this, the latest version of Angular CLI is 1.7.2 which uses Webpack 3.*. Hence, while setting up Angular Universal, install ts-config#3.5.0
Finally, here I have a seed project for Angular Universal. It uses Vagrant to locally setup the development environment. Also, by tweaking an environment variable in your local host machine, you can run it in a production mode in a Docker container. The steps to run it are detailed in the readme file.
If you refer to my Dockerfile in the above Github link, its entrypoint reads:
ENTRYPOINT ["pm2-runtime","start","/home/aus/dist/server.js"]
So, you see, it's just a singe command, and your app is up and running at port 4000. Of course you can use other command line parameters to provide memory limit, port and so on.

Angular2 working with NodeJs

My understanding is that AngularJS including Angular2 is a client-side framework, while Node.JS is a server side platform. They should not cross. But all Angular2 tutorials I found use Node/NPM. Why is that?
Because npm is a package manager for packages written in JavaScript, and JavaScript can run both on client and server side. In other words, frontend and backend applications can both benefit from packages. Many development tools also use node as an underlying process (e.g. Jest-cli).
I would suggest you to use angular2 only on client side. The performance of angular2 really shines when it comes to handling view containers over regular server side codes. On the NodeJS side, I would recommend using es6 features. Which has revolutionised how you can not only code, but also performance.
The reason you see most tutorials using npm is because they are either using TypeScript or a build tool that uses Node to convert to ES5 or build your project.
However you can still build Angular2 apps using the sfx version (self-executing bundle) of Angular2 and using ES5 syntaxes without having to use node or npm. Here is a blog post that shows how to do that
http://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html
Angular2 is a front-end framework but a lot of tooling that assists in building Angular2 applications are available via NPM.
If you want a package manager that's geared specifically to front-end development I suggest JSPM. It supports front-end modules of various formats (ie AMD, CommonJS, UMD), handles transpiling out of the box, and can be used as a build tool to concatenate/minify your application code.
You'll still need NPM for many other utilities and you'll need a back-end server for testing (I recommend live-server).
As far as the back-end is concerned. One of the Angular2 dev teams is working on a Node/Express extension that supports isomorphic rendering of JS. In short, it pre-renders the view on the server so the user can interact with it in the browser while the app loads in the background. The start time of launching a fully-featured SPA will still be kind of slow (relatively) but perceived speed will be instantaneous.

AngularJS app packaging for autonomous application

I wrote an angularJS app (with nodeJS and ExpressJS as my server). My app is totally independent from the server (I used pouchDB for the data). I would like to create an app/package that can be run from a computer or tablet. How can I do that?
I'm sure there are already lot of questions/answers about this topic but I couldn't find the right solution so I apologize in advance!
Thanks
If you r looking for an full-stack framework, i can really recommend Ionic.
It is a framework, that contains it's own customizable ui-framework(build on sass bootstrap), it is build on cordova aka phonegap and makes it easy to deploy and test the code on android, ios, ... . It is also optimized for angularjs and offers for most functions a directive.
I really love it. I did write a blogpost in german: kkonstantin/ionic
Maybe take your existing frontend javascript code and make use of a css framework, to make it look great for all window sizes.
Like: Ratchet (build on bootstrap)
Then you just make use of Phonegap to deploy your html/css/javascript code to the plattforms.

Resources