ng-route not displaying templateurl instead displaying json data from node server - javascript

I'm working on freecodecamp voting app (https://www.freecodecamp.com/challenges/build-a-voting-app) using MEAN stack. I've completed back end part(does not include user authentication as of now).
Currently i'm focusing on front end part. I've created a html page which displays the list of all the polls. Now ideally speaking, when i click on a particular poll, i should be redirected to a template html which displays the options as well as the vote count for each option. For this purpose i've used ng-route library. But instead of getting the html page, i'm getting json array from node server.
Here are my code snippets:
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/routes.js"></script>
<script type="text/javascript" src="js/controllers/poll-read-controller.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body class="background" ng-app="votingApp">
<!-- div for button group><!-->
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default" id="home">Home</button>
<button type="button" class="btn btn-default" id="login">Log In</button>
</div>
<!-- div for header><!-->
<div class='header'>FreeCodeCamp Voting App</div>
<!-- div for voting list><!-->
<div ng-controller="VotingListController as v">
<ul class='list'>
<li class='question row' ng-repeat='poll in v.polls'><a ng-href='/{{poll.question}}'>{{poll.question}}</a></li>
</ul>
</div>
<poll_view></poll_view>
</body>
</html>
app.js
(function(){
// Declare app level module which depends on views, and components
var ang = angular.module('votingApp', ['ngRoute']);
ang.controller("VotingListController",['$scope','$http','$location',function($scope,$http,$location){
var list = this;
$http.get('https://fcc-voting-app-ajinkya009.c9users.io/list').success(function(data){
list.polls=data;
});
}]);
})();
routes.js
(function(){
// Declare app level module which depends on views, and components
var ang = angular.module('votingApp')
.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/:question',{
templateUrl:'/../template/poll_view.html',
controller:'pollReadController',
controllerAs:'pollRead'
});
}]);
})();
poll-read-controller.js
(function(){
angular.module('votingApp')
.controller('pollReadController',function($http,$routeParams){
var controller = this;
$http.get('https://fcc-voting-app-ajinkya009.c9users.io/'+$routeParams.question).success(function(data){
controller.vote = data;
});
});
})();
poll_view.html
<div ng-repeat="vote in pollRead.vote">
<ol>
<li>
<p>Option:{{vote.option}}</p>
<p>Count:{{vote.count}}</p>
</li>
</ol>
</div>
and here's a sample json data I'm getting instead of html page:
[
{
_id: "57d90d6bbb1828e112ff70dc",
question: "google or yahoo",
__v: 0,
vote: [
{
option: "google",
count: 2,
_id: "57d90d6bbb1828e112ff70de"
},
{
option: "yahoo",
count: 0,
_id: "57d90d6bbb1828e112ff70dd"
}
]
}
]
server/index.js
var express = require('express');
var path = require('path');
var bodyParser = require("body-parser");
var app = express();
var mongoose = require('mongoose');
var polls = require('./models/poll');
var methodOverride = require('method-override');
var port = 8080;
var ip = process.env.IP;
var db = mongoose.connect('mongodb://localhost/meanapp');
var poll = db.model('poll',polls);
mongoose.connection.once('open', function() {
console.log('Listening on port: '+ port);
app.use(express.static(path.join(__dirname + "/../client")));
app.use(bodyParser.json());
app.set('view engine','html');
//app.use(express.logger('dev'));
//app.use(express.methodOverride());
//app.use(app.router);
// Add Middleware necessary for REST API's
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(methodOverride('X-HTTP-Method-Override'));
// CORS Support
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});
app.get('/list',function(req,res){
console.log('received')
poll.find({},function(err,list){
if(err)throw err;
res.json(list);
});
});
app.get('/:question',function(req,res){
poll.find({question: req.params.question},function(err,data){
if(err)throw err;
res.json(data);
});
});
app.post('/question',function(req,res){
var p = new poll({question:req.body.question,vote:req.body.vote});
p.save(function(error){
if(error){
throw error;
}
res.json(p);
});
});
app.put('/:question',function(req,res){
poll.update(
{
"question": req.params.question,
"vote.option":req.body.option
},
{$inc:{"vote.$.count":1}},
function(error){
if(error)throw error;
}
);
res.json(poll);
});
app.put('/question/update/:id',function(req,res){
poll.update(
{"_id":req.params.id},
{"$set":{"question":req.body.question,"vote":req.body.vote}},
function(error){
if(error)throw error;
}
);
});
app.listen(port);
});
Here's link to my project: https://ide.c9.io/ajinkya009/fcc_voting_app
P.S. I'm learning MEAN stack since two months(quite beginner), so if you find any mistake in the code,no matter how trivial, please let me know.


