We Keep Coding

Angular 7 configuration or alternatives?

I have been struggling with how to implement Angular 7 into my .NET Core 2.X project keeping the best of both frameworks without success. The main problem that I am facing is that Angular wants to control my frontend and how it receives it. By this I mean it forces you to use static templates for everything, I get the concept but for my project, this is going to generate an insane amount of templates/components or templates with a bunch of unused display elements. It makes much much more sense to have more of a generic frontend component that receives the templates from the server then handle all the binding, DI, updates etc.
I have looked at several options and questions about Dynamic Components, Dynamic TemplateURL's, Custom Elements and lots of other topics. But the problem I see with most of these answers is that none of them actually have a dynamic template, they might use Dynamic Components but the actual loaded control still has a static template in the end.
This question seems to be pointed to most
I did run across a solution that seemed to be an option but then I realized that it had to be run with the JIT Compiler. That again adds unnecessary load on the client when everything could be compiled ahead of time.
There was also one about using Angular Elements but this has its own problems apparently and really doesn't fix the issues without allot of rewiring or other workarounds to keep everything working.
The Dynamic Component Loader sounded very promising, From the Angular site it states
Component templates are not always fixed. An application may need to
load new components at runtime.
That implies that the templates may be set dynamically but at the same time, it implies that loading a new component at runtime will fix that. But the component loaded has a static template. Nowhere is the template generated or changed, or am I simply missing something?
I have looked at Angular SSR and that almost handles it but I can't seem to figure out how to go through the Controller or otherwise utilize any of the benefits of .NET Core/ASP.NET or dynamic server-generated content. It seems to just offload the compiling from the client onto the server but still uses the same static templates. Is there a way of using Node.js to render a MVC Route then send the module?
There used to be a way to set the TemplateUrl of the Component to a Route on the Server but that is now not allowed, making a lot of the answers I have found obsolete but the exact way I would like to set this up.
The only real option I have been able to figure out is using MVC to generate Dynamic Modules/Components then load them in the Angular App. Would it be feasible to compile the .cshtml view via a controller to create an HTML string that is then used to Compile an Angular Module/Component then send that out to the Client and load it into the Angular App?
I understand how to compile my View into an html string but I am not sure how to go about Compiling the Angular Module or even if this is the right idea or if there is a better way of handling this?
It seems to me that this should be a fairly easy thing to do, all the tools seem to be there but not sure how to get things working right.

I recently started with Angular (After working with .net, jquery, javascript, react) and my first interaction is directly with angular 7. The first thing I noticed was how quickly I can develop in angular, but there are a lot of files which I am not even sure about, however are generated compare to react, but the learning curve was higher in react then in Angular definitely.
If you need something really lightweight, you should definitely go for libraries then framework. react is a good option, however it's not MVC driven and you will find it very different then Angular (I am realizing it from sometime).
Other than that, if most of my code is static, I could have chosen some kind of HTML template frameworks (i.e, nunjucks) which can be pre-compiled.
For components created in .net, I don't think that is possible to have them pre-compiled in angular, as you will only create something in .net if you need those component having dynamic data.

Is it possible to use Angular JS for JAMstack architecture?

I am in need to implement a static SPA with JAMstack architecture. I know we can user ReactJS/VueJS for JAM based implementation. But I want to know is it possible to use Angular for JAMstack approach?
https://dev.to/leomeloxp/what-is-jam-stack-2957

As JAMstack stands for JavaScript, API, and Markup, the only part which is a bit less straightforward to do Angular as a JAMstack is the markup.
It is possible to pre-render Angular on the server with Angular Universal: this would be the Markup part of the JAMstack. To make it a JAMstack application you would have to use build time pre-rendering instead of server-side rendering.
Angular is JavaScript obviously, so that is pretty straightforward.
And your Angular app probably already is talking to APIs, so that is easy too.
The main thing would be to build your Angular app in such a way that it works as a standalone website and serving it as static files via a CDN. Any content that needs to be dynamically updated you call via an API.
So yes, in my opinion it is possible to use Angular for JAMstack.

