i read many articles and posts about integrating nodeJS & angular, i don't understand at all. i tried to create the server.js, mainController and index.html, the server runs well but angular is not working. i've been stuck with this for one week and i can't solve it.
here is my server.js :
var express = require('express'),
app = express(),
port = process.env.PORT || 3000;
var routes = require('./routes/routes');
app.use(express.static(__dirname + '/application')); //static path
routes(app);
app.get('/', function(req,res){
res.sendFile(__dirname + "/application/views/index.html")
//res.sendFile('./views/index.html');
});
app.listen(port);
console.log('server started on: ' + port);
here is the mainController.js :
var app = angular.module('server',[]);
// App controller
app.controller('appController', ['$scope','dataServ', function($scope, Data) {
$scope.greetings = "hello words";
Data.get()
.success(function(resp) {
$scope.greetings = resp;
});
}]);
and this is my index.html :
<!DOCTYPE html>
<html lang="en" ng-app="mainController">
<head>
<meta charset="UTF-8">
<title>Testing Web</title>
<!-- LOAD JS -->
<script src="../lib/js/angular.min.js"></script>
<script src="../controllers/mainController.js"></script>
</head>
<body>
<div ng-controller="appController">
{{greetings}}
</div>
</body>
</html>
here is my folder structure if needed :
application
-- controllers
--- mainController.js
-- lib
--- js
---- angular.min.js
-- views
--- index.html
routes
server.js
In your index.html, replace the ng-app="mainController" with ng-app="server" as it expects the main module name.
Related
I'd like to transmit a variable to another page with Node, in order to use it in the other page, I tried localstorage and defining a global variable, but no result for the moment, it says that node can't access the localstorage of the window :
test.js
var express = require('express')
var session = require('express-session')
var app = express()
app.post('/test1.html', function(req, res){
var user = "Jonhy DEEPPP";
console.log(user);
res.render( 'test1.html', { user:user } );
});
test1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
<script>
alert(user);
</script>
</body>
</html>
im very new to Angular.js and i cant seem to get my expression to display the values from my controller, it just sees it as a string when i view it. i have no idea why. Am i missing something super obvious?, any help would be appreciated.
Im also using node.js just to set up my local server, but i dont believe this is the problem.
var appdemo = angular.module('appdemo', []);
appdemo.controller('ctrl', function($scope) {
$scope.value1 = 1;
$scope.value2 = 2;
$scope.updateValue = function() {
$scope.x = $scope.value1 + ' x ' + $scope.value2 +
" = " (+$scope.value1 + +$scope.value2)
};
});
<!DOCTYPE html>
<html ng-app="appdemo">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>appdemo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div ng-controller="ctrl">
<span>times</span>
<input type="text" ng-model="value1" />
<input type="text" ng-model="value2" />
<button ng-click="updateValue()">total</button> {{x}} {{ value1 }}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script src="main.js"></script>
</body>
</html>
this is my local server not entirely convinced if done it correctly.
const express = require('express')
const app = express()
app.use(express.static("public"))
app.engine("html", require("ejs").renderFile)
app.set("view engine", "html")
app.set("views", "./views")
app.get("/", (req, res) =>{
res.render("index")
})
app.listen(3000, ()=>{
console.log("Running on port 3000...")
})
file structure:
node_mdodules
public
css
views
index.html
main.js
app.js
package-lock.json
package.json
Let assume you have the next folder structure:
-App name
-public
-html
-index.html
-js
-main.js
-style.css
-server.js //Or any other name for your node js server
In your server js you should use the __dirname property:
app.use(express.static(__dirname + '/public'));
Then in your html replace your import script for this:
<script src="/js/main.js"></script>
I am serving a static html file using the app.use(express.static(__dirname+"views")). And when I go to localhost:3000/first.html I get the html file. But I don't know if the angularjs and other controller javascript files were executed. I think they were not executed because I use ng-model for a button's value and it's just an empty button with no text and the function is not executed for the ng-click.
I think maybe it's because only the html file is served by the server without my controller js and my downloaded angularjs which I have src'd to in the html. But I don't see a 404 or any error in the console.
And also, when I use a virtual path(like app.use(express.static('',__dirname+"/views"))), I don't get the html file when I go to localhost:3000/views/first.html.
This is my server.js:
(function(){
var http = require("http");
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var path = require('path');
// app.use(express.static(__dirname));
app.use(bodyParser.json());
app.use(express.static(__dirname+'/views'));
// app.use(express.static('/views',__dirname+'/views')); this is not working
var server = http.createServer(app);
server.listen('3000');
console.log("Server is listening");
})();
My first.html which is served by the server:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title></title>
<base href="localhost:3000/">
</head>
<body>
<script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript" src="./angular-route.js"></script>
<script type="text/javascript" src="./controller.js"></script>
<div ng-controller="firstController">
First name:<input type="text" ng-model="firstName"><br>
Last name:<input type="text" ng-model="lastName"><br>
<input type="button" ng-click="loadView()" ng-model="submit" name="">
</div>
</body>
</html>
This is the controller.js:
var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider,$locationProvider){
$routeProvider.when('/first',{
templateUrl:'/first.html',
controller: 'firstController'
})
.when('/second',{
templateUrl:'/second.html',
controller:'secondController'
})
.otherwise({
redirectTo:'/first'
})
$locationProvider.html5Mode(true);
})
console.log("controller");
app.controller('firstController',function($scope,$location){
$scope.firstName="";
$scope.lastName="";
$scope.loadView = function()
{
$location.path('views/second/'+$scope.firstName +"/" +$scope.lastName);
}
$scope.submit = "submit";
})
.controller('secondController',function($scope,$routeParams){
$scope.firstName = $routeParams.firstName;
$scope.lastName = $routeParams.lastName;
})
Iam newbie to Angular and express Frameworks.Iam developing a simple server which responds to the given route and show the value of variable which was declared in the controller.But there was an error such as the controller is not defined.Here the controller is stored in client/js/controllers folder for convenience
The code of the entire project is here
index.html
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<meta name="description" content="">
<meta name ="viewport" content ="width=device-width ,initial-scale =0">
</head>
<body>
<!-- Meetups View -->
<div ng-controller="meetupsController">
<h1>There are {{meetupsCount}} meetups</h1>
<!-- <ul>
<li ng-repeat="meetup in meetups">
{{meetup.name}}
</li>
</ul> -->
<!-- <form ng-submit="createMeetup()">
<input type="text" placeholder="Meetup Name" ng-model="meetupName"></input>
<button type="submit">Add</button>
</form> -->
</div>
<!-- Hello World -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="/js/controllers/meetups-controller.js"></script>
</body>
</html>
meetups-controller.js
function meetupsController ($scope) {
$scope.meetupsCount = 10;
// $scope.meetups = [
// { name : "Meet 1"},
// { name : "Meet 2"},
// { name : "Meet 3"}
// ]
// $scope.createMeetup = function () {
// $scope.meetups.push({ name : $scope.meetupsName});
// $scope.meetupsName = '';
// }
}
main.js
// console.log("Hello from node");
//Express server
var express = require('express');
app = express();
app.get('/' , function(req ,res) {
res.sendFile(__dirname + '/client/views/index.html');
});
app.use('/js',express.static(__dirname +'/client/js'));
app.listen(3000 ,function () {
console.log('Im Listening .... ');
});
The error log is here
angular.js:12520 Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=meetupsController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:6:416
at qb (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:22:131)
at Qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:22:218)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:80:210
at w (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:177)
at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:61:30)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:122)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:122)
You haven't defined an Angular app (ng-app="") and haven't registered your controller in the angular app.
meetups-controller.js (add at the bottom of the file):
var app = angular.module('myApp', []);
app.controller('meetupsController', meetupsController);
index.html (change):
<html ng-app="myApp">
this works in older versions of angular not the new one
change your angular version to
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js" > </script>
or define a module in js file for working with latest angular versions
var app = angular.module('app', []);
app.controller('meetupsController', meetupsController);
function meetupsController ($scope) {
$scope.meetupsCount = 10;
}
in html
<html ng-app="app">
I am just playing around with AngularJS and I wrote a small piece of code which I have shared here. But for some reason, the binding of data doesnt happen. Here is the HTML and JS code for those who do not want to go to the plucker site.
first.html
<!doctype html>
<html ng-app="firstApp">
<head>
<title>First Angular JS</title>
<script src="/lib/angular.min.js"></script>
<script src="/js/first.js"></script>
</head>
<body>
<div ng-controller="FirstController">
<span>Name:</span>
<input type="text" ng-model="first">
<input type="text" ng-model="last">
<button ng-click='updateMessage()'>Message</button>
<hr>{{heading + message}}
</div>
</body>
</html>
first.js
var firstApp = angular.module('firstApp',[]);
firstApp.controller = ('FirstController',function($scope)
{
$scope.first = "Some";
$scope.last = "one";
$scope.heading = "Message: ";
$scope.updateMessage = function()
{
$scope.message = 'Hello' + $scope.first + ' ' + $scope.last + '!';
};
});
In the HTML, I am using express to redirect calls to its appropriate places
node_server.js
var express = require('express');
var app = express();
app.use('/', express.static('./static')).
use('/images',express.static('./images')).
use('/lib',express.static('./lib/angular-1.2.22'));
app.listen(8080);
The output is showing {{message + heading}}. Does anyone have any ideas why this wouldnt work?
The issue is in the way you're declaring your controller.
You have:
firstApp.controller = ('FirstController',function($scope) ...
It should be:
firstApp.controller('FirstController', function($scope) ...
Try this:
firstApp.controller('FirstController', ['$scope', function($scope) { ...
Doc's for controller in Angular