Finally solved it!! I had not added 'fragment identifier' (#) in the anchor href link in index.html. Along with this, I had to tweak some of the other code as well.
Here is the updated and working code:
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/routes.js"></script>
<script type="text/javascript" src="js/controllers/poll-read-controller.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body class="background" ng-app="votingApp">
<!-- div for button group><!-->
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default" id="home">Home</button>
<button type="button" class="btn btn-default" id="login">Log In</button>
</div>
<!-- div for header><!-->
<div class='header'>FreeCodeCamp Voting App</div>
<!-- div for voting list><!-->
<div ng-controller="VotingListController as v">
<ul class='list'>
<li class='question row' ng-repeat='poll in v.polls'><a ng-href='#/list/{{poll.question}}'>{{poll.question}}</a></li>
</ul>
</div>
<div class='container' ng-view></div>
</body>
</html>
client/app.js
(function(){
// Declare app level module which depends on views, and components
var ang = angular.module('votingApp', ['ngRoute']);
ang.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
$routeProvider
.when('/list/:question',{
templateUrl:'/../template/poll_view.html',
controller:'pollReadController',
controllerAs:'pollRead'
});
//$locationProvider.html5Mode(true);
}]);
ang.controller("VotingListController",['$scope','$http','$location',function($scope,$http,$location){
var list = this;
$http.get('https://fcc-voting-app-ajinkya009.c9users.io/list').success(function(data){
list.polls=data;
});
}]);
ang.controller('pollReadController',function($scope,$http,$routeParams){
var list = this;
alert($routeParams.question);
$http.get('/list/'+$routeParams.question).success(function(data){
list.polls = data;
})
.error(function(){
alert("An unexpected error occured!");
});
});
})();
client/poll_view.html
<div class='container' ng-repeat="poll in pollRead.polls">
<h2>{{poll.question}}</h2>
<div ng-repeat = "v in poll.vote">
<ul>
<li>
<p>Option:{{v.option}}</p>
<p>Count:{{v.count}}</p>
</li>
</ul>
</div>
</div>
server/index.js
var express = require('express');
var path = require('path');
var bodyParser = require("body-parser");
var app = express();
var mongoose = require('mongoose');
var polls = require('./models/poll');
var methodOverride = require('method-override');
var port = 8080;
var ip = process.env.IP;
var db = mongoose.connect('mongodb://localhost/meanapp');
var poll = db.model('poll',polls);
mongoose.connection.once('open', function() {
console.log('Listening on port: '+ port);
app.use(express.static(path.join(__dirname + "/../client")));
app.use(bodyParser.json());
app.set('view engine','html');
//app.use(express.logger('dev'));
//app.use(express.methodOverride());
//app.use(app.router);
// Add Middleware necessary for REST API's
//app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
//app.use(methodOverride('X-HTTP-Method-Override'));
// CORS Support
/*app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});*/
app.get('/list',function(req,res){
console.log('received');
poll.find({},function(err,list){
if(err)throw err;
res.json(list);
});
});
app.get('/list/:question',function(req,res){
poll.find({question: req.params.question},function(err,data){
if(err)throw err;
res.json(data);
});
});
app.post('/question',function(req,res){
console.log(req.body);
console.log(req.body.vote);
//res.json({success:"200"});
var o = req.body.option;
var c = req.body.count;
/*var p = new poll(
{question:req.body.question,vote:{option,count}}
);*/
var p = new poll({question:req.body.question,vote:req.body.vote});
p.save(function(error){
if(error){
throw error;
}
res.json(p);
});
});
app.put('/:question',function(req,res){
poll.update(
{
"question": req.params.question,
"vote.option":req.body.option
},
{$inc:{"vote.$.count":1}},
function(error){
if(error)throw error;
}
);
res.json(poll);
});
app.put('/question/update/:id',function(req,res){
console.log(req.params.id);
console.log(req.body);
poll.update(
{"_id":req.params.id},
{"$set":{"question":req.body.question,"vote":req.body.vote}},
function(error){
if(error)throw error;
}
);
});
app.listen(port);
});