I'm not sure if you are talking about Angular(2+) or AngularJs(1), but anyways there is no tool that use any of those frameworks, but, here you can see all the current tools you can choose to build an app with the JAMStack
https://www.staticgen.com/
You can find some that use Jade, Handlebars for generate the templates. Maybe Angular is not present because is too big, a complete framework, and in these cases you most of all need a template helper.
So, good luck.

Things move fast in the web world, there now (since December 2019) is a Static Site Generator built in Angular: https://www.netlify.com/blog/2019/12/16/introducing-scully-the-angular-static-site-generator/
The Scully code (currently version 0.0.1 so probably not stable/production ready): https://github.com/scullyio/scully/
An explanation of JAMstack "through Angular-colored glasses": https://www.netlify.com/blog/2019/10/30/whats-angular-in-the-jamstack-it-sounds-delicious/

As i understand. JAM stand for :
Javascript : to handling pre-generated content on client , fetch updates via API
API : response for request from client , sent the markup out
Markup : the pre-generated content (i'm sure it's called Serverside Rendering also)
So you can obviously build JAM with Angularjs.
Here are a few references that I know of, might enough to create JAM with AngularJS
J : AngularJS famework it self. Use $http service for API requesting
A : Express module - NodeJS
M : https://github.com/runvnc/angular-on-server or https://github.com/ng-consult/ng1-server (didn't test any of these)

Converting a part of web application built with Javascript/Jquery to Angular 2

We would like to upgrade the web application built with Java script and Jquery to Angular 2. The application is huge and we cannot convert it at one shot, so we would like to convert it in a step by step basis. I have a couple of questions
What are options to convert a small part of web application to Angular 2.
From the current web application(built with simple java script / jquery) we would like to have a link that would open a modal window built in Angular 2. The modal window will have a series of screens to capture user input. We just want to create this part alone in Angular 2 as a first step. Is this possible?

There is a big difference between jQuery and Angular2. jQuery is a library to mainly manipulate the DOM. Whereas Angular2 is a complete framework. When I say complete framework, it has features like routing. So it is easy to build single page application with Angular2 without much external dependency.
To move to Angular2 you might need changes in the server-side also, like exposing APIs, the build system to support Angular2.
So instead of moving a modal window to angular2, a better option might to go with a microframework based approach, were you identify a small independent set of functionalities(module) and move it to Angular2

AngularJS can be used in small parts of your main application. No problems there. You can write your modal logic using angular and you will be fine. You can always add new features in your app using angular, going forward.
However when you say you want to upgrade your existing code, more factors will come into play and a lot will depend on the existing architecture of your app.
The most significant difference is that most jQuery apps works around DOM manipulation. The code you write for jQuery is always trying to manipulate your DOM.
But in angular this process works differently. If you code correctly you will rarely need to manipulate DOM in your angular project.
So I would not recommend to go for a partial upgrade where you have to mess with your application's architecture. But certainly you can build new features using Angular.

New to React, questions/benefit/disadvantage about using all JS instead of HTML?

I am starting to play around in React and I noticed that the simple app I am making is all in JS. My html page is only an empty body tag!
So I had a few questions because I am new to this framework.
Is my whole app supposed to be essentially all JS?
If it's not supposed to be all JS, when do I decide that something belongs in my html file vs creating it as a react component in JS?
What are the benefits / disadvantages that my html is in all JS?
Am I supposed to set up my server to compile the JS to html to serve html re: Server Side Rendering to maximize performance benefits?

React brings a new way of seeing things: components.
There are two approaches when using React:
AMD (Asynchronous Module Definition): your javascript files are loaded under demand; https://en.wikipedia.org/wiki/Asynchronous_module_definition and in http://requirejs.org/docs/whyamd.html
CommonJS: in this case your app is bundled into only one file (or a few 'chunck' files) - it seems that people have been preferred this way because the app is loaded only one time and it goes to the server only for loading and writing data (i.e. JSON); it helps in reducing charges over the server;
The page is really an empty body tag.... hehe
But with some considerations:
Please take a look at React-Router (or even Angular Route if you use AngularJS):
To move from the current 'page' (view) to a new page, the browser's URL is 'pushed' (changed) without going to the server and the entire new page is mounted according to that URL. This is made by React-Router or Angular Route.
Yes, you are supposed to make your server to output html: you can search for Isommorphic Javascript if you want your client html to be mounted dynamically (useful when you need search engines like Google to scan your page) More info at: http://isomorphic.net/ and this can help you: https://strongloop.com/strongblog/node-js-react-isomorphic-javascript-why-it-matters/
I know there is a lot of new technologies to study, but it's worth...
A little tip I can give you is looking for "Flux". It's a design pattern that helps structuring your application better, that allows you to scale and grow it.
You can take a look at webpack and babel too. Great stuff!
Hope this helps you.

