i try to deploy my project on my vps.
This is my server.js
var http = require('http');
var fs = require('fs');
var mime = require('mime');
var filename = "./index.html";
http.createServer(function (req, res) {
fs.readFile(filename, function(err, file) {
if (err) {
res.end("errore ci fu");
}
res.writeHeader(200, { "Content-Type": require('mime').lookup(filename) });
res.write(file, 'binary');
res.end();
});
}).listen(5000);
console.log('Server running at http://127.0.0.1:5000/');
and this is my structure:
this is the html file:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS User Registration and Login Example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link href="app-content/app.css" rel="stylesheet" />
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<div ng-class="{ 'alert': flash, 'alert-success': flash.type === 'success', 'alert-danger': flash.type === 'error' }" ng-if="flash" ng-bind="flash.message"></div>
<div ng-view></div>
</div>
</div>
</div>
<div class="credits text-center">
<p>
AngularJS User Registration and Login Example
</p>
<p>
JasonWatmore.com
</p>
</div>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//code.angularjs.org/1.2.20/angular.js"></script>
<script src="//code.angularjs.org/1.2.20/angular-route.js"></script>
<script src="//code.angularjs.org/1.2.13/angular-cookies.js"></script>
<script src="app.js"></script>
<script src="app-services/authentication.service.js"></script>
<script src="app-services/flash.service.js"></script>
<script src="app-services/user.service.local-storage.js"></script>
<script src="home/home.controller.js"></script>
<script src="login/login.controller.js"></script>
<script src="register/register.controller.js"></script>
</body>
</html>
When I try tu run application e I on my browser type the right address, the responce is an error because it deasn't download tha angular js and maybe also other dependencies.
this is the result on my browser:
Why it doesn't download the dependencies?????
I ask for your help!!
Thanks
Related
i am using atom ide for running the following angular code
<!DOCTYPE html>
<html ng-app="home">
<head>
<title></title>
<meta charset="utf-8" />
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js">
</script>
<script src ="/controller/sample.js"></script>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body class="container" ng-controller="designController">
<br/>
<br />
<br />
<div class="row" style="background-color:purple;">
<font color="white">ellucian University</font>
</div>
<br/>
<br/>
</body>
</html>
i have another controller sample.js
angular.module('home',[]).controller('designController',function($scope){
$scope.message = "hii";
});
and i have another app.js file to run the server
var express = require('express');
var path = require("path");
var app= express();
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'));
});
app.listen(3000);
console.log('you are listening to a port 3000');
whenever i run my app.js file i am getting an index.html page but angular is not working in index.html file i am new to nodejs so please help me out. Thanks in advance
I'm trying clone this example in my source but not working. All external links is added.
My HTML source:
<!DOCTYPE HTML>
<html>
<head>
<title>TEST</title>
</head>
<body ng-app="myApp">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/brinley/jSignature/master/libs/jSignature.min.js"></script>
<script src="app.js"></script>
<div id="wrapper">
<div ng-controller="SignatureController">
<div>items length: {{items.length}}</div>
<img ng-src="{{hash}}" alt="signature image" />
<j-signature-directive sig="customSignature" save="testAction" bg-color="#00f" color="#ffcc00"></j-signature-directive>
</div>
<div id="tabs">
<div class="tCont result active" id="result"></div>
<script type="text/javascript">
window.addEventListener('load', function () {
if (typeof (EmbedManager) === undefined) {
EmbedManager.loadResult();
}
}, false);
</script>
</div>
</div>
</body>
</html>
In app.js file is all from javascript from above link.
Be sure to place all your code in JS file inside
$(document).ready( function() { ... });
I'm following this tutorial.
But seems like jquery or angular or boostrap.min.js does not load properly. The file location is correct but still it shows me
Uncaught SyntaxError: Unexpected token <
for all the js files I've included in main.html
Here's my main.html
<html ng-app='ContactsApp'>
<head>
<title> My first Angular Project </title>
<base href='/'>
<link rel="stylesheet" type="text/css" href="src/boostrap.min.css">
</head>
<body>
<div class = 'container'>
<div class='page-header'>
<h1> Contacts: {{message}}</h1>
</div>
</div>
<script src = 'app/bower_components/jquery/jquery.min.js'></script>
<script src = 'app/bower_components/bootstrap/js/boostrap.min.js'></script>
<script src = 'app/bower_components/angular/angular.min.js'></script>
<script src= 'public/app.js'></script>
</body>
</html>
Here's my app.js
angular.module('ContactsApp', [])
.run(function ($rootScope){
$rootscope.message = "Hello Angular..";
});
Here's my server.js
var express = require('express'),
app = express();
//app object is express application
app
.use(express.static('./public'))
.get('*',function(req,res){
res.sendfile('public/main.html');
})
.listen(3000);
Do you have jQuery, bootstrap, angular files in proper folder as linked in your project? Let us assume you don't and let's try that by linking those files online. Then your main.html would look like:
<html ng-app="ContactsApp">
<head>
<title> My first Angular Project </title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css.map">
</head>
<body>
<div class = 'container'>
<div class='page-header'>
<h1 ng-cloak> Contacts: {{message}}</h1>
</div>
</div>
<script src= 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src= 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js'></script>
<script src= 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js'></script>
<script src= 'public/app.js'></script>
</body>
</html>
And your app.js would look like:
angular.module('ContactsApp', [])
.run(function ($rootScope){
$rootScope.message = "Hello Angular..";
});
The problem with you current app.js is that the 'S' of $rootScope.message is not capitalised.
I hope this helps.
I would double check your paths for the scripts. Based on your express routes, if the js file can't be found it will respond with public/main.html. Then the browser would try to load that as a script, which would give the syntax error about <
I'm trying to make a working example using Firebase to sync data between an Angular app and Polymer on the same file. I'm using the firebase-element from Polymer
Is it possible? I've have both apps in their own sections so Angular doesn't try to hijack Polymer's binding but I'm not getting data on the Polymer side or throwing any useful errors.
Appreciate any attention. Thank you. Here's the Plnkr.
<!DOCTYPE html>
<html>
<head>
<script data-require="polymer#*" data-semver="0.3.4" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
<script data-require="polymer#*" data-semver="0.3.4" src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
<script data-require="angular.js#*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<script data-require="firebase#1.0.x" data-semver="1.0.18" src="https://cdn.firebase.com/js/client/1.0.18/firebase-debug.js"></script>
<script data-require="angularfire#0.8.x" data-semver="0.8.0" src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.js"></script>
<script data-require="firebase-simple-login#1.6.x" data-semver="1.6.2" src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="import" href="firebase-element.html" />
</head>
<body>
<section ng-app="component-angular">
<div ng-controller="MainCtrl">
<h2>Data in Angular</h2>
{{data}}
<h3>
<input ng-model="new.data" placeholder="" />
<button ng-click="addData(new.data)">Add New Data</button>
</h3>
</div>
</section>
<section>
<div>
<firebase-element id="base" location="https://tezt.firebaseio.com/web-components" data="{{data}}" keys="{{keys}}"></firebase-element>
<h3>My Firebase Data</h3>
<template repeat="{{key in keys}}">
<p>{{key}}: {{data[key]}}</p>
</template>
</div>
</section>
<script>
var app = angular.module('component-angular', ['firebase'])
.controller('MainCtrl', function($scope, $firebase, Firebase){
var fb = new Firebase("https://tezt.firebaseio.com/web-components");
var fbSync = $firebase(fb);
$scope.data = fbSync.$asObject();
$scope.addData = function(newData){
fbSync.$push(newData);
}
});
</script>
</body>
</html>
I want in angularJS store oder preload the admin(id, password) by start from a json in localstorage, but angularJS return always error. the init function I have written through a ng-controller="initAdminController" in a div.
I want to know, where is the error exactly, in script.js or in index.html and how can i fix it.
skript.js:
var app = angular.module('store', []);
app.controller('initAdminController', function($userFactory){
admin.id=0;
admin.name="admin";
admin.password="admin";
userFactory.put(admin);
});
app.factory('userFactory', function(){
return{
get: function (userinfo) {
return JSON.parse(localStorage.getItem(userinfo) || '[]');
},
put: function(userinfo){
console('adminInit wird aufgerufen');
localStorage.setItem('user' + userinfo.id, JSON.stringify(userinfo));
}
};
});
and the index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular Project</title>
<link rel="stylesheet" href="css/vendor/jquery.mobile-1.4.3.css">
<link rel="stylesheet" href="css/vendor/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/vendor/mobile-angular-ui-base.css" />
<link rel="stylesheet" href="css/vendor/mobile-angular-ui-hover.css" />
<link rel="stylesheet" href="css/vendor/mobile-angular-ui-desktop.css" />
<script type="text/javascript" src="js/vendor/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="js/vendor/jquery.mobile-1.4.3.js"></script>
</head>
<body ng-app="store" >
<div id="pageContent" data-role="page" >
<div data-role="header" class="site-header" >
<h1>logIn</h1>
</div>
<p>Willkommen: <span>{{user.name}}</span> </p>
<div data-role="content" id="content">
<form method="get" role="form" name="Loginform">
<div data-role="fieldcontain">
<input type="text" name="userID" ng-model='user.name' required placeholder="user ID">
<input type="password" name="password" ng-model="user.password" required placeholder="password">
</div>
<input type="submit" ng-disabled="Loginform.$invalid" value="submit" ng-click:login() />
</form>
</div>
<div data-role="footer" id="footer" class="site-footer">
<h1>footer</h1>
</div>
</div>
<div ng-controller="initAdminController"></div>
<!-- load the libs -->
<script type="text/javascript" src="js/vendor/angular-resource.js"></script>
<script type="text/javascript" src="js/vendor/angular-route.js"></script>
<script type="text/javascript" src="js/vendor/angular-touch.js"></script>
<script type="text/javascript" src="js/vendor/angular-animate.js"></script>
<script type="text/javascript" src="js/vendor/angular-loader.js"></script>
<script type="text/javascript" src="js/vendor/angular.js"></script>
<script type="text/javascript" src="js/controllers/controller.js"></script>
<script type="text/javascript" src="js/directives/directive.js"></script>
<script type="text/javascript" src="js/filters/filter.js"></script>
<script type="text/javascript" src="js/services/service.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
and the error:
Error: [$injector:unpr] Unknown provider: $userFactoryProvider <- $userFactory ........
It's a small issue of you using "$userFactory" instead of using "userFactory" to inject.
I think you need to inject your userFactory into the controller:
app.controller('initAdminController', ['userFactory', function(userFactory){ ... }]);
Please note that $ sign is reserved for angularjs properties and such. The $$ is reserverd for private properties in angularjs that you should not use.