So I'm trying to load all the AngularJS scripts which I need in my app when the index.html file loads.
For this I've made this piece of code
<head>
...
AngularJS libaries loads
...
<script>
var main = {
root: [
'core.js'
]
};
var iterateScripts = function(folder, path){
for(var key in folder){
if(key.toLowerCase() === 'root'){
for(var i = 0; i < folder[key].length; i++){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = path + '/' + folder[key][i];
// console.info('script : '+ script.src)
document.getElementsByTagName('head')[0].appendChild(script);
}
} else {
var newPath = path + '/' + key;
// console.info('path : ', newPath, folder[key])
iterateScripts(folder[key], newPath);
}
}
};
iterateScripts(main, 'app/main');
console.info(document.getElementsByTagName('head')[0])
</script>
</head>
This loads the files okay, but I get this error
AngularJS error explanation
After testing back and forth I've concluded that the problem is because the page loads while AngularJS is compiling, which creates the error.
If this is true, how can I load my angular app in a similar fashion before the body tag loads?
You'll have to bootstrap angular yourself instead of using ng-app. Here is the documentation on it: https://docs.angularjs.org/guide/bootstrap.
Once all your scripts are finished loading then you'll run a piece of code that looks similar to this:
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
Which tells angular it is ready to start.
Related
I an trying to grab url parameters onto a Zoho form in Squarespace for Google tracking purposes. I made a custom function to get the parameter and add it to a url. The alerts at the end are just to show that it is getting set correctly. But I am unable to add the form with the variable 'site'.
<script type="text/javascript">
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var campaign = getUrlVars()["campaign"];
var site = "https://forms.zohopublic.com/....wj7Q?campaign="+campaign;
var scriptElement = document.createElement('script');
scriptElement.type = "text/javascript";
scriptElement.src = site;
scriptElement.id = "ZFScript";
document.head.appendChild(scriptElement);
alert(decodeURI(campaign));
alert(site);
alert(scriptElement.src);
alert(scriptElement.type);
alert(scriptElement.id);
</script>
So at the end I just need to run
<script type="text/javascript" src=site id="ZFScript"></script>
But I can not get it to write a new script with src equaling the site variable.
If you are using only javascript, you almost got it as #Julesezaar comment, I complement it with something like this:
document.getElementById('ZFScript').setAttribute('src',site);
And you are done.
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 want to see that 2 contorller called by 1 contorller.
How to make it call? PS. B is in the iframe tag.
Please help me.
now html source structure
A.html (A.js)
B.html (B.js) A children tag - iframe
now js source (A.js)
var app = angular.module('upload',[nUpload]); //nUpload is other module
app.controller('upload',[$scope,nupload,
function($scope,nupload){ //nupload is service of nUpload module
.... //fileupload
}]); ----- **1contorller**
B.js (js file is in the other html tag (iframe))
var app = angular.module('progress',['']);</br>
app.controller('progress',[$scope,,,,] function($scope,,){
... //draw progress }
); ----- **2contorller**
I dream of sources (A.js)
app.controller('upload',,,,
function(,,,){
B.progress = "10%"
}
Mmm.. to share objects between controllers you need an factory.
Try this:
A.js
var app = angular.module('upload',[nUpload,'container']);
app.controller('upload',[$scope,nupload,'Progress',
function($scope,nupload,Progress){
Progress.setProgress("10%");
}]);
B.js
var app = angular.module('progress',['container']);
app.controller('progress',[$scope,'Progress',,, function($scope,Progress){
var progressData = Progress.getProgress();
}]);
container.js
var app = angular.module('container',[]);
app.factory("Progress",[function(){
var progress = "0%";
return {
getProgress: function() {
return progress;
}
setProgress: function(data) {
progress = data;
}
}
}]);
Hope this help you.
;D
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>
An interesting problem about dojo toolkit and javasacript.
I am using a visual studio to developing application
I have created a module as following and named its file as calc.js
djConfig.js
var pathRegex = new RegExp(/\/[^\/]+$/);
var locationPath = location.pathname.replace(pathRegex, '');
var dojoConfig = {
async: true,
packages: [
{
name: 'application',
location: locationPath + '/js/application'
}
};
calc.js
define(["dojo/_base/declare"], function(declare) {
return declare(null, {
Sum: function(x,y) {
return x + y;
}
}); })
Once created this file I references this file in index.html file as following,
index.html
<script type="text/javascript" src="/js/application/djConfig.js"></script>
<script type="text/javascript">
require(["application/calc"],
function(calc) {
var c = new calc();
console.log(c.Sum(1, 2));
}
);
</script>
This code is wirking at first.Calculating sum and writing in concole of browser.
But than I am changing something in calc.js (ex. return x+y-1;).
The browser is giving a script error.
If I change something in index.html page - for example type a whitespace- than script is working.
All changes in calc.js file is throwing script error, if I do not change somewhere in index.html
Even If I type a whitespace or add a line in index page, every thing is working.
Did you encounter a problem like this?