I'm not familiar with it, can you clarify it? I don't want to create a SPA website.
Can I use Angularjs for non-spa website?
AngularJS has been created for Single Page App (SPA) website. But this doesn't restricts one from creating non-SPA website or application. If one has incorporated routing in their application, then it makes a SPA application. I have worked on various applications with AngularJS as the scripting framework, some were SPA and some were non-SPA. It's actually to the developers or the application to decide to go with SPA or not.
AngularJS was cleverly built by some guys at Google and is open source. It is absolutely not directly a SPA. Over the years I have heard some people make wild statements like "Well, if you don't use Angular for its SPA features, then you might as well just use KnockoutJS!"
Nothing could be further from the truth on that as there are so many examples to pull from to defeat that argument!
You can use it without a database or file system and stub things out for testing, but you certainly want to consider your goals.
Build a Menu System with Angular - you can have a complete database driven menu system without any SPA.. so no routing with ng-route etc...
Plenty of people start out NOT doing a SPA as you just added an extra layer of complexity in understanding how Angular works. So much power and things to build without the single page application.
Baby Steps!
Related
We have huge enterprise application written in angularjs.
Now we have to migrate to angular, so we have ruled out an option of hybrid approach angular suggests using "ngUpgrade".
So now we are creating a new application in angular, which means we have 2 applications "angularjs(old)" and angular(new).
So to switch between these two applications can be done without refresh using angular-spa.
I was trying to find if there is another framework, where navigating between two apps happens without refreshing(without refreshing entire page by navigating to new html).
Possible solution:
Use a new Angular application as a wrapper, then just use iframe to show the application you want depends on the context - old or new. The issue you might face is changing the iframe, but I guess you can use postMessage to communicate between the apps.
A bit more sophisticated:
Use Angular Elements to create your hybrid app.
I really recommend you to watch Erin talks from the last Angular connect about how Google made the migration from js to Angular.
I've recently tried the micro-frontend architecture described here:
https://www.martinfowler.com/articles/micro-frontends.html
Each app on different code repository, runtime build and quite easy to implement. Take a look :)
I am learning MEAN Stack. I started from learning Angular(from angular.io) now I am learning node.js and express.js
My question is, if there is angular for front end in MEAN Stack then why there are views and template engines in express.js at back-end? Are they alternative for each other or complements each other? what is the boundary for the role and responsibility of these two?
I am looking forward for someone's help in clarifying of my concept for role these two technologies(express' views and angular) used in mean stack.
In order to answer your question, let me explain what is angular and what are template engines in express?
What is Angular?
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.
what is template engine?
A template engine enables you to use static template files in your application. At runtime, the template engine replaces variables in a template file with actual values and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page.
Some popular template engines that work with Express are Pug, Mustache, and EJS. The Express application generator uses Jade as its default, but it also supports several others.
So,
Angular is a framework with a templating component baked in. You use it to create Single page Web Applications which means that DOM modification is happening on the client side and the app exchange with server only data. If your concern is template it is plain HTML.
Whereas, template engines' rendered views are sent to client each time by server whenever request is made each time a new page is rendered on server and sent to the client which is Great for static sites but not for rich site interactions.
If there is angular for front-end in MEAN Stack then why there are views and template engines in express.js at back-end?
This is because not every time generating views from angular is recommended sometimes it is better to use Template Engines to generate views and send the rendered page to a client, generating views at client side has its own pros and cons and generating views at server side has its own.
Generating views using template engines (i.e. at server-side):
pros:
Search engines can crawl the site for better SEO.
The initial page load is faster.
Great for static sites.
cons:
Frequent server requests.
An overall slow page rendering.
Full page reloads.
Non-rich site interactions.
Generating views using angular engines (i.e. at client-side):
pros:
Rich site interactions
Fast website rendering after the initial load.
Great for web applications.
Robust selection of JavaScript libraries.
cons:
Low SEO if not implemented correctly.
The initial load might require more time.
In most cases, requires an external library.
So, after knowing the pros and cons, you yourself can better decide that in particular case which one is better for you. Mean Stack has provided options for developers.
As far as your question regarding the role of these two technologies is concerned, Angular is a lot more view generator only, It has features like routing, it as services two-way data binding etc while the template engines are meant to render HTML so that it can be sent to the client.
I hope you will find this answer useful.
References:
what is the template engine?
what is angular?
pros/cons
Angular is a full-fledged front-end framework that comes with its own way of doing templating, using angular-specific markup in your HTML. If you use Angular as your framework, you're more or less stuck with their way of templating within the Angular portion of your application.
Angular Features
It is a framework written in Javascript language
Manages state of models
Integrates with other UI tools
Manipulates DOM
Allows writing custom HTML codes
It is meant for javascript developers to create dynamic web pages in a quick time
NodeJS
It serves the web
It is runtime built on javascript engine in google chrome
It can be considered as a lightweight server which can serve client requests in a more
simpler way than java does
It performs communication operation with databases, web-sockets,
middleware etc.
Why we use angular for Tempting not Express/Node tempting Engine
Server-side rendering is the most common method for displaying information onto the screen. It works by converting HTML files in the server into usable information for the browser.
Whenever you visit a website, your browser makes a request to the server that contains the contents of the website. The request usually only takes a few milliseconds, but that ultimately depends on a multitude of factors:
Your internet speed
how many users are trying to access the site and
how optimized the website is, to name a few
Once the request is done processing, your browser gets back the fully rendered HTML and displays it on the screen. If you then decide to visit a different page on the website, your browser will once again make another request for the new information. This will occur each and every time you visit a page that your browser does not have a cached version of.
It doesn’t matter if the new page only has a few items that are different than the current page, the browser will ask for the entire new page and will re-render everything from the ground up.
How client-side rendering works
When developers talk about client-side rendering, they’re talking about rendering content in the browser using JavaScript. So instead of getting all of the content from the HTML document itself, you are getting a bare-bones HTML document with a JavaScript file that will render the rest of the site using the browser.
This is a relatively new approach to rendering websites, and it didn't really become popular until JavaScript libraries started incorporating it into their style of development.
See Examples HerePratical Example
Basically template engines in Express are mostly used for displaying 404 and other server error messages. I find them ideal for such use cases. Using template engines for complex front end rendering is bad and not a good practice.
Express JS is a web framework on top of nodejs http module. Whereas Angular JS is a front end framework which doesnot depend on NodeJs server to run. Conceptually both are similar in few features like routing whereas implementation is different
I am still quite confused about REST API, Angular and so on.
I would like to build simple web app which allows users to book events and I would like to do it in Symfony 3 + Angular.
In future, I could make it work on mobile phones as well.
The reason I want to do it is to learn symphony 3, REST API and Angular better and to increase chance I will get hired.
I have few questions:
1) Apart of the fact I am going to learn Angular what is the real benefit of using Angular rather than twig templates and HTML for the front end ?
2) As far I have seen people usually suggesting light weight frameworks to build REST API. Why would not they suggest symphony ?
3) What would you suggest to build to show you have got good skill set to get hired ?
1) Angular a complete framework. In your case, you would use angular as front end. This would be two options.
First one is completely using Angular, Symfony serves the RESTful API. Then twig is not involved anymore.
The other is used Angular within twig, acting like a server side rendering Angular. This way is not very common right now, rather less examples could be found.
In any case, Angular could provide single-page application, which could give your users better user experience, faster load speed, move the html view part completely to browser(make server less tasks regarding rendering the view). You could also achieve this by using twig+javascript, but it would be a bit more complex depends on your skills.
But in my opinion, the best benefits would be separate the frontend and backend from architecture perspective.
2) Symfony is a very complete PHP framework. Building a REST API is only an example of using Symfony. And in this way, some features from Symfony could not be used. I would say some lightweight framework would deliver the same result as using Symfony. It would also be easier using some lightweight framework(less code, less configuration, etc.). However, the performance of Symfony and large community might also need to take into consideration when you choose the right framework.
3) Always a good protfolio by showing your experience and skills.
I want to build a mid-size application using NodeJS and NW.js (formerly known as node-webkit). The application will grab some data from the internet but isn't talking with one special service which is under my control.
Is it a good idea to use AngularJS nevertheless or is the MVC approach of Angular oversized if there isn't neither a database nor a webservice on the controller layer?
I think Angular would be really fine for databinding and GUI handling, but I'm not sure if it's the right approach for this kind of application.
I see no reason not to use Angular in an nwjs project. I do it myself in the app I just finished building. It's a local-only deck tracking app for hearthstone that never communicates over the internet at runtime. It only ever monitors a log file that is generated by the Hearthstone game. Since the way I'm display information to the user is still technically a web page with a full DOM, Angular makes perfect sense since I'm already comfortable using it.
I need to add new features to an already existing application. The application is built using Lithium and jQuery. The features that needs to be included have a complex view which allow users to analyze data and perform CRUD functionality. I won't go into details about the features here, but after working on a few simple Angular tutorials and side projects, I know that using AngularJS to create this view will make my life a lot more easier than creating the view using jQuery.
Over the course of the next few months we may convert the entire app to AngularJS.
I am uncertain about where I should place the Angular files and how to setup routing. How can I integrate AngularJS to Lithium so that part of the Lithium routing works and part of it is handled by AngularJS.
I also found this answer on stackoverflow but it doesn't mention folder structures or how to integrate Angular with Lithium. I think this link mentioned in the answers is supposed to have what I am looking for but it doesn't seem to exist anymore.
The link is down, but you can clone the source repository and run it yourself here: https://github.com/nateabele/li3-angular-presentation
Regarding organization, the simplest way would be to place the directory structure for your Angular components inside of /webroot. The more advanced (and in my opinion better) way would be to make them two separate applications: an AngularJS UI app, and a backend API in Li3 that it talks to.