In WebStorm, can I run Angular and Node in the same project? Is there a project template for this?
i want to send an array from nodejs route to angularjs
Thank you!
this is my code
conroller.js
$http({
method: 'GET',
url: '/Profil'
}).then(function (success){
console.log("i get the data");
$scope.items=success;
},function (error){
});
Nodejs file :
personne1={FirstName:"a", contry:"usa",LastName:"sfn"};
personne2={FirstName:"b", contry:"usa",LastName:"sfn"};
personne3={FirstName:"x", contry:"usa",LastName:"sfn"};
list=[personne1,personne2,personne3];
console.log("hello from profil");
res.render('Profil',{items:list});
Angular is a frontend JavaScript library. NodeJS is a runtime environment using Chrome's V8 engine for your backend. Using them together is quite possible. One such example is a MEAN stack (MongoDB, Express, Angular, Node).
To get started in Webstorm, Jetbrains has a help page. There is also a starter that you can grab from Github.
Happy coding!
Related
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");
});
I am working on ionic application and using $http for get the data from web service. I have tested and its working on browser perfectly but i don't know why its not working on my android mobile, it just keep processing and after 3 to 5 mins it shows:
ionic.bundle.js:25000 POST http://xyz-domain.com/api/ net::ERR_CONNECTION_TIMED_OUT
Even i have installed cordova-plugin-whitelist plugin but still getting same.
My Code:
var ApiURL = 'http://xyz-domain.com/api/';
$http({
url: ApiURL,
method: 'POST',
data: 'action=activate&app_secret=123456',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(res){
alert(res);
});
Can any one please tell me how i can solve this issue ?
Thanks
This might be the case that your white list plugin and android platform version are not compatible.Happened to me also.Updating the platform and the plugin resolved the issue.Also can you alert the data, status, headers, config that are returned by the service.
I would like get the json data from Google Api but with get method and jsonp method this is not work.
Her is my code :
$http({
method: 'get',
url: 'https://maps.googleapis.com/maps/api/place/search/json?location=46.2030350,6.1522080&radius=500&types=restaurant&sensor=false&key=MY_KEY&callback=?'
}).then(function successCallback(response,data) {
console.log(data)
}, function errorCallback(response) {
console.log('nope')
});
I'have XMLHttpRequest cannot load.
This is mostly like you are trying to run the file without a server directly via browser. You would need either xampp or other webserver.
OR just install python 2.7 and use the following command from where your project files are location python -m SimpleHTTPServer 8000 and then navigate to localhost:8000
I am working on creating a website with Angularjs and WebAPI as backend support with Visual studio.
I have defined the url to webapi in app.config.js as an app constant:
var serviceBase = 'http://localhost/Webapiservice/';
app.constant('ngAppSettings', {
apiServiceBaseUri: serviceBase,
clientId: 'ngTestApp'
});
Now for QA environments (http://QAServer/Webapiservice/), the webapi resides at a different URL, the same goes for our production environment (http://ProdServer/Webapiservice/).
I can manually update the js file to the appropriate location. But is there a way to automate this process so webAPI is pointing to the correct URL?
Is it possible to do this with grunt? Again I have never used grunt before.
ngConstant does a great job, along with grunt: https://github.com/werk85/grunt-ng-constant. This way you can specify your environments as JSON files and on compile/run time, grunt generates a enviornment.js file with a module (I call mine always ENV), which can be injected in every part of your application.
I would do something like this:
angular
.module('app', [])
.value('$path', {
rest : "http://localhost/Webapiservice"
})
you will call something like this:
app.constant('ngAppSettings', {
apiServiceBaseUri: $path.rest,
clientId: 'ngTestApp'
});
I build an AngularJS application that I expected to work as a hybrid application for mobile devices. As such the application would run locally from the file system.
When the $routeProvider gets the html file I get the following message.
This is a CORS violation obviously but the file is local and trying to access another local file. It's not like a web site is trying to access a clients local files. This is the client.
I can't spin up a web server to serve up the local files because this will be packaged up and deployed as a local application.
I know people build hybrid mobile applications all the time. What I can't figure out is how they do this with AngularJS and why AngularJS doesn't either offer a solution or prescribe how to get around CORS.
I'm open to all suggestions. Thanks all.
XMLHttpRequest cannot load file:///D:/SubversionRits/SourceCode/Verso%20-%20Mashup%20Proposal/MarshupSource/MashupCoreUI/core/apps/mashup/welcome/welcome.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. VM36 angular.js:8380
Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///D:/SubversionRits/SourceCode/Verso%20-%20Mashup%20Proposal/MarshupSource/MashupCoreUI/core/apps/mashup/welcome/welcome.html'.
Here is my route config
mashupApp.config(function ($routeProvider, $httpProvider) {
// I've tried all these with no effect.
//$httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
//$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
//$routeProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
//$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
//$httpProvider.defaults.useXDomain = true;
//delete $httpProvider.defaults.headers.common['X-Requested-With'];
$routeProvider
.when('/about', {
templateUrl: 'apps/mashup/about/about.html',
controller: 'aboutController',
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load({
name: 'mashupApp',
files: ['apps/mashup/about/aboutController.js', 'apps/mashup/~appServices/dataService.js']
});
}]
, sessionLoad: function ($route, sessionLoad) { return sessionLoad.loadCompleted(); }
}
})
.when('/', {
templateUrl: 'apps/mashup/welcome/welcome.html',
sessionLoad: function ($route, sessionLoad) { return sessionLoad.loadCompleted(); }
}
})
;
});
I don't know the details, but I'm pretty sure HabitRPG's Android app uses Angular.
https://github.com/HabitRPG/habitrpg-mobile
Ok, I figured it out.
Running a web app from a file doesn't work because of CORS but when you are packaged up in Phonegap or Cordova inside the Intel XDK everything works.
I took my application and created a blank Intel XDK project and copied my web files to it without changing anything.
It all worked!
Thanks for those who offered ideas and suggestions. I really appreciate it.
I see how this can work now.
If you want to create a hybrid mobile app with AngularJS, you should definitely checkout the Ionic Framework.
From the Ionic website:
A match made in heaven. Ionic utilizes AngularJS in order to create a framework most suited to develop rich and robust applications. Ionic not only looks nice, but its core architecture is for serious app development, and AngularJS ties in perfectly.
You can't access the files directly due to browser security settings, but you can store data etc in localstorage and use that when the app is offline.
Someone has put together an example here http://amitavroy.com/justread/content/articles/html5-local-storage-angular-js