I have been looking to find solution to below. However, it keeps evading me somehow. I am new to AngularJS. Need some help.
I have an index.htm file loading initially with following code. As part of this file header.htm is loaded. I am calling the AngularJS function getProperties() in header.htm file. However, when I try to alert i get 2 alerts. Meaning function is getting called twice. I have only called it once.
<?php
session_start();
//Load Header & Footer Template After Completion of Page Body Objects
require_once($wsdocroot."/content/themes/default/views/header.htm");
require_once($wsdocroot."/content/themes/default/views/footer.htm");
}
?>
<script>
angular.module('myApp', []).controller("myCtrl", function($scope,$http){
$scope.getProperties = function(whichArray='',retOption='',retOptionValue='',dynamicObjectID=''){
alert('here');
var returnString = '';
return returnString;
};
</script>
My html file is as below:
<html lang="en" ng-app="myApp" ng-controller="myCtrl" ng-init="wslink='<?php echo $wslink; ?>'; wspage='<?php echo $pageID; ?>';">
<head>
<title>{{getProperties(wspage,'property','title')}}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<meta name="description" content="{{getProperties('<?php echo $pageID; ?>','property','description')}}">
<meta name="keywords" content="{{getProperties('<?php echo $pageID; ?>','property','keywords')}}">
-->
<meta name="robots" content="index, archive">
<script src="/mserp/admin/includes/angularjs/angular.min.js"></script>
<script src="/mserp/admin/includes/angularjs/angular.animate.js"></script>
<script src="/mserp/admin/includes/angularjs/angular.route.js"></script>
<script src="/mserp/admin/includes/angularjs/angular.sanitize.js"></script>
<link rel="stylesheet" type="text/css" href="/mserp/admin/includes/css/style.css">
<link rel="stylesheet" href="/mserp/admin/includes/css/w3.css">
</head>
<body></body></html>
After which I have the script for AngularJS in the same html file.
Related
I have this javascript code in a script called index.js and the html in an index.html, the problem is that the "message" variable is not painting it on the screen.
Does anyone know what I'm doing wrong? I am very used to Angular but I have just started with AngularJS since I have a project to deliver to the client and they want it in this technology.
A greeting.
angular.module('holamundo', [])
.controller('miControlador', miControlador);
function miControlador(){
var scope = this;
scope.mensaje = "Hola, ¿Como estas?";
console.log(scope);
init();
function init(){
}
}
<!DOCTYPE html>
<html lang="en" ng-app="holamundo" ng-controller="miControlador">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular JS - Hola Mundo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div>
{{mensaje}}
</div>
</body>
</html>
Use $scope instead of this.
Only the variables declared in $scope are accessible in HTML view.
More here: 'this' vs $scope in AngularJS controllers
angular.module('holamundo', [])
.controller('miControlador', miControlador);
function miControlador($scope){
var scope = $scope;
scope.mensaje = "Hola, ¿Como estas?";
init();
function init(){
}
}
<!DOCTYPE html>
<html lang="en" ng-app="holamundo" ng-controller="miControlador">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular JS - Hola Mundo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="./index.js"></script>
</head>
<body>
<div>
{{mensaje}}
</div>
</body>
</html>
You can directly use
$scope.mensaje = "//your text here";
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<input type="text" ng-model='name'>{{name}}
</div>
<!-- Angular JS-->
<script src="../vendor/angular/angular.min.js"></script>
</body>
</html>
i'm trying out angular for the first time, and i encounter this error
Where is your AngularJS code? It needs the app name declaring in the modules otherwise it will error as its referencing something that doesnt exist.
var app = angular.module('myApp', []);
i've fixed it.. i had to referenced the angular.min.js file at the top of the page
I have an EXTJS6.5 application. I want to use variables in my index.html that come from a properties file. However the change of the values of these variables should not require a new build of the application. This means that the variable can be changed if required (Without the need to build the extjs code).
Can someone please help with this?
I have already gone thru other threads where index.html can have placeholders, but do not seem to have a concrete example.
This is my properties file (Runtime.js)
{
"appUrl": "http://myappurl.com",
"appId": "10"
}
Then I want to use these variables in my index.html as such:
This is my index.html
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<meta name="description" content="MyApp">
<title>MyApp</title>
<link rel="icon" type="image/png" href="myicon.png">
<link rel="stylesheet" href="resources/dist/myapp-resources.min.css">
</head>
<body>
<div id="myapp-app-loading">
<div class="myapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<script type="text/javascript">
var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
Ext.manifest = 'classic'; // this name must match a build profile name
};
</script>
<script src="Runtime.js"></script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="6d7f3123-ffca-44d3-8ed2-14fr2w6be804" type="text/javascript" src="bootstrap.js"></script>
<script src="{{Runtime.appUrl}}/configuration/MyConstants.js"></script>
<script src="{{Runtime.appUrl}}/resources/mycharts/mycharts.js"></script>
<script src="{{Runtime.appUrl}}/resources/ckeditor/ckeditor.js"></script>
</body>
</html>
Will this work this way? Or pls suggest any better way to do this..thank you very much.
Given Runtime.js file has a syntax error. Is not valid javascript file.
Runtime.js should be:
window.appUrl="http://myappurl.com";
window.appId="10";
And you can use these variables like window.appUrl/window.appid in script block, not in html block.
You can do workaround to resolve the problem: You can generate includes from Runtime.js.
Example:
index.html
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<meta name="description" content="MyApp">
<title>MyApp</title>
<link rel="icon" type="image/png" href="myicon.png">
<link rel="stylesheet" href="resources/dist/myapp-resources.min.css">
</head>
<body>
<div id="myapp-app-loading">
<div class="myapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>
<script type="text/javascript">
var Ext = Ext || {};
Ext.beforeLoad = function (tags) {
Ext.manifest = 'classic'; // this name must match a build profile name
};
</script>
<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" data-app="6d7f3123-ffca-44d3-8ed2-14fr2w6be804" type="text/javascript" src="bootstrap.js"></script>
<script src="Runtime.js"></script>
</body>
</html>
Runtime.js
window.appUrl="http://myappurl.com";
window.appId="10";
var script = document.createElement("script")
script.type = "text/javascript";
script.src = window.appUrl+"/configuration/MyConstants.js";
var script2 = document.createElement("script")
script2.type = "text/javascript";
script2.src = window.appUrl+"/resources/mycharts/mycharts.js";
var script3 = document.createElement("script")
script3.type = "text/javascript";
script3.src = window.appUrl+"/resources/ckeditor/ckeditor.js";
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script);
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script2);
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script3);
Updated 2019-07-17:
If you want to require script before application launches you must add reference to script in app.json in js block (Which can't be done because you want to personalize the source of scripts).
Second option is change in app.js you can do Ext.Loader.loadScript like:
Ext.Loader.loadScript({
url: 'my.js',
onLoad: function(){
Ext.application({
name: 'Fiddle',
extend: 'Fiddle.Application',
autoCreateViewPort: false
});
},
onError: function(){
console.log('error');
}
});`
Im trying to get info from this API :
In my main.js file I have this controller which is requesting an http request:
(function(){
var app = angular.module('provider',['provider-movies']);
app.controller('ProviderController',['$http',function($http){
var provider = this;
provider.movies =[];
$http.get('/http://private-5d90c-kevinhiller.apiary-mock.com/angular_challenge/horror_movies').succes(function(data){
provider.movies = data;
});
}]);
})();
Then in my html I'm trying to print the title of the movie like this:
<div ng-controller="ProviderController as provider">
<p>{{provider.movies.title}}</p>
</div>
But when i load the file on the browser it just shows this:
{{provider.movies.title}}
Angular is installed and working, if I add {{'hello '+'you'}} it prints **hello you**
Any ideas on why is this not working ?
Also , my html looks like this:
<!doctype html>
<html ng-app="provider">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
<script src="bower_components/angular/angular.min.js"></script>
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<div ng-controller="ProviderController as provider">
<p>{{provider.movies.title}}</p>
<p>{{'hello'}}</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
thanks!
You seem to have some typo and a missing closing parenthesis. If you looked at the console of your webbrowser you should definitely seen this.
Try this:
(function() {
var app = angular.module('provider', []);
app.controller('ProviderController', [ '$http', function($http) {
var provider = this;
provider.movies = [];
$http.get('http://private-5d90c-kevinhiller.apiary-mock.com/angular_challenge/horror_movies').success(function(data) {
provider.movies = data;
});
}]);
})();
Also in your markup the provider.movies is an array which doesn't contain a title property:
<div ng-controller="ProviderController as provider">
<p>{{provider.movies}}</p>
</div>
If you wanted to have the title you may consider looping through them:
<p ng-repeat="movie in provider.movies">
{{movie.title}}
</p>
And here's the working plunkr.
I am following a tutorial on AngularJS - "Building a website with AngularJS"
The routes I am using are pretty much the same as the tutorial :
// JavaScript Document
angular.module('quest', []).
config(function($routeProvider) {
$routeProvider.
when('/about', {template:'partials/about.html'}).
when('/start', {template:'partials/start.html'}).
otherwise({redirectTo:'/home', template:'partials/home.html'});
});
The problem is: it only shows the path to the resource, instead of the contents of the resource, so instead of showing the html content, it just shows:
PARTIALS/ABOUT.HTML
I am not sure what I am doing wrong, but it does work, if i go to the #/about URL it shows "PARTIALS/ABOUT.HTML" if i change the url to index.html#/start it shows "PARTIALS/START.HTML"
html of page:
<!DOCTYPE html>
<html lang="en" ng-app="quest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title></title>
</head>
<body ng-controller="MainController">
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/quest.js"></script>
<div ng-view></div>
</body>
</html>
Use templateUrl instead of template