I have 3 files here in Golang project, the idea is to render the index.html isnside the body of layout.html. It works.
But when I tried to pass a variable into the index.html, the console.log() did not rendered. When I move the console.log() to layout.html, I can see the content of the JSON from .tes.
Here are the project files.
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{.title}} | {{.project_name}}</title>
</head>
<body style="width:100%; height: 100%; overflow-x: visible">
<div id="wrapper" style="width:100%; height:100%; margin: 0 auto">
{{template "contents"}}
</div>
</body>
</html>
index.html
{{define "contents"}}
<script>
var x = {{.tes}};
console.log(x)
</script>
{{end}}
router.go
func init() {
// handler
http.HandleFunc("/", RenderPage)
}
func RenderPage(w http.ResponseWriter, r *http.Request) {
tes := map[string]interface{}{
"item":"TEST3",
"count":4567,
}
Data := map[string]interface{}{
"title":"TEST1",
"project_name":"TEST2",
"tes":M.ToJSON(tes),
}
tmpl, err := template.ParseFiles("page/layout.html", "page/index.html")
X.CheckError(err)
err = tmpl.Execute(w, Data)
X.CheckError(err)
}
In layout.HTML, you need to pass the context. You do that with a . dot.
{{ template "contents" . }}
Alternatively, you can pass the value of whatever var you want:
{{ template "contents" .tes }}
...and within the contents template, the dot context will be just the value of .tes. That helps limit the scope of sub-templates, not having to dot-walk to get to a value.
Related
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.
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";
I have a simple rails application., Hoping to get some input for this block of code that is not working.
<div ng-contoller="myappMyController as myController">
Hello {{ myController.greet() }}
</div>
I have a controller defined in angular amp.js. Here is the source code for that js file
var MyController= function() {
console.log("AM getting here");
var controller=this;
var greet = function () {
return "howdy";
}
controller.greet=greet;
}
angular.module('myapp',[]).controller('MyController', MyController);
Here is the html file where am calling this method
<div ng-app>
<p id="notice"><%= notice %></p>
<h1>Listing Users</h1>
<p>The value is {{1+1}}</p>
<input ng-model="firstName" ng-model-options="{updateOn: 'blur'}"/>
<p>Hi {{firstName}}</p>
<div ng-contoller="myappMyController as myController">
Hello {{ myController.greet() }}
</div>
</div>
The copy of the application layout html file is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="assets/favicon.ico">
<title>AngularVenkat</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>-->
</head>
<body>
<%= yield %>
</body>
</html>
Any recommendations or things I have not addressed.
Here you have defined your controller as MyController:
angular.module('myapp',[]).controller('MyController', MyController);
Here you are trying to reference it as myappMyController (plus you have a typo on ng-controller):
<div ng-contoller="myappMyController as myController">
You need to change one or the other so they both match either MyController or myappMyController.
i am new to angular js. i write the code for perform multiple controller concept but it is not working .i dont know where i am doing wrong?
following code i am using
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="number" ng-model="q">
<input type="number" ng-model="c">
<p>{{ q*c }}</p>
</div>
<div ng-controller="newone">
<p>{{lastName|uppercase}}</p>
</div>
</body>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope)
{
$scope.q=10;
$scope.c=5;
});
</script>
<script src="control.js"></script>
</html>
**control.js**
var app=angular.module('myApp',[]);
app.controller('newone',function($scope){
alert();
$scope.firstName="Vinoth";
$scope.lastName="Kumar";
$scope.full=function()
{
return $scope.firstName+''+$scope.lastName;
}
});
above code is not working can any one help me to fix this
In controller.js you don't need to declare the module again :)
var app=angular.module('myApp',[]);
change it to var app=angular.module('myApp');
Below is a snippet of code I want to maked work,also it will be interested how to put angular data in a php string like the one below
<!DOCTYPE html>
<html lang="en" ng-app="Api">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div data-ng-controller="detaliivideo">
{{afisare.video}} <!-- this is showing the data in pure html -->
<!-- but in javascript no -->
<script type="text/javascript">
// in a simple variable also not working
var video = {{afisare.video}};
var flashvars = {
'autoplay':1,
'autohide':0,
'skin':'//www.mysite.net/js/clipuri.swf',
'more':'//www.mysite.net/related.php',
'ecode':'',
'video': {{afisare.video}}, // this is not working, '{{afisare.video}}' not working also ,"{{afisare.video}}" not working also
'thumbnail':''
};
</script>
<?php $var = "{{myItem}}"; // echo $var is showing the data ,but in a function name ($var) is showing {{afisare.video}}?>
</div>