Related

Cannot post form data via HTML/JavaScript/Express Node app

I'm trying to build an app that lets me enter in information about an event and then have that pinned on a map. I'm stuck at the beginning though on actually saving the information. When I use Inspect in Chrome, it tells me it posted, but the data is blank. I'm pretty new to this kind of stuff and not sure where I'm going wrong.
The first file is the app.js where I set up the database, a simple partial schema, etc.
The second file is my dashboard.html that displays the map and the form. I was trying the onsubmit/javascript stuff which displays the data without refreshing the page, but ideally I want to be able to refresh the page and have the data still be posted somewhere.
Any help would be greatly appreciated! Thanks! :)
require('dotenv').config({ silent: false }); // Retrieve .env contents
var http = require('http'); // Basic HTTP functionality
var path = require('path'); // Parse directory paths
var express = require('express'); // Provide static routing to pages
var app = express();
var Router = require('router')
var router = Router()
var server = http.Server(app);
var port = 8080;
var app = setupExpress();
// Import mongoose module and connect the database
var mongoose = require('mongoose');
var mongoDB = 'mongodb://Username:Password#ds159180.mlab.com:59180/app-database';
mongoose.connect(mongoDB);
//Get the default connection
var db = mongoose.connection;
// Start server on port 8080
// localhost:8080
server.listen(port);
//Bind connection to error event (to get notification of connection errors)
db.on('error', console.error.bind(console, 'MongoDB connection error:'));
//Define a schema
var Schema = mongoose.Schema;
var EventSchema = new Schema({
eventName : String,
eventType : String
});
var Event = mongoose.model('Event', EventSchema);
app.post('/dashboard', function(req, res) {
res.json(req.body); // req.body is your form data
});
app.post('/dashboard', function(req,res){
var content = new Event({
eventName : req.body.eventName,
eventType : req.body.eventType
}).save(function(err,doc){
if(err){
return handleError(err);
} else {
console.log('your form has been saved');
}
})
});
function setupExpress()
{
// Set default path for views and public
var viewsDir = path.join(__dirname, 'views');
var publicDir = path.join(__dirname, 'public');
app.use(express.static(publicDir));
// Root page is login form
app.get('/', function(req, res)
{
res.sendFile('views/index.html', { root: '.' });
});
// Once logged in, home page is dashboard
app.get('/dashboard', function(req, res)
{
res.sendFile('views/dashboard.html', { root: '.' });
});
// Redirect to error page if there's an issue
app.use(function(err, req, res, next)
{
console.log(err.stack);
res.status(err.status || 500);
res.sendFile('/views/error.html', { root: '.' });
});
return app;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Web browser tab title -->
<title>App</title>
<!-- Bootstrap Core CSS -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="../vendor/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://www.your-domain.com/easy-comment/jquery.easy-comment.min.js"></script>
<title>App Tester</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="page-wrapper">
<div class="row">
<div class="col-lg-8" style="margin-top: 30px">
<div class="panel panel-default">
<div class="panel-heading text-center">
<i class="fa fa-map-marker fa-3x"> Add Event</i>
</div>
<div class="panel-body">
<div class="col-lg-6">
<form id="eventForm" method="post" onsubmit="return false">
<div class="form-group">
<label for="eventName">Event Name</label>
<input type="text" class="form-control" id="eventName" placeholder="Event name">
</div>
<div class="form-group">
<label for="eventType">Type</label>
<select class="form-control" id="eventType">
<option>Study Group</option>
<option>Food</option>
<option>Meeting</option>
<option>Danger</option>
</select>
</div>
<div class="form-group">
<label for="eventLocation">Location</label>
<select class="form-control" id="eventLocation">
<option>Location 1</option>
<option>Location 2</option>
<option>Location 3</option>
</select>
</div>
<div class="form-group">
<label for="eventNotes">Event Notes</label>
<textarea class="form-control" id="eventNotes" rows="2" placeholder="Add details about your event"></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<div id="confirm"><div>
<script type="text/javascript">
var txt = document.getElementById("eventName");
document.getElementById("eventForm").addEventListener("submit", confirmdata);
function confirmdata(event) {
event.preventDefault();
var eventName = txt.value;
document.getElementById("confirm").innerHTML += '<p>Name: ' + eventName + '</p>';
}
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

You should use body-parser to change your data post from client to json
var bodyParser = require('body-parser')
app.use(bodyParser.json())
You can get json data via req.body

Angularjs + Ckeditor: Error: $injector:modulerr Module Error

I'm new to Angularjs and I'm currently try to use Ckeditor in my webapp.
I'm currently getting
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=editor&p1=Error%3A%…Flocalhost%3A3000%2Fbower_components%2Fangular%2Fangular.min.js%3A20%3A390)
Any idea of what I did wrong?
In my Editor.html
<!DOCTYPE html>
<html lang="en" ng-app="editor">
<head>
<meta charset="UTF-8">
<title>Editor Test</title>
<script src="../bower_components/angular/angular.min.js"</script>
<script src="../bower_components/ckeditor/ckeditor.js"</script>
<script src="../angular-ckeditor/angular-ckeditor.min.js"</script>
<link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../bootstrap-select-1.11.2-dist/css/bootstrap-select.css">
<link rel="stylesheet" href="../css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div ng-controller="CkeditorController">
<div ckeditor="options" ng-model="textdata" ready="onReady"></div>
<br>
<div style="text-align: center">
note content: {{1+1}}
<button ng-click="getTextData() id="profile-button" class="btn btn-lg btn-primary" type="submit">Submit</button>
</div>
</div>
<script scr="../angular/editor.js"></script>
</body>
</html>
In my javascript: editor.js
angular.module('editor', ['ckeditor'])
.controller('CkeditorController', function ($scope) {
$scope.textdata = '';
// you can set your configuration here
$scope.options = {
language: 'en',
allowedContent: true,
entities: false
};
$scope.onReady = function () {
//write you code here if you have to do something after editor is loaded
};
// logging ckeditor textarea content in console
$scope.getTextData = function() {
console.log($scope.textdata);
}
});
In my controller:main.js
module.exports.index=function(req, res, next) {
res.render('index', { title: 'Hello world' });
};
module.exports.dashboard=function(req, res, next) {
res.render('dashboard', {});
};
module.exports.editor=function(req, res, next) {
res.render('editor', {});
};
Thanks!