NODE and CMS with angularjs: how do they cooperate

I'm thinking about making something with the MEAN stack. I need a way to edit the content of the site, like e.g. Wordpress offers (basically a CMS).
The confusing bit is how the CMS and Angular would work together. I've looked at a CMS named Keystone, and there you have to set up some routing etc. in Node. Won't this crash with the routing you set up in Angluar?
In other CMSs I've used, the creation of the views happens on the server side. In Angular, as far as I understand, you crate a HTML template, which you can populate with data in an angular controller. This also seems like something that could crash between CMSs and Angular. Is this the case?
Is there any other quirks or similar about Angular and content managment systems I should know about, or is it usually not much problems integrating the two?

meanjs.org has a pretty good approach to this. Install meanjs. It comes with a sigin/signup and even allows you to create articles from the vanilla install.
Put simply, when you are creating a web app with the MEAN stack, think of AngularJS as "THE" app, and node.js as the api.
If you approach building your web app as a javascript application (AngularJS), that happens to get its data from an server api (node.js), then you will begin to understand how to properly use the MEAN stack.
First: Angular will have the routes defined in the $routeProvider. Build the routing urls in AngularJS first. They are "THE" routes for your web app. A good way to look at it is to build the AngularJS portion with the ability to change your api server, even to another language (PHP, python, go, etc) if necessary.
Second: Build your AngularJS to communicate to the api with $resource. Essentially a $resource is an easy way to call out to an api using restful routing. This "restful routing" is now the routing that needs to be "mimicked/copied" into the routing for the node.js routes.
Often the AngularJS routes (the url) will match the $resource routing that matches the node.js routing.
Again, take a look at meanjs.org and you will have a better understanding on how to properly organize what "seems like" (and actually are) two separate apps.

Basically, you need three sets of routes (or two if you are doing it on the cheap).
Start out with a set of routes on the server that return regular webpages. Forget about JavaScript. Do not involve Angular at this stage.
Second, add another set of routes on the server which return data in a rawer form (such as JSON). This would typically be a RESTful API.
Third, add Angular to the client. When the view needs to be updated, update the URL in the browser and use Ajax to hit the RESTful API to get the data needed to populate it. (You want the URL you set the address bar to to match the URL of the page from the first set of routes that you are duplicating with JS and the data from the RESTful route).
If you are doing it on the cheap, like Gawker did, then you would skip the first set of routes and go direct to the JS+REST approach.

I think you need CMS on MEAN stack development environment.
there are some cms on mean stack you can try.
PancilBlue
Calipso
try this.

I was trying something similar, I found this link very useful AngularJsCMS It has told about free respond cms which is based on angularjs and have the ability to create pages like wordpress and manage contents.

We have been working on a project using angular and keystonejs. Simply serve the default template layout found in keystone and inject the data-ng-view tag within the body tag. Serve this template for all requests to '/'.
Then write your angular app normally to consume endpoints. These endpoints can be done in keystone using the api middleware. In the routes/index.js file add a key/value pair in the routes object with the name of your custom endpoint then import the folder containing your endpoint function definitions.
var routes = {
views: importRoutes('./views'),
api: importRoutes('./api')
};
exports = module.exports = function(app) {
app.get('/api/posts', keystone.middleware.api, routes.api.post.index);}

I recently migrated my blog over to MEANie - a lightweight custom MEAN Stack CMS that I developed.
I made it open source for anyone to use and posted details and setup instructions on my blog at http://jasonwatmore.com/meanie.