How to integrate an existing Angular 5 project with Apostrophe CMS? - javascript

I a have an Angular 5 project up and running, and I would like to add a CMS to allow admin control over content.
I would like to use something that works with NodeJS, ApostropheCMS state that any front-end application can integrate with their technology, but I can't find anything to help me understand how this is done.
I am Looking for help to understand the integration process, if possible at all !?
And if it isn't then what would be alternative solution considering the Angular 5 project.
Thanks in advance

you can do this using the apostrophe-headless module. In that configuration you could build a separate backend site just for editing the content and use the headless APIs from your angular site so you don't have to deal with any disagreements between them over frontend things.

Related

Integrating an Angular app with Vanilla JS webapp

I'm in need of your assistance.
Background
We have a legacy Vanilla JS webapp which we intent to replace with Angular. Due to time constraints we wish to do this gradually where we replace one isolated component at a time but also add new functionality as isolaed Angular apps.
The goals is of course to be able to completely move to Angular in a timeframe between 6-12 months.
Issue
I've been investigating how to seamlessly integrate an angular app with our vanilla js with webpack (which we are already using to build our app).
There has been no examples on how do this for Angular whereas I've seen examples for React.
The intention is to have a separate directory for the angular which is then bootstrapped when needed in the vanilla JS. We want to build the angular stuff alongside the rest in one aot js.
Consequences
The consequences I see is of course time to bootstrap the angular app but when using aot there should be not be much of an issue.
Solution??
This is where you guys come into play. How do we easily build the angular app together with the vanilla js app?
Ideally I want to somehow ng build --prod the angular app and then include the result in the vanilla js webpack dist.
Thanks in advance.
If I were you I would do the opposite : integrate the vanillaJS application into Angular.
As Lazar said, Angular is a platform. You code an application using Typescript.
The good news is, every valid JS code will be valid TS code. The opposite, on the other hand, isn't true.
So what I would do, is take my old application chunk by chunk, and put it in a new Angular application.
And I know you are using webpack and it might work great for you, but I highly recommend you to start from scratch with the CLI. Not only because it also uses Webpack, but because it represents 90% (arbitrary number, but not so far from it) of the Angular projects, meaning if you have any issue, there's a whole community that will be able to help you.
Without, of course, mentioning all the features such as i18n, server-side rendering, AOT ...

How to use server-side rendering in Angular 2?

I have a web app developed with Angular 2 which communicates with Java APIs on the server to fetch data. Everything is working fine except the pages are not indexed by search engine (except Google which supports script generated tags).
I've googled a lot and found that this can be achieved by "server side rendering" and there are libraries available to achieve this but all of these are commercial products that require payment.
I have come across Angular Universal which is not a commercial product, can we use it to solve our issue? If it can then how can we hook it up to our existing app?
You are on the right path there are two ways to achieve your objective
If you are using #angular/cli for developing angular app then you can only follow this link
If you developing with your own webpack.config file then there are lot of options available, best of them is universal-starter , which is featued in official documentation of angular/universal
While continuing with #angular/cli, there is a little caveat that it doesn't support lazy loading yet but they are working on it and future is bright with #angular/cli. If you want to implement lazy loading now only then i will suggest you go ahead with second option.

Integrate nodsjs as embedded website in wordpress

I need some help.
I'm kind of new to javascript, but I built a flight search single page application using nodejs and angularjs and the Skyscanner API.
Now I would like to integrate this application as an embedded website in a wordpress in order to enjoy the advantages of wordpress. Does anybody have experience with this? Do the two system compete? Whats the best way to do this?
As wordpress is based on php, I guess there should be some troubles, maybe you know a turnaround.
Thanks in advance!
WordPress itself is written in PHP but whatever frontend you build with it can access your API written in Node, either directly from Angular or indirectly via PHP.
If you can get your Angular app embedded in WordPress then you shouldn't have problems accessing your Node API from it (keep in mind that you may need to configure CORS correctly).
But whether you can get your Angular app embedded in WordPress may be a big "if".
You can either use an iframe in order to embed a page that you're running in your Node.js environment or just provide some APIs from your Node.js server and call them from WordPress the way you prefer (jQuery, Angular.js or whatever). I don't see any particular issue about running an Angular app in WordPress.

Deploy Angular2 demo app within rails or as standalone app?

I'm currently learning Angular2 and went through the quickstart and heroes tutorial. I'm always starting these apps with "npm start".
I've created a backend application in ruby on rails, and also have a frontend angular2 app. I do not know how I can integrate the angular2 app within the rails app. Theoretically, I can just put it into the public/ directory to make the JS accessible, but I probably need to convert it somehow so that the links are setup right.
Can anyone tell me how this is done normally?
Thanks a lot
You can do this in two ways as I can see
1 - Add your angular project folder to app/assets/javascripts or in the root in you app and set rails asset pipeline to use it. read more here (for angular1) https://thinkster.io/angular-rails
2 - Running as a separate project and use rails as only as an API. (this is my preferred method) due to following reasons.
this will give a separation between your rails app and angular app. Basically you are forced to implement things in standard api way, like authentication etc. hence overtime you will have a more solid rails api and angular fronted
once you have the separation, you can run these two in different app servers if you wish to. gives better load balancing etc..
You can always replace both frontend and backend with different technologies later, like amber and node since they communicate only via an http api.
So this option will need more time and effort, but, if possible its defiantly worth it :)

Using external libraries

I'd like to build a chrome extension in angular using AngularJS which interacts with Twitter.
I have some experience in integrating twitter with node.js but far less when it comes to angular only.
I'd like to use OAuth.js to connect to twitter (http://oauth.googlecode.com/svn/code/javascript/) and therefore I was wondering how to integrate this with Angular?
Do I need to build a provider and rewrite all the function I need from OAuth.js or is there any quick way to do it?
Many thanks
You can use ng oauth plugins that other people wrote like these:
enginous/angular-oauth:
https://github.com/enginous/angular-oauth
andreareginato/ng-oauth:
https://github.com/andreareginato/ng-oauth
I haven't used them myself, but documentation seems straight forward.

Categories