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
Related
I want to download a file using angular js...
I got one link
[It has code for downloading a file using Plunker][1[1]: Download a file with AngularJS
angularjs/28873580#comment46050222_28873580
when i am trying to download it it says server not found...so i provided another link to download it, then it says download failed..no file there but file is there..
what i am doing wrong!!!!! controller
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.fileHref = 'http://en.unesco.org/inclusivepolicylab/sites/default/files/dummy-pdf_2.pdf';
});
front view
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x"
src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14">
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<a ng-href="fileHref" download="yourFilename">Download</a>
</body>
</html>
this simplest angular page may help you,
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="test" ng-controller="myCtrl">
<a ng-href="{{fileHref}}" >My PDF</a>
<script>
angular.module('test',[]).controller('myCtrl', function($scope) {
$scope.fileHref = 'https://en.unesco.org/inclusivepolicylab/sites/default/files/dummy-pdf_2.pdf';
});
</script>
</body>
</html>
//Create the module and controller for our file
var app = angular.module("demoApp",[]);
app.controller("myController", function($scope){
$scope.message = "Hello Angularj";
});
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<script src="lib/angular.min.js"></script>
<script src="homeData.js"></script>
</head>
<body ng-contoller="myController">
<div>
welcome {{message}}
</div>
</body>
</html>
FQF
Helo to all,
I have to setup the AngularJs with ecllipse neon but after load the index.html file it got error in the "angular.min.js" and i have already include the library into the index.html file after hover the error it will show(Multiple markers at this line
). please tell me how to fix this?
My index.html file content.
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="homeData.js"></script>
</head>
<body ng-contoller="myController">
<div>
welcome {{message}}
</div>
</body>
</html>
home.Data.js file's content.
var app = angular.module("demoApp",[]);
app.controller("myController", function($scope){
$scope.message = "Hello Angularj";
});
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
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>