></script> is missing on your angular imports.

Why do I get undefined for response.name?

I have looked through all the related StackOverflow pages and nothing seemed to work for my situation. I tried to console.log(response) and it just said Object Object. I am unclear why I am getting "Welcome undefined" on my app when I was getting "Welcome " before.
app/facebook/facebook.js:
'use strict';
angular.module('ngSocial.facebook', ['ngRoute', 'ngFacebook'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/facebook', {
templateUrl: 'facebook/facebook.html',
controller: 'FacebookCtrl'
});
}])
.config( function( $facebookProvider ) {
$facebookProvider.setAppId('1410425285653598');
$facebookProvider.setPermissions("email, public_profile, user_posts, publish_actions, user_photos");
})
.run(function($rootScope){
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
})
.controller('FacebookCtrl', ['$scope', '$facebook', function($scope, $facebook) {
$scope.isLoggedIn = false;
$scope.login = function(){
$facebook.login().then(function(){
$scope.isLoggedIn = true;
refresh();
});
}
$scope.logout = function(){
$facebook.logout().then(function(){
$scope.isLoggedIn = false;
refresh();
});
}
function refresh(){
$facebook.api("/me",{fields:'last_name, first_name, email, gender, locale, link'}).then(function(response){
$scope.welcomeMsg = "Welcome "+ response.name;
$scope.isLoggedIn = true;
$scope.userInfo = response;
$facebook.api('/me/picture').then(function(response){
$scope.picture = response.data.url;
$facebook.api('/me/permissions').then(function(response){
$scope.permissions = response.data;
$facebook.api('/me/posts').then(function(response){
$scope.posts = response.data;
});
});
});
},
function(err){
$scope.welcomeMsg = "Please Log In";
});
}
$scope.postStatus = function(){
var body = this.body;
$facebook.api('/me/feed', 'post', {message: body}).then(function(response){
$scope.msg = 'Thanks for Posting';
refresh();
});
}
refresh();
}]);
app/facebook/facebook.html:
<div class="row" ng-controller="FacebookCtrl">
<div class="col-md-4">
<h4>{{welcomeMsg}}</h4>
<div ng-if="isLoggedIn == true">
<img ng-src="{{picture}}">
</div>
<br>
<div ng-if="isLoggedIn == false">
<button type="button" class="btn btn-default" ng-click="login()">Login</button>
</div>
<div ng-if="isLoggedIn == true">
<button type="button" class="btn btn-default" ng-click="logout()">Logout</button>
</div>
<br><br>
<div ng-if="isLoggedIn == true" class="well">
<h4>User Info</h4>
<ul>
<li>ID: {{userInfo.id}}</li>
<li>First Name: {{userInfo.first_name}}</li>
<li>Last Name: {{userInfo.last_name}}</li>
<li>Email: {{userInfo.email}}</li>
<li>Gender: {{userInfo.gender}}</li>
<li>Locale: {{userInfo.locale}}</li>
</ul>
</div>
<br>
<div class="well" ng-if="isLoggedIn == true">
<h4>Permissions</h4>
<ul>
<li ng-repeat="permission in permissions">{{permission.permission}} - {{permission.status}}</li>
</ul>
</div>
</div>
<div class="col-md-8">
<h3>Welcome to Facebook!</h3>
<div ng-if="isLoggedIn == true">
<form ng-submit="postStatus()">
<div class="form-group">
<label>Status Update</label>
<textarea ng-model="body" class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<br><br>
<div ng-repeat="post in posts" class="stbody">
<div class="stimg">
<img ng-src="{{picture}}">
</div>
<div class="sttext">{{post.message}}<div class="sttime">{{post.updated_time}}</div>
</div>
</div>
</div>
<div ng-if="isLoggedIn == false">
<p>You need to log in to post</p>
</div>
</div>
app/index.html:
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="ngSocial" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="ngSocial" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="ngSocial" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="ngSocial" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>NgSocial App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ngSocial</a>
</div>
</div>
</nav>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="container">
<div ng-view></div>
<div class="row">
</div>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/ng-facebook/ngFacebook.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="facebook/facebook.js"></script>
</body>
</html>

