I want to dynamically load templateUrl in angularjs directive without ng-include.
You can try AngularJS $http
http://www.w3schools.com/angular/angular_http.asp
<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm")
.then(function(response) {
$scope.myWelcome = response.data;
});
});
</script>
Related
I am trying to use socket.io for handling requests between html page and http server I got Cannot POST / [HTTP/1.1 404 Not Found 1ms]
the server code:
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
console.log(__dirname);
app.use(express.static(__dirname+'/public'));
app.get('/', function(req, res){
res.sendfile(__dirname+'/public/registration.html');
});
io.on('connection', function(socket){
socket.on('registration',function(msg){
console.log('user data'+ msg);
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
html page like the following
<html>
<head>
<script src="https://cdn.socket.io/socket.io-1.3.4.js">
var socket = io('http://localhost');
console.log(socket);
socket.emit('registration',"test");
</script>
</head>
<body>
Install node,
Create a folder for your app,
Create package.json file:
{
"name": "socket.io-test",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node server"
},
"dependencies": {
"express": "~4.13.1",
"socket.io": "^1.4.6"
}
}
Run npm install,
Create server.js - your original code pasted here:
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
console.log(__dirname);
app.use(express.static(__dirname+'/public'));
app.get('/', function(req, res){
res.sendfile(__dirname+'/public/registration.html');
});
io.on('connection', function(socket){
socket.on('registration',function(msg){
console.log('user data'+ msg);
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
Create the /public folder in your working directory,
Create /public/registration.html file:
<html>
<head>
<script src='/socket.io/socket.io.js'></script>
<script>
var socket = io('http://localhost:3000');
socket.on('connect', function() {
socket.emit('registration',"test");
document.getElementById('socket').innerHTML='connected';
});
</script>
</head>
<body>
<h1>Testing socket.io with nodejs</h1>
<h3 id="socket"></h3>
</body>
</html>
Start the server with node server or npm start,
Go to localhost:3000 in your browser
It will work
I am new to angular, and stuck with nested angular controllers. I have kept all the controllers in separate .js files.
The main controller on my problem (html)page must nest another controller 'UploadController' to upload images.
I don't want to keep the main controller and UploadController in same file because the Uploadcontroller will be used at other pages also.
// app.js
(function () {
'use strict';
angular.module('myApp', []);
})();
// MainController.js
(function () {
'use strict';
var app = angular.module('myApp', []);
app.controller('MainController', ['$scope', '$http', function ($scope,$http)
{
// my code
}]);
}());
// UploadController.js
(function () {
'use strict';
var app = angular.module('myApp', ["ngMessages"]);
app.controller('EditController', ['$scope', '$http', function ($scope,$http)
{
// Code
}]);
}());
// page.html
<title>
<script src="/cdn/scripts/angular/app.js"></script>
<script src="/cdn/scripts/angular/controller/maincontroller.js"></script>
<script src="/cdn/scripts/angular/controller/uploadcontroller.js"></script>
</title
<body>
<div ng-app="myApp">
<div ng-controller="MainController">
<div ng-controller="UploadController">
</div>
</div>
</div>
</body>
This is the error I am getting while running the Code.
Argument 'MainController' is not a function, got undefined
Thanks.
You should define your app dependencies only once since you are not using any sub-modules.
This is what should be done:
app.js
(function () {
'use strict';
angular.module('myApp', ['ngMessages']);
})();
Main Controller
(function () {
'use strict';
var app = angular.module('myApp');
app.controller('MainController', ['$scope', '$http', function ($scope,$http)
{
// my code
}]);
}());
Upload controller
(function () {
'use strict';
var app = angular.module('myApp');
app.controller('EditController', ['$scope', '$http', function ($scope,$http)
{
// Code
}]);
}());
Try this,
(function() {
'use strict';
angular.module('myApp', []);
})();
(function() {
'use strict';
angular.module('myApp').controller('MainController', ['$scope', '$http', function($scope, $http) {
// my code
$scope.name = "main controller";
}]);
}());
(function() {
'use strict';
angular.module('myApp').controller('EditController', ['$scope', '$http', function($scope, $http) {
// Code
$scope.name = "edit controller";
}]);
}());
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js#1.4.x"></script>
<body ng-app="myApp" >
<div ng-controller="MainController">
<p>Hello {{name}}!</p>
</div>
<div ng-controller="EditController">
<p>Hello {{name}}!</p>
</div>
</body>
I removed the [] in UploadController and it worked.
Thanks all for answering.
I tried some code in tutorialpoint and other sites. while clicking upload button it's not storing to my local folder named fileUpload
js file:
var myApp = angular.module('myApp', []);
myApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(file, uploadUrl){
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});
}
}]);
myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
$scope.uploadFile = function(){
var file = $scope.myFile;
console.log('file is ' );
console.dir(file);
var uploadUrl = "/fileUpload";//created local folder named as fileUpload in same path where this files or found.
fileUpload.uploadFileToUrl(file, uploadUrl);
};
}]);
html file :
<html>
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="upload.js"></script>
</head>
<body ng-app = "myApp">
<div ng-controller = "myCtrl">
<input type = "file" file-model = "myFile"/>
<button ng-click = "uploadFile()">upload me</button>
</div>
please help me to solve this issue.
Using Meteor 0.8.2 and Google Maps API version 3.0
HTML Doc: (I omitted my google maps key but I have a valid one)
<head>
<title>myapp</title>
<script src="http://maps.googleapis.com/maps/api/js?key=####&sensor=false">
type="text/javascript">
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
</template>
js doc:
if (Meteor.isClient) {
Template.hello.greeting = function () {
return "Welcome to myapp.";
};
Template.hello.events({
'click input': function () {
// template data, if any, is available in 'this'
if (typeof console !== 'undefined')
console.log("You pressed the button");
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
I have taken the boilerplate code largely from resources that I have found online. Most of these resources are about a year old, so I am wondering if there may be compatibility issues between versions of the software.
I am wondering how to load the map working with the code above.
Add the html element to the hello template:
<div id="map-canvas" style="height: 300px; width: 300px"></div>
Add the normal maps loader to the rendered callback:
Template.hello.rendered = function () {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
};
This same code would have worked as far back as Meteor had the rendered callback, so nothing has changed.
All of the code is readily available on the Google Maps API page and there are already a few questions on this topic, including meteor specific ones.
I am trying to display a successful message once the form gets sent:
$('emeraldForm').addEvent('submit', function(){
onSuccess: function(){
alert('df');
}
});