I am using ASP.NET with angular.
In the scripts folder i have 2 files - MoviesAngular.js and ListController.js
MoviesAngular.js
(function ()
{
var app = angular.module("MoviesAngular", []);
}
)
ListController.js
(function () {
var app = angular.module("MoviesAngular",[])
var ListController = function ($scope) {
$scope.message = "Hello World";
};
app.controller("ListController", ListController);
}()
);
In the Index.html i have the following code:
#section scripts {
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Client/Scripts/MoviesAngular.js"></script>
<script src="~/Client/Scripts/ListController.js"></script>
}
<div ng-app="MoviesAngular">
<div ng-controller="ListController">
{{message}}
</div>
</div>
However when i run the application i am not getting the text displayed as "Hello World" Where am i going wrong here.
Edited to include the other scenario where controller and app was defined seperately:(I was getting the error - Error: $injector:nomod
Module Unavailable). Then i modified the code as above.
MoviesAngular.js
(function () {
var app = angular.module("MoviesAngular", []);
}()
);
ListController.js
(function (app) {
var ListController = function ($scope) {
$scope.message = "Hello World";
};
app.controller("ListController", ListController);
}(angular.module("MoviesAngular"))
);
This code works fine: I have tested this
ww.js
(function () {
var app = angular.module("MoviesAngular",[])
var ListController = function ($scope) {
$scope.message = "Hello World";
};
app.controller("ListController", ListController);
}()
);
The view is:
<html>
<head>
<script src="angular.min.js"></script>
<script src="ww.js"></script></head>
<body>
<div ng-app="MoviesAngular">
<div ng-controller="ListController">
{{message}}
</div>
</div>
</body>
</html>
Hope it will help.
I do not find any error in your code. I am just changing the syntax of code. Try this.
(function () {
var app = angular.module("MoviesAngular",[])
app.controller("ListController", function ($scope) {
var ListController = function () {
$scope.message = "Hello World";
};
ListController();
});
}()
);
The IIFE in the MoviesAngular.js file not invoked in your example
(function() {
var app = angular.module("MoviesAngular", []);
}()); // invoke function expression
angular.module with specified second parameter creates new module. In the ListController.js file you need to get already created module, thus remove second parameter from angular.module
(function() {
var app = angular.module("MoviesAngular")
var ListController = function($scope) {
$scope.message = "Hello World";
};
app.controller("ListController", ListController);
}());
Related
I'm facing a problem when the same code at the .cshtml change to .aspx can't run in visual studio. How should I change any format or the coding for the run at .aspx? This a chatroom coding
#section scripts
{
<script src="~/Scripts/jquery.signalR-2.4.0.min.js"></script>
<script type="text/javascript" src="~/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
var $chats = $('#chats'),
chatHub = $.connection.chatHub;
chatHub.client.gotMessage = function (nickname, message) {
$chats.append('<li><span class="label label-primary">' + htmlEncode(nickname)+'</span>' + htmlEncode(message));
$chats.scrollTop($chats.innerHeight());
};
var htmlEncode = function (content) {
return $('<div />').text(content).html();
}
$.connection.hub.start().done(function () {
$("#ctrl button").click(function (evt) {
var $name = $("#nickname"),
name = $name.val(),
$message = $("#message"),
message = $message.val();
chatHub.server.sendMessage(name, message);
$message.val("").focus();
});
});
$(window)
.resize(function () {
var h = Math.max(200, screen.availHeight - $chats.offset().top - 200);
$chats.height(h);
})
.resize();
});
</script>
}
There is no tag called section in ASP.NET webforms. So basically you could just remove the section tag.
In webforms you can use ContentPlaceholders like this, Masterpage:
<asp:ContentPlaceHolder id="scripts" runat="server">
</asp:ContentPlaceHolder>
And in any site using the masterpage:
<asp:Content ID="Content1" ContentPlaceHolderID="scripts" Runat="Server">
<script src="~/Scripts/jquery.signalR-2.4.0.min.js"></script>
<script type="text/javascript" src="~/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
var $chats = $('#chats'),
chatHub = $.connection.chatHub;
chatHub.client.gotMessage = function (nickname, message) {
$chats.append('<li><span class="label label-primary">' + htmlEncode(nickname)+'</span>' + htmlEncode(message));
$chats.scrollTop($chats.innerHeight());
};
var htmlEncode = function (content) {
return $('<div />').text(content).html();
}
$.connection.hub.start().done(function () {
$("#ctrl button").click(function (evt) {
var $name = $("#nickname"),
name = $name.val(),
$message = $("#message"),
message = $message.val();
chatHub.server.sendMessage(name, message);
$message.val("").focus();
});
});
$(window)
.resize(function () {
var h = Math.max(200, screen.availHeight - $chats.offset().top - 200);
$chats.height(h);
})
.resize();
});
</script>
</asp:Content>
I have developed an application, and in this application I want to import file Excel to multiple table in my DB, and since i am a beginner in angularJS and .NET, I work with .net web api and angularjs, and I develop a function, it works when I import the data into a singe table, but the problem how to import the data into 3 table in DB !!! . and the 3 tables are linked to each other (in my exemple code there 2 table Candidature and Candidat). My question is: how to import Excel file to multiple table in DB and thank's. ( i work with asp.net web API and angularJS )
controller.cs:
/////
[Route("api/Candidature/SaveData")]
[HttpPost]
[ResponseType(typeof(Candidat))]
public IHttpActionResult SaveData(List<Candidature> Candidatures, List<Candidat> candidat)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
foreach (var data in Candidatures)
{
db.Candidature.Add(data);
}
db.SaveChanges();
foreach (var data in candidat)
{
db.Candidat.Add(data);
}
db.SaveChanges();
return StatusCode(HttpStatusCode.OK);
////
service.js:
SaveData: {
method: 'POST' ,
url: serviceBase + 'Candidature/SaveData',
isArray: true,
headers: {
'Content-Type' : 'application/json'
}
},
CandidatureCtrl.js :
$scope.Importation = function (data) {
$scope.SelectedFileForUpload = null;
$scope.UploadFile = function (files) {
$scope.$apply(function () { //I have used $scope.$apply because I will call this function from File input type control which is not supported 2 way binding
$scope.Message = "";
$scope.SelectedFileForUpload = files[0];
})
};
//Parse Excel Data
$scope.ParseExcelDataAndSave = function () {
var file = $scope.SelectedFileForUpload;
if (file) {
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
//XLSX from js-xlsx library , which I will add in page view page
var workbook = XLSX.read(e.target.result, { type: 'binary', cellDates:true, cellStyles:true });
var sheetName = workbook.SheetNames[0];
var excelData = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
if (excelData.length > 0) {
//Save data
Candidature.SaveData(excelData).then(function (data) {
if (data.status) {
$scope.Message = excelData.length + " record inserted";
}
else {
$scope.Message = "Failed";
}
}, function (error) {
$scope.Message = "Error";
});
// Candidature.SaveDatacandidature(excelData).then(function (data) {
// if (data.status) {
// $scope.Message = excelData.length + " record inserted";
// }
// else {
// $scope.Message = "Failed";
// }
// }, function (error) {
// $scope.Message = "Error";
// });
// $scope.SaveData(excelData);
}
else {
$scope.Message = "No data found";
}
}
reader.onerror = function (ex) {
console.log(ex);
}
reader.readAsBinaryString(file);
}
};
var dialogOpts = {
backdrop: 'static',
keyboard: false,
scope: $scope,
size: 'lg',
templateUrl: 'views/candidature/Importation.html',
controller: ['$scope', '$uibModalInstance','$sce',
function ($scope, $uibModalInstance, $sce) {
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
]
};
$uibModal.open(dialogOpts);
};
Importation.html :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.1/xlsx.full.min.js"></script>
<script src="http://oss.sheetjs.com/js-xlsx/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<!--<script src="app/views/candidature/candidatureCtrl.js"></script>-->
</head>
<body ng-app="agu">
<div ng-controller="candidatureCtrl" class="container" style="margin-top:50px;">
<div class="form-inline">
<input type="file" name="file" class="form-control"
onchange="angular.element(this).scope().UploadFile(this.files)"/>
<input type="button" value="Import" class="btn btn-success" ng-disabled="!SelectedFileForUpload"
ng-click="ParseExcelDataAndSave()" />
<br/>
<span style="color:red">
{{Message}}
</span>
</div>
</div>
</body>
</html>
In your web api, you are expecting two arrays for Candidatures and candidat.
But from your controller you are passing only one array of data excelData.
So when it comes to api it doesn't execute this code,
foreach (var data in candidat)
{
db.Candidat.Add(data);
}
Because candidat is either null or undefined. So it can't go through the loop which the below code is never executed.
db.Candidat.Add(data);
This is Meteor's default HTML:
<head>
<title>random-test</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
</template>
And this is Meteor's default Javascript code:
if (Meteor.isClient) {
Template.hello.greeting = function () {
return "Welcome to random-test.";
};
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 changed the Javascript so I could have it update {{greeting}} every second:
if (Meteor.isClient) {
Template.hello.greeting = "hi";
Meteor.setInterval(function() {
Session.set("greeting", "hello");
console.log("Hi");
}, 1000);
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
});
}
It is console.logging "hi" every second. However, it is either not updating the value of greeting or Session.get isn't updating its value as it should (according to Meteor docs).
You need to return the Session.get('greeting') in a helper:
Template.hello.greeting = function() {
return Session.get('greeting');
}
Having Template.hello.greeting = "hi"; makes the template not dependent on Session.get('greeting'), so changes to that "session variable" won't cause any re-renderings. Or what do you expect to happen?
bonsai docs “Communication” section (http://docs.bonsaijs.org/overview/Communication.html) has the following example which runs everywhere, except IE9:
<script src="http://cdnjs.cloudflare.com/ajax/libs/bonsai/0.4/bonsai.min.js"></script>
<div id="movie"></div>
<script>
var movie = bonsai.run(
document.getElementById('movie'),
{
code: function() {
// receive data from the other side
var text = new Text().addTo(stage);
stage.on('message:externalData', function(data) {
text.attr('text', data.nodeData);
});
stage.on('message', function(data) {
if (data.bonsai === 'tree') {
text.attr('textFillColor', 'red');
}
});
stage.sendMessage('ready', {});
}
}
);
// emitted before code gets executed
movie.on('load', function() {
// receive event from the runner context
movie.on('message:ready', function() {
// send a categorized message to the runner context
movie.sendMessage('externalData', {
nodeData: document.getElementById('movie').innerHTML
});
// send just a message to the runner context
movie.sendMessage({
bonsai: 'tree'
});
});
});
</script>
The fist question is: why the following code modification:
<script src="http://cdnjs.cloudflare.com/ajax/libs/bonsai/0.4/bonsai.min.js"></script>
<div id="movie"></div>
<script>
var movie = bonsai.run(document.getElementById('movie'), 'movie.js');
// emitted before code gets executed
movie.on('load', function() {
// receive event from the runner context
movie.on('message:ready', function() {
// send a categorized message to the runner context
movie.sendMessage('externalData', {
nodeData: document.getElementById('movie').innerHTML
});
// send just a message to the runner context
movie.sendMessage({
bonsai: 'tree'
});
});
});
</script>
where movie.js is:
document.getElementById('movie'),
{
code: function() {
// receive data from the other side
var text = new Text().addTo(stage);
stage.on('message:externalData', function(data) {
text.attr('text', data.nodeData);
});
stage.on('message', function(data) {
if (data.bonsai === 'tree') {
text.attr('textFillColor', 'red');
}
});
stage.sendMessage('ready', {});
}
}
throws “WORKER undefined”
Why original code does not work in IE9?
I am interested in using SignalR to provide a better user experience for some long-running processes in my application and have just created my first test SignalR project. I created an empty web project and then used NuGet to install the SignalR.Sample package. The StockTicker.html page example works perfectly. I then created my own Hub and test page.
using System.Threading;
using Microsoft.AspNet.SignalR.Hubs;
namespace SignalR.Test
{
[HubName("testHub")]
public class TestHub : Hub
{
public void LongRunningProcess()
{
Thread.Sleep(1000);
this.Clients.Caller.updateStatus("25% Completed");
Thread.Sleep(1000);
this.Clients.Caller.updateStatus("50% Completed");
Thread.Sleep(1000);
this.Clients.Caller.updateStatus("75% Completed");
Thread.Sleep(1000);
this.Clients.Caller.updateStatus("Done");
}
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SignalR - Long Running Process</title>
</head>
<body>
<h1>Long Running Process</h1>
<p>Status:</p>
<ul id="status">
<li>Loading hub...</li>
</ul>
<script src="/bundles/jquery"></script>
<script src="/Scripts/jquery.signalR-1.0.0-alpha2.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
var hub = $.connection.testHub;
hub.updateStatus = function (message) {
$("#status").append("<li>" + message + "</li>");
};
$.connection.hub.start().done(function () {
$("#status").children().first().text("Hub loaded.");
hub.longRunningProcess();
})
.fail(function() {
$("#status").children().first().text("Hub failed");
});
})
</script>
</body>
</html>
When I run the page, I get the following (Firebug) error:
TypeError: hub.longRunningProcess is not a function
hub.longRunningProcess();
If I look in /signalr/hubs I see the following script towards the end of the file:
signalR.testHub = signalR.hub.createHubProxy('testHub');
signalR.testHub.client = { };
signalR.testHub.server = {
longRunningProcess: function () {
return signalR.testHub.invoke.apply(signalR.testHub, $.merge(["LongRunningProcess"], $.makeArray(arguments)));
}
};
Any advice/pointers on where I'm going wrong would be much appreciated.
I found the problem. The client script should looks as follows:
$(function () {
var hub = $.connection.testHub;
hub.client.updateStatus = function (message) {
$("#status").append("<li>" + message + "</li>");
};
$.connection.hub.start().done(function () {
$("#status").children().first().text("Hub loaded.");
hub.server.longRunningProcess();
})
.fail(function() {
$("#status").children().first().text("Hub failed");
});
})
Notice the addition of the .client and .server properties to the hub method declarations, e.g. hub.client.updateStatus() and hub.server.longRunningProcess()