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>
Related
sorry for this very basic question.
So I want to know how to make buttons responsive.
I have a client.js and index.html as shown below
// Function to change the content of t2
function modifyText() {
const t2 = document.getElementById("t2");
if (t2.firstChild.nodeValue == "three") {
t2.firstChild.nodeValue = "two";
} else {
t2.firstChild.nodeValue = "three";
}
}
// Add event listener to table
const el = document.getElementById("myButton");
el.addEventListener("click", modifyText, false);
<table id="outside">
<tr><td id="t1">one</td></tr>
<tr><td id="t2">two</td></tr>
</table>
<button id="myButton">Click Me!</button>
When I run on codepen it works fine.
But when I try to run these locally, with a server.js like this
console.log('Server-side code running');
const express = require('express');
const app = express();
// serve files from the public directory
app.use(express.static('public'));
// start the express web server listening on 8080
app.listen(8080, () => {
console.log('listening on 8080');
});
// serve the homepage
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
and I change the html into having a script calling the client.js
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example-1</title>
</head>
<body>
<button id="myButton">Click me!</button>
<table id="outside">
<tr><td id="t1">one</td></tr>
<tr><td id="t2">two</td></tr>
<script src="client.js"></script>
</table>
</body>
</html>
Then I run node server.js and I type localhost:8080 in my browser, the html file gets displayed but when I click the button, it doesn't cause any number changes.
How can I get these to work for real?
Also, ultimately I want the node.js server side to know a button has been pressed. Maybe print on the node.js console that "a button was pressed", whenever it was done on my browser. How can I achieve that?
What I want is to pass information from client side to server side easily but I am quite confused with how to do that and many people suggest different ways.
Edit:
Aligned file names.
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>
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.
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">