Your problem is this line in the facebook.api call.
$scope.welcomeMsg = "Welcome "+ response.name;
If I had to guess from looking at the code (not familiar with the facebook api), it appears as if you're asking facebook for first_name and last_name, not name. So I suspect the line of code your looking for is
$scope.welcomeMsg = "Welcome "+ response.first_name + " " + response.last_name;

It depends how the ngFacebook API returns the response object, but my money is on that it is wrapped in a data property. Try response.data.name instead.
(You can also expand the response object after console logging it in any competent dev tools, like Chrome, and looks at its properties manually.)

how can i use html5 and jquery in node.js

I want to use my original html in node.js
This is simple hsh.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> How to Say Hello </title>
<link type="text/css" href="./sys/lib/css/uniform.default.css" rel="stylesheet" media="screen" />
<link type="text/css" href="./sys/lib/css/jquery-ui.1.10.3.smoothness.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="./sys/lib/scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./sys/lib/scripts/jquery-ui.1.10.3.min.js"></script>
<script type="text/javascript" src="./sys/lib/scripts/myhello.js"></script>
<script>
$(function(){
$( "#sayDate" ).datepicker();
});
function resetHello()
{
document.getElementById("hello").value = "";
document.getElementById("sayDate").value = "";
}
</script>
</head>
<body>
<form name="syaHello">
How to say hello in your contry?<br>
<input type="text" id="hello" value="">
<INPUT id=sayDate style="WIDTH: 100px" name=sayTime>
</form>
<div class="docBtn_list">
<input type="button" value="View Hello" onclick="javascript:howHello();" />
<input type="button" value="Reset" onclick="resetHello();" />
</div>
</body>
</html>
myhello.js
function howHello()
{
alert(document.getElementById("hello").value + " " +
document.getElementById("sayDate").value);
}
and nodeSev.js
var http = require('http'),
fs = require('fs');
fs.readFile('./hsh.html', function (err, html) {
if (err) {
throw err;
}
http.createServer(function(request, response) {
response.writeHeader(200, {"Content-Type": "text/html"});
response.write(html);
response.end();
}).listen(3000);
});
But this is not working about jquery and howHello java script.
I don't want change html and js too much and don't use express package.

