I have an error with my injection in the controller using angular.js
and I know that this is my problem because when I removed ngCookie the error on my console disappeared.
I have read on the web that it is ok the way i'm trying to do it - but for some reason the problem won't go away.
I tried changing the order of ngCookies and ngRoute, tried to write only one of them but I need them both, tried to change my version of angular - but still nothing work.
here is my controller
var mymedical = angular.module("mymed",['ngRoute','ngCookies']);
mymedical.controller('getPersonalCtrl',['$scope','$http',function($scope,$http) {
$http.get("http://localhost:3000/privateData").success(function(data){
$scope.insertDataToDB = data;
console.log(data);
});
}]);
mymedical.controller('insertPersonalCtrl',['$scope','$http',function($scope,$http){
var data = {};
data.email = $scope.email;
data.Tags = $scope.Tags;
data.title = $scope.title;
data.Info = $scope.Info;
data.Category = $scope.Category;
data.file = $scope.file;
data.Recommendation = $scope.Recommendation;
}]);
mymedical.controller('loginCtrl',['$scope','$http','$cookies', function($scope,$http,$cookies){
var user = {};
console.log("i'm in the controller of login");
//user.email = $scope.
//console.log($scope.email);
user.email=$scope.myemail;
user.pass = $scope.pass;
$scope.putCoockie = function(value){
var cook=$cookies.get('cookieEmail');
$cookies.put('cookieEmail',value);
console.log(value);
}
$http.post('http://localhost:3000/getUser', user).then()
}]);
how can I solve this?
Make sure you are loading the correct reference of ngCookies,
<link rel="stylesheet" href="style.css" />
<script src="//code.angularjs.org/1.2.14/angular.js"></script>
<script src="//code.angularjs.org/1.2.13/angular-route.js"></script>
<script src="//code.angularjs.org/1.2.9/angular-cookies.js"></script>
<script src="app.js"></script>
DEMO
Make sure you include ng cookies after ng route in your html page.
I am using the following in my demo project and it is working like charm.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-cookies.min.js"></script>
Also, can you show us the error in console?
Related
laravel Controller
if($validator->failed())
{
return redirect()->back()->with(['errors'=>$validator->errors(),'input'=>$request]);
}
JavaScript file
<script type="text/javascript" >
var registrationErrors = #json($errors);
var input= #json($input);
</script>
In this case registrationErrors it's working fine but input return error like
Action Facade\Ignition\Http\Controllers\ExecuteSolutionController not defined.
If pass only one argument in with() function that should be work fine.
Laravel Controller
if($validator->failed())
{
$data=["errors"=>$validator->errors(),
"input" => $input
];
return redirect()->back()->with('data',$data);
}
Java Script
<script type="text/javascript" >
var data = #json($data);
</script>
My issue is solved, this way is perfectly working
Sorry for the possible repost, but I don't know how else to write this. I've been using this website to create a small angularJS webpage using nodeJS as well, and I've gotten to the part of separating the angular code from the view, or HTML. What I've found was that when I tried to separate them nothing worked any more.
Here's my code so far:
Home.html:
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<!-- <script>
var myApp = angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.myColor = "red";
});
</script> -->
</head>
<body>
<!-- <script>
myApp.directive('myDirective', function() {
return {
template: "This is a test directive."
};
})
</script> -->
<h2>myApp Test</h2>
<div ng-app="myApp" ng-controller="myCtrl" ng-init="quantity = 10; cost = 5">
<p>Color: <input type="text" style="background-color:{{myColor}}" ng-model="myColor" value="{{myColor}}"></p>
<p>Total in dollar (raw exp): {{quantity * cost}}</p>
<p>Total in dollar (span): <span ng-bind="quantity * cost"></span></p>
<p> First Name: <input type="text" ng-model="firstName"></p>
<p> Last Name: <input type="text" ng-model="lastName"></p>
<h1>Hello, {{firstName + " " + lastName}}</h1>
</div>
Are you even changing?!
</body>
<script type="javascript" src="../JS/myApp.js"></script>
<!-- <script type="javascript" src="../JS/myApp.module.js"></script> -->
<script type="javascript" src="../JS/myCtrl.js"></script>
<!-- <script type="javascript" src="../JS/myCtrl.component.js"></script> -->
</html>
myApp.js / myApp.module.js:
var myApp = angular.module('myApp', []);
myCtrl.js / myCtrl.component.js:
myApp.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.myColor = "red";
});
// app.directive('myDirective', function() {
// return {
// template: '<p><h3>This is a test directive.<h3></p>'
// };
// });
Finally, here's my folder hierarchy:
If what I've done wrong is already evident, there's no need for you to continue reading.
Now the commented-out code is important as well. These are both the other things I've tried, and what I wanted to implement. I have tried:
Re-adding all the angular code back to the head tag to make sure it was still working at all. It worked, aside from the directive stuff (which, at point, I believe would have to be part of a separate module, but not the point, nonetheless).
Moving the script references, which are, and were, located below the body, to the head.
Moving the script references to the top of the body.
Moving everything into just *one* file (myApp.module.js).
Renaming both "myCtrl.component.js" and "myApp.module.js" to "myCtrl.js" and "myApp.js", respectively, to ensure possibly-antiquated angularJS nomenclature wasn't an attribution.
Adding "type="javascript"" to the script references.
"Hard refreshing" to make sure old documents weren't cached.
Tested to see if it was even requesting the files from the server using node. It doesn't look like it is.
If you need the nodeJS part of it, it's here as well (index.js):
var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');
http.createServer(function(req, res) {
var myUrl = url.parse(req.url);
var basename = path.basename(myUrl.path);
console.log('request url: ' + req.url);
console.log('url path: ' + myUrl.path);
console.log('basename: ' + basename);
fs.readFile('../HTML/Home.html', function(err, data) {
res.writeHead(200, { 'ContentType': 'text/html' });
res.write(data);
res.end();
});
}).listen(8080);
The problem is in your script tag
<script type="javascript" src="../JS/myCtrl.js"></script>
It should not be
type="javascript"
Either change it to
type="text/javascript"
or remove the type totally. Due to incorrect type , it is not loading controller and other js files to browser.
I know this question was asked before, but my question is about using abp.services methods in JavaScript directly.
Suppose I have:
public interface ISecurityAppService : IApplicationService
{
List<PacsUser_C_Extented> GetAll();
}
public class SecurityAppService : ApplicationService, ISecurityAppService
{
public List<PacsUser_C_Extented> GetAll()
{
// ...
return allUsers;
}
}
All the boilerplate services will be registered nicely as:
public class Global : AbpWebApplication<ImmenseWebModule>
{
protected override void Application_Start(object sender, EventArgs e)
{
base.Application_Start(sender, e);
}
}
As the ASP.NET Boilerplate documentation said, to be able to use the auto-generated services, you should include needed scripts in your page like:
<script src="~/Abp/Framework/scripts/libs/angularjs/abp.ng.js"></script>
<script src="~/api/AbpServiceProxies/GetAll?type=angular"></script>
I know the second line says to use angular controller, but I change it to:
<script src="~/api/AbpServiceProxies/GetAll?v=#(Clock.Now.Ticks)">script>
...still nothing works.
When I want to use getAll in an ASP.NET Web Form's JavaScript code, it gives me:
abp.service is not defined
So how can I use getAll or another method in SecurityAppService in the script element <script>...</script> — not Angular?
Thanks in advance.
Update
When I use an Angular controller and MVC partial view like:
(function () {
var app = angular.module('app');
var controllerId = 'sts.views.security.list';
app.controller(controllerId, [
'$scope', 'abp.services.remotesystem.security',
function ($scope, securityService) {
var vm = this;
vm.localize = abp.localization.getSource('ImmenseSystem');
vm.users = [];
vm.refreshUserList = function () {
abp.ui.setBusy( // Set whole page busy until getTasks completes
null,
securityService.getAll().success(function (data) {
vm.users = data;
abp.notify.info(vm.localize('UserListLoaded'));
})
);
};
vm.refreshUserList();
}
]);
})();
I am able to use that function.
But I want to use that in JavaScript in ASP.NET Web Form pages.
Finally I resolved it by a simple way as the below steps...
1- Run project and use that boilerplate services by Angular and Partial view (MVC)
like Update section in question.
2- After running and redirecting to a view, I went to View page source and see the dependencies scripts .
3- I copied the below scripts source to a page:
<script src="Scripts/jquery-2.2.0.min.js"></script>
<script src="Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="Scripts/jquery.validate.min.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
<script src="Abp/Framework/scripts/utils/ie10fix.js"></script>
<script src="Scripts/json2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/moment-with-locales.min.js"></script>
<script src="Scripts/jquery.blockUI.js"></script>
<script src="Scripts/toastr.min.js"></script>
<script src="Scripts/sweetalert/sweet-alert.min.js"></script>
<script src="Scripts/others/spinjs/spin.js"></script>
<script src="Scripts/others/spinjs/jquery.spin.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-animate.min.js"></script>
<script src="Scripts/angular-sanitize.min.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap.min.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="Scripts/angular-ui/ui-utils.min.js"></script>
<script src="Abp/Framework/scripts/abp.js"></script>
<script src="Abp/Framework/scripts/libs/abp.jquery.js"></script>
<script src="Abp/Framework/scripts/libs/abp.toastr.js"></script>
<script src="Abp/Framework/scripts/libs/abp.blockUI.js"></script>
<script src="Abp/Framework/scripts/libs/abp.spin.js"></script>
<script src="Abp/Framework/scripts/libs/abp.sweet-alert.js"></script>
<script src="Abp/Framework/scripts/libs/angularjs/abp.ng.js"></script>
<script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
<script src="api/AbpServiceProxies/GetAll?v=636475780135774228"></script>
<script src="api/AbpServiceProxies/GetAll?type=angular&v=636475780135774228"></script>
<script src="AbpScripts/GetScripts?v=636475780135774228" type="text/javascript"></script>
and use getAll method like:
<script>
var securityService = abp.services.remotesystem.security;
securityService.getAll().done(function (data) {
for (var i in data)
console.log(data[i].username);
});
</script>
I think the important staff to use auto-generated services is :
<script src="api/AbpServiceProxies/GetAll?v=636475780135774228"></script>
<script src="api/AbpServiceProxies/GetAll?type=angular&v=636475780135774228"></script>
<script src="AbpScripts/GetScripts?v=636475780135774228" type="text/javascript"></script>
Thanks for your attention.
you are injecting abp.services.remotesystem.security.
so you can use this namespace to access the functions. open chrome console and write abp.services.remotesystem.security you will see the functions
AssetApplicationService must be implemented by IApplicationService and then check your module load correctly and add correct dependencies in other modules like this.
Check this link. It's worked for me.
I would like to add a div to my current website.
The div i would like to add should show some json data using angularjs.
My problem is that it does not look like angularjs is working like its supose to when adding html after the page is rendered.
Here is my test:
<html >
<head>
<meta charset="utf-8">
<title>Angular test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<script>
var featureInfoMainDivId = 'FeatureInfoMaster';
function initAngularDataFeatureInfo() {
var s = document.createElement('script');
s.type = "text/javascript";
s.textContent =
'var app = angular.module("featureInfoApp", []); ' +
'app.controller("featureInfoCtrl", function ($scope) { ' +
'$scope.firstName = "John" '+
'$scope.lastName = "Doe" ' +
'});';
document.getElementById(featureInfoMainDivId).appendChild(s);
}
function addFeatureInfoDiv() {
var divMain = document.createElement('div');
divMain.setAttribute('id', featureInfoMainDivId);
divMain.setAttribute('ng-app', "featureInfoApp");
divMain.setAttribute('ng-controller', "featureInfoCtrl");
divMain.innerHTML ='<div> {{ firstName + " " + lastName }}</div>';
document.getElementById('appdiv').appendChild(divMain);
initAngularDataFeatureInfo();
}
</script>
<body >
<div id="appdiv"></div>
<button id="btn_load_grid" onclick="addFeatureInfoDiv();">loaddata</button>
</body>
</html>
You are missing two semicolons in
$scope.firstName = "John";
$scope.lastName = "Doe";
If you load the Angular script it looks for ng-app and bootstraps itself. Since you add Angular specific code after the script is loaded, you need to bootstrap Angular manually with:
//after initAngularDataFeatureInfo();
angular.element(document).ready(function() {
angular.bootstrap(document, ['featureInfoApp']);
});
Please remove this line:
divMain.setAttribute('ng-app', "featureInfoApp");
It is not needed if you bootstrap Angular manually. For further bootstrapping info, see: Angular bootstrapping documentation.
Also: Is there a reason why you are using Angular version 1.2.26? Version 1.5.3 is the latest stable build.
Try using Angular directives. you can create a customer directive which will then feed a template of your liking
I am New to angular js and ionic mobile apps, I am getting one error.My doubt is if the user open the app at that time i need to get mobile details like device name,version,model e.t.c..For that i wrote separate controller..
<!-- Module File -->
var moduleName = angular.module('InfoModule', ['ngRoute','ui.bootstrap','ngTouch','ngAside','ngDialog','ionic'])
.run(['$rootScope','$location','StorageService',
function ($rootScope,$location,StorageService) {
$rootScope.appInitDone = false;
$rootScope.currentPage = "home";
$rootScope.loginStatus = 0;
}]);
<!-- Controller -->
moduleName.controller('PlatformController', function ($scope,$filter,$rootScope,$apply,$location,$ionicPlatform, $cordovaDevice) {
$ionicPlatform.ready(function() {
$scope.$apply(function() {
// sometimes binding does not work! :/
// getting device infor from $cordovaDevice
var device = $cordovaDevice.getDevice();
console.log(device);
$scope.manufacturer = device.manufacturer;
$scope.model = device.model;
$scope.platform = device.platform;
$scope.uuid = device.uuid;
console.log($scope.uuid);
});
});
});
<!--This is Home Html File-->
<div ng-controller="PlatformController"></div>
<div ng-controller="HomeController">
<input type="textbox" name="searchBox" placeholder="Search Form SomeThing" class="form-control" data-ng-model="someType" ng-click="Search()" style="height:40px;margin-top:50px;"/>
</div>
<!--Injected Links -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/css/ionic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.1.0/js/ionic.min.js"></script>
I am getting $cordovaDevice Error and $Injector Mobuler error
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.12/$injector/modulerr?p0=InfoMod…p%3A%2F%2F127.0.0.1%3A50666%2Fjs%2FScriptFiles%2Fangular.min.js%3A17%3A381)
And also where we need to call the Plat Form Controller to get device information .......Please help me.......If you have any other ideas or examples please give me the solution..please....
And Also I tried another way...In module i wrote another way...Like bellow
<!-- If tried Like this i am Getting Injector Modular like above error -->
var infomoduler = angular.module('InfoModule', ['ngRoute','ui.bootstrap','ngTouch','ngAside','ngDialog','ng-bootstrap-datepicker','angular-loading-bar','infinite-scroll','ionic'])
.run(['$rootScope','$location',
function ($rootScope,$location) {
$rootScope.appInitDone = false;
$rootScope.currentPage = "home";
$rootScope.loginStatus = 0;
ionic.Platform.ready(function(){
// will execute when device is ready, or immediately if the device is already ready.
});
var deviceInformation = ionic.Platform.device();
var isWebView = ionic.Platform.isWebView();
var isIPad = ionic.Platform.isIPad();
var isIOS = ionic.Platform.isIOS();
var isAndroid = ionic.Platform.isAndroid();
var isWindowsPhone = ionic.Platform.isWindowsPhone();
var currentPlatform = ionic.Platform.platform();
var currentPlatformVersion = ionic.Platform.version();
ionic.Platform.exitApp(); // stops the app
}]);
var infomoduler = angular.module('InfoModuler', ['ngRoute','ui.bootstrap','ngTouch','ngAside','ngDialog','ng-bootstrap-datepicker','angular-loading-bar','infinite-scroll','ionic'])
.run(['$rootScope','$location','$ionicPlatform','$apply','$cordovaDevice',
function ($rootScope,$location,$ionicPlatform,$apply,$cordovaDevice) {
$rootScope.appInitDone = false;
$rootScope.currentPage = "home";
$rootScope.loginStatus = 0;
ionicPlatFormBuddy();
function ionicPlatFormBuddy(){
$ionicPlatform.ready(function() {
$scope.$apply(function() {
// sometimes binding does not work! :/
// getting device infor from $cordovaDevice
var device = $cordovaDevice.getDevice();
debugger;
console.log(device);
$scope.manufacturer = device.manufacturer;
$scope.model = device.model;
$scope.platform = device.platform;
$scope.uuid = device.uuid;
console.log($scope.uuid);
});
});
}
}]);
Is it Correct to write the code In Module Please Give me the Solution..please..
Please add this plugin
cordova plugin add org.apache.cordova.device
Add below line of code in any of your controller file,
Controller
$ionicPlatform.ready(function() {
//find application version
if (window.cordova) {
var uuid = $cordovaDevice.getUUID();
var cordova = $cordovaDevice.getCordova();
var model = $cordovaDevice.getModel();
var platform = $cordovaDevice.getPlatform();
var platformVersion = $cordovaDevice.getVersion();
var mobileDetails = {
'uuid': uuid,
'cordova': cordova,
'model': model,
'platform': platform,
'platformVersion': platformVersion,
};
console.log('Mobile Phone details:', mobileDetails)
}
});
In order to get access to the device's details, you need to install the device plugin (org.apache.cordova.device).
navigate to your ionic/cordova project (where www lives) and type the following command.
cordova plugin add cordova-plugin-device
To get more detail about ngCordova take a look at this link
Note, you need to have ngCordova plugin added to your project. You can download it from here or via bower:
bower install ngCordova
In your code include the ngCordova script e.g.
<script src="../js/ng-cordova.js"></script>