Using angular 1 simple with express js - angularjs

I have used node js with handlebars and now want to move towards the proper MEAN stack. I have learned angular1 and using it with single page node js apps.
But when it comes to express, after doing "express project-name" I start my server by "npm start" and in the "views" lies my html and angular code. How will by angular app there will interact or will run with my nodejs, I have scratched my head all over youtube videos and questions here but didn't find a satisfactory answer. What I want to work in angular is:-
$http.get('/users/signup',function(res){
console.log(res.data);
}
and in nodejs users.js route resides this:-
router.get('/signup',function(req,res,next){
res.send("req recieved here");
}
How will the req from angular be made to the server running using npm start??

Try this:-
router.get('/signup',function(req,res){
res.send("Any data");
});

Related

How to deploy Next.js app without Node.js server?

I was hoping to deploy a Next.js app with Laravel API. I had developed React apps with CRA and in those I used the API server to serve the index.html of the CRA as the entry point of the app.
But in Next.js, after development I get to know that it needs a Node.js server to serve (which is my bad, didn't notice that). There is an option next export that builds a static representation of the Next.js app and it has an index.html. I am serving the index.html as the entry of the app by my Laravel API. It is serving the page, but just some of the static contents.
What I was hoping to know is it possible to host the aPI and the Next app from a single PHP shared hosting without any node server? If so, how? If not so, what could be the alternatives?
Actually the acepted answer is completly wrong, when you do yarn build and in your package.json is set like "build": "next build && next export", you will get an out folder which all the items in there are used to build without node.js server
Now since you are using laravel, and you use the out folder you will only load half of the page because the routes are not set properly. for that to work you need to edit your next.config.js edit it to
module.exports = {
distDir: '/resources/views',
assetPrefix: '/resources/views',
}
These will set the root directory to the root one in Laravel. now this will work for SPA (single page application) only for the dynamic routes you need to match with a view file for each one that you have in your out folder
For each route that you have you need to create a new "get" route in laravel
Route::get('/', function () {
return require resource_path('views/index.html');
});
Route::get('/contacts', function () {
return require resource_path('views/contacts.html');
});
Route::get('/post/{slug}', function () {
return require resource_path('views/post/[slug].html');
});
Notice that you can pass a wildcard for dynamic routes and they are all gonna work. once you do that and you deploy route out folder inside /resources/views in Laravel it's going to work
Apparently there is no alternative to nodejs server, which is not an option for me currently, so I unfortunately had to abandon next.js and create a CRA app and used as much from the next.js as I could.

Cannot find hostname in file:/// error when using Ionic and OAuth.io

I am using Ionic and Oauth.io to perform authentication. If I run ionic serve and include the outh.js file in my index everything works good from the browser.
But when I run ionic run ios or install the app in android, I get the following error when I press the auth button (the one that suppose to execute OAuth.popup
I do not know what to do, until now I have checked the following:
In config.xml I have access, allow-intent and allow-navigation full permisive
I have installed and re-installed the plugin ionic plugin add https://github.com/oauth-io/oauth-phonegap.git
I tried to run the native app without the inclusion of the oauth.js file and everything breaks.
Using current versions up to date.
I am new to Ionic, so I don't know how to debug the device-running app or simulator.
Could be similar to this post but not exactly .
Your advices will be appreciated.
I figure it out reading some posts. The OAuth initialization and references should be done after the device is ready, so it is best to put the initialize in this block:
$ionicPlatform.ready(function() {
// ...
if(typeof window.OAuth !== 'undefined'){
$rootScope.OAuth = window.OAuth;
$rootScope.OAuth.initialize('XXX');
}
else{
console.log("plugin not loaded, this is running in a browser");
$.getScript( "lib/oauth.js", function() {
$rootScope.OAuth = OAuth;
$rootScope.OAuth.initialize('XXX');
});
}
});
Now, if the plugin is loaded it initializes the window.OAuth object, else the app is running in browser, so I have to include the oauth.js file. Also I assigned the OAuth to the $rootScope for quick access.
Hope this helps anyone.

Infinite loop between JSP and webpack + AngularJS app

We are trying to integrate a JEE app (jsp on the frontend) with an angularJs app. The angularJS is being packaged with webpack so in the jsp we are linking the app thru a <script> tag
The application is being manually bootstrapped once the modules are already defined.
The result once the manual bootstrapping occurs is kind of an infinite loop between the jsp and the angular app. We can see the url alternating between these two:
http://localhost:8080/app/initApplication?lang=ES&TOTAL_APPROVALS=1#_
http://localhost:8080/app/initApplication?lang=ES&TOTAL_APPROVALS=1#/
Note the / at the end of the second one.
The angular app sometimes get rendered in the browser and some others don't.
We think it has something to do with what occurs with $location when manually bootstrapping an Angular app but we really don't know.
What's going on?

AngularJs/Yeoman/Grunt Play Framework blank page

Today I decided to try out AngularJs with play framework, I've created a folder inside my public folder called AngularJs, in which i have generated an angular app with yeoman.
After generating the sources with grunt build, in the route folder of play, I've put:
GET / controllers.Assets.at(path="/public/javascripts/angularJs/src/dist", file="index.html")
Now the problem I am facing is that the index page is well retrieved but Angular doesn't load the templates.
Anyone have a clue?
Ok now I get it after fiddling around for a moment, the problem with angularJs and Play framework, is that play must serv all the angularJS resources, so the solution to the problem, is to create routes to the angularJs dist folder in your public play application folder.
for an angularJs application created with Yeoman and generated using "grunt build", you must define these routes :
GET /scripts/*Asset controllers.Assets.at(path="/public/javascripts/angularJs/scripts", Asset)
GET /views/*Asset controllers.Assets.at(path="/public/javascripts/angularJs/views", Asset)

AngularJS, Grunt server and socket.io.js 404 (Not Found)

After 3 hours of combining I decide to write question here.
I'm trying write a application on my pc using yeoman for building application. I'm trying use socket.io but I see 404.
What I do
I have installed yeoman.
I have installed socket.io under /node_modules/
I have installed angular-socket-io by bower
In my index.html I have included needed scripts: index.html
In app.js I added module btford.socket-io
In my controller I inject socket : .controller('ChatCtrl', function ($scope, socket) {
And I run? server using grunt server command
So where I make mistake or what I wrong understand so my application can't find socket.io.js file?
Here you can find my full code: https://github.com/w00caSh/FunWithAngular
EDIT:
It's very important. Do I have to enable any node server for this?
The problem was, that I used wrong code for listening sockets in server.js file.
I rewrite this file and now it's working well.

Resources