Before answering your question...
Your question aims at serving static web content.
You should install 'express' (a node module based on famous 'connect', which can be used for this as well but lacks other features) and configure it to serve your file from a static directory:
var express = require('express');
var app = express.createServer();
/* configure your static directory */
app.configure(function(){
app.use(express.static(__dirname + '/static'));
});
/* on request, send index.html */
app.get('/', function(req, res){
res.sendfile(__dirname + '/index.html');
});
app.listen(3000);
Now that you have express installed, take a look at Jade.
You can then process received requests and dynamically serve content. That's state of the art - serving pre-coded html is 90's-style.

Preloading images for cycle BEFORE hiding specific DIV and updating url

I have a project where I want to show a specific div (about the company) while a large fullscreen jQuery cycle is loading. I don't want to show the loading div until the images are loaded. It works well locally, but when I upload it the page shows the about div (#index-about) long enough for the first image to load. If you use the cycle to move to the next slide the next image is not loaded yet. I deduced that it must not be preloading correctly.
Here's my code. Thanks in advance! *EDIT: per request, here's everything. Warning: it's a ton of code. *
THE HTML:
<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>SGC</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css?v=2">
<!-- Lightbox CSS -->
<script src="js/libs/modernizr-1.7.min.js"></script>
<!-- scripts concatenated and minified via ant build script-->
<script src="js/libs/jquery-1.6.2.min.js"></script>
<script src="js/libs/jquery.cycle.all.js"></script>
<script src="js/libs/jquery.mousewheel.min.js"></script>
<script src="js/libs/jquery.easing.1.3.js"></script>
<script src="js/libs/jquery.address-1.4.min.js"></script>
<script src="js/libs/jquery.waitforimages.js"></script>
<script src="js/index2.js"></script>
<script src="js/ajax.js"></script>
</head>
<body>
<div id="container">
<h1><img src="images/SGC_logotype.png" alt="SGC"></h1>
<header>
<div id="nav-pulldown">
</div>
<div class="loading"></div>
<div id="overlay_b1"></div>
<div id="overlay_b2"></div>
<div class="overlay" id="overlay-main">
<ul id="nav-main" style="opacity:0;">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</header>
<div id="main" role="main">
<div id="loading_page" style="display:none; "><img src="images/ajax-loader-gray.gif"/></div>
<div id="main-content">
</div><!-- eo main-content-->
<!-- ABOUT -->
<div class="overlay" id="index-about">
<div id="about-slider-container">
<ul class="about-slider">
<li class="about-statement" id="statement-1">
<h2>What if the medium isn't the entire message?</h2>
<p class="grey quote">"It's ideas that connect with consumers, build brands, and unleash the full potential of communications, both online and off."<br>
<span style="float:right;margin-right:20px;"> — SGC</span></p>
</li>
<!-- eo statement-1-->
</ul>
</div><!-- eo about-slider-container-->
</div>
<!-- / ABOUT -->
</div>
<footer>
</footer>
</div> <!-- eo #container -->
<!--<script>
$('#loading_page').css('margin-top',($(window).height()-64)/2);
</script>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.6.2.min'>\x3C/script>")</script>
-->
<!-- end scripts-->
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script>DD_belatedPNG.fix("img, .png_bg");</script>
<![endif]-->
<!-- Google Analytics
<script>
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script> -->
</body>
</html>
THE JS:
function ClickURLHash(o,i){
var urlHash = o.attr("id");
$.address.value(urlHash);
}
function LoadURLHash(){
var urlHash = location.hash;
urlHash = urlHash.replace(/^#\//,"");
var myHref = $(this).attr('href');
if ((urlHash == "") || (urlHash == "index")){
if ($('#topbluelink').hasClass('active')){ //DROPDOWN ON
$('#overlay-main').animate({top:'100%'},600,'easeOutQuint');
$("#overlay_b2").delay(300).animate({top:'100%'},600,'easeInOutQuint');
$("#overlay_b1").delay(600).animate({top:'100%'},600,'easeInOutQuint',function(){
$('#main-content').fadeTo(600,0,function(){
$('#main-content').load('pages/home.html').animate({opacity:'1'},600),function(){
$.address.value("/");
};
});
$('#topbluelink').removeClass('active');
});
}
else if (!$('#topbluelink').hasClass('active')){ //DROPDOWN OFF
$('#overlay_b2,#overlay_b1').css('top','100%');
$('#overlay-main').animate({top:'100%'},600,'easeOutQuint',function(){
$('#main-content').fadeTo(600,0,function(){
$('#main-content').load('pages/home.html').animate({opacity:'1'},600),function(){
$.address.value("/");
};
});
$('#topbluelink').removeClass('active');
});
}else{
//new code
//$('#loading_page').html('<img src="images/ajax-loader-black.gif"/>').css('display','');
//$('#index-about').show();
var _images = ["images/index/gshock_collage.jpg", "images/index/tryx_collage.jpg", "images/index/mb_collage.jpg", "images/index/lapp_collage.jpg", "images/index/ciroc_collage.jpg", "images/index/empress_collage.jpg", "images/index/wwglass_collage.jpg","images/backgrounds/bg_trans-black90.png","images/nav/nav_gshock-sprite.png","images/nav/nav_pilkingtonplanar-sprite.png"];
var gotime = _images.length;
$.each(_images,function(e) {
$(new Image()).load(function() {
if (--gotime < 1)
{
$('#index-about').fadeOut(300, function(){
$('#loading_page').css('display','none').html('<img src="images/ajax-loader-gray.gif"/>');
$('#main-content').css('opacity','0').load('pages/home.html',function(){
$('#main-content').animate({opacity:'1'},400);
});
});
}
}).attr('src',this);
});
$('#topbluelink').removeClass('active');
$.address.value("/");
}
} else if ((urlHash == "work") || (urlHash == "contact")) {
if ($('#topbluelink').hasClass('active')){
$('#overlay-main').stop().animate({top:'100%'},600,'easeInOutQuint');
$("#overlay_b2").delay(300).animate({top:'100%'},600,'easeInOutQuint');
$("#overlay_b1").delay(600).animate({top:'100%'},600,'easeInOutQuint');
$('#main-content').load('pages/'+urlHash+'.html').css('top','100%')
.animate({top:'0%',opacity:'1'},600,'easeOutQuint',function(){
$('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');
$.address.value("/"+urlHash);
$('#topbluelink').removeClass('active')
});
}
else{
//new cod2e
$('#overlay-main').stop().animate({top:'100%'},600,'easeOutQuint');//change top from -100%
$("#overlay_b2").delay(300).animate({top:'100%'},600,'easeInOutQuint');
$("#overlay_b1").delay(600).animate({top:'100%'},600,'easeInOutQuint');
$('#main-content').delay(600).load('pages/'+urlHash+'.html').css('top','0%')
.animate({top:'0%',opacity:'1'},600,'easeOutQuint',
function (){
$('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');
});
$.address.value("/"+urlHash);
$('#topbluelink').removeClass('active');
}
$('ul#nav-work').animate({opacity:'1'},600,'linear');
$('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');
//KILL INDEX ABOUT
var _images = ["images/index/gshock_collage.jpg", "images/index/tryx_collage.jpg", "images/index/mb_collage.jpg", "images/index/lapp_collage.jpg", "images/index/ciroc_collage.jpg", "images/index/empress_collage.jpg", "images/index/wwglass_collage.jpg","images/backgrounds/bg_trans-black90.png","images/nav/nav_gshock-sprite.png","images/nav/nav_pilkingtonplanar-sprite.png"];
var gotime = _images.length;
$.each(_images,function(e) {
$(new Image()).load(function() {
if (--gotime < 1)
{
$('.overlay#index-about').css('display','none').hide().remove()
$('#loading_page').css('display','none').html('<img src="images/ajax-loader-gray.gif"/>');
$('#main-content').css('opacity','0').load('pages/'+urlHash+'.html',function(){
$('#main-content').animate({opacity:'1'},400);
});
}
}).attr('src',this);
});
} else if (urlHash == "about"){
if ($('#topbluelink').hasClass('active')){
$('#overlay-main').stop().animate({top:'100%'},600,'easeInOutQuint');
$("#overlay_b2").delay(300).animate({top:'100%'},600,'easeInOutQuint');
$("#overlay_b1").delay(600).animate({top:'100%'},600,'easeInOutQuint');
$('#main-content').load('pages/'+urlHash+'.html').css('top','100%')
.animate({top:'0%',opacity:'1'},600,'easeOutQuint',function(){
$('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');
$.address.value("/"+urlHash);
$('#topbluelink').removeClass('active')
});
}
else{
//new cod2e
$('#index-about').hide();
$('#overlay-main').stop().animate({top:'100%'},600,'easeOutQuint');//change top from -100%
$("#overlay_b2").delay(300).animate({top:'100%'},600,'easeInOutQuint');
$("#overlay_b1").delay(600).animate({top:'100%'},600,'easeInOutQuint');
$('#main-content').delay(600).load('pages/'+urlHash+'.html').css('top','0%')
.animate({top:'0%',opacity:'1'},600,'easeOutQuint',
function (){
$('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');
});
$.address.value("/"+urlHash);
$('#topbluelink').removeClass('active');
}
$('ul#nav-work').animate({opacity:'1'},600,'linear');
$('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');
} else {
if ($('#topbluelink').hasClass('active')){
$('#overlay-main').animate({top:'-100%'},600,function(){
$("#overlay_b2").delay(200).animate({top:'-100%'},600,'easeInOutQuint');
$("#overlay_b1").delay(400).animate({top:'-100%'},600,'easeInOutQuint');
$('#main-content').load('pages/'+urlHash+'.html').css('top','100%')
.animate({top:'0%'},600,'easeOutQuint'),function(){$.address.value("/"+urlHash)};
});
$('.overlay').children().animate({opacity:'1'},1000,'easeOutQuint');
$('#topbluelink').removeClass('active');
}
else{
//IF THIS IS A PROJECT PAGE (not #/about, #/work, or #/contact)
$('#index-about').hide();
$("#overlay_b1").animate({top:'0%'},600,'easeInOutQuint');
$("#overlay_b2").delay(400).animate({top:'0%'},600,'easeInOutQuint');
$('#main-content').delay(800).animate({top:'0%'},600,'easeOutQuint', function (){
$('#loading_page').css('display','block');
$('#main-content').load('pages/'+urlHash+'.html', function () {
$('#main-content').waitForImages(function()
{
$('#loading_page').css('display','none');
$("#overlay_b2").animate({top:'100%'},600,'easeInOutQuint');
$("#overlay_b1").delay(400).animate({top:'100%'},600,'easeInOutQuint');
$('#main-content').delay(800).show(600).css('top','-100%').animate({top:'0%'},600,'easeOutQuint',
function (){
slide_top = ($('.detail-slide-content').css('height').replace('px','')-$('.detail-slide-body').css('height').replace('px',''))/2+200;
$(".detail-slide-body").css('top', slide_top+'px');
$('.detail-slide-content').animate({opacity:'1'},1000,'easeOutQuint');
}
//
);
});
});
});
$.address.value("/"+urlHash);
$('#topbluelink').removeClass('active');
}
}
}
$(document).ready(function(){
$.address.externalChange(function(event) {
LoadURLHash();
});
});
$(window).load(function(){
$('#main-content').animate({opacity:'1'},800,'easeInQuint');
});

Have you tried setting the cycle's parent container style to display:none; visiblity:hidden;
And then once the page is loaded, $('div.container').show(); ?
That way, by default the HTML will be hidden and will not render on the screen until the page is loaded.

Categories

Resources