This question already has an answer here:
Rendering to JS with Jinja produces invalid number rather than string
(1 answer)
Closed 5 years ago.
in my index.html I can print these (keys,name,email)values
<body>
{{keys}}
{{Name}}
{{Email}
</body>
<component-app></component-app>
these from flask like this
return render_template("index.html",keys=my_keys,Name=my_name,Email=my_email)
I want to pass keys,name,email data to component-app, What should I do?
or can I pass data from flask to angular2's component??
The short answer: no, you can't. But you can create global js variables
<body>
<script type="text/javascript">
keys = '{{keys}}'
Name = '{{Name}}'
Email = '{{Email}'
</script>
</body>
Then in your component
public keys = window['keys']);
And in your angular html
{{ keys }}
Related
This question already has an answer here:
Why there's error in onclick when i have "module" in script tag?
(1 answer)
Closed 7 months ago.
<html>
<head>
<script type="module" src="topo_space.js"></script>
</head>
<body onload="main()">
</body>
</html>
topo_space.js:
export function main(){
const innerHTML = `<svg id="main_svg" width="959" height="704"></svg>`;
console.log(innerHTML);
document.body.innerHtml = innerHTML;
}
Getting error:
topo_space.html:6 Uncaught ReferenceError: main is not defined at onload
I want to stick to using module, because the js can itself further import a json as module, which I find extremely cool.
Checkout this thread to read more information about this problem:
How to use code from script with type=module
The answer is:
window.main = function main() {
const innerHTML = `<svg id="main_svg" width="959" height="704"></svg>`;
console.log(innerHTML);
document.body.innerHtml = innerHTML;
};
<html>
<head>
<script type="module" src="topo_space.js"></script>
</head>
<body onload="main()"></body>
</html>
I am not getting the expected message when using value recipe.
I am getting output as {{message}}, but I am expecting "hai services are working!!"
Please share where I am going wrong.
HTML code: Injector.html
<!DOCTYPE html>
<html>
<head>
<title>Practicing Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="Injector.js"></script> <!-- Injector module file name -->
</head>
<body ng-app="injectormodule"> <!-- root module-->
<div ng-controller="controllerInjector">
{{message}}
<!-- controller name-->
</div>
</body>
</html>
Controller: Injector.js
var app = angular.module("injectormodule", ["servicemodule"])//name of service is servicemodule
.controller("controllerInjector", ["$scope", "message", function($scope, message){
$scope.message = message;
}]);
Service:(Value Recipe)
var myapp = angular.module("servicemodule", [])
.value("message", "hai services are working!!");
You have to define your servicemodule before your injectormodule, otherwise its creation will fail (since unable to find the servicemodule dependence).
Since the injectormodule failed from being created, the ng-app="injectormodule" will also be unable to bootstrap Angular on your DOM, thus won't interpret things like double brackets ({{ message }}).
Here is a working codepen.
You need to Inject your service into controller and need to create same module.
See this sample working fiddle which use service method to get text.
See other fiddle link also in comments
This question already has answers here:
Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
(5 answers)
Closed 6 years ago.
my controller.js file
function ServicesCtrl($scope) {
console.log("Hello From ServicesCtrl");
$scope.message = "Hello";
}
index.html file
<html>
<head>
<title>The MEAN Stack</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="js/angular.min.js"></script>
<script src="features/services/controller.js"></script>
</head>
<body ng-app="">
<div class="container" ng-controller="ServicesCtrl">
<h1>Service Client Maker</h1>
{{message}}
</div>
</body>
</html>
it is not displaying my message. controller.js file is not accessable
Its clear that you are trying to define a controller like a simple js function.
But, It works in a different way.
You have to initialize an angular app within an java-script variable like this,
var app=angular.module("MyApp");
and handle that entire angular application, through that js variable "app".
I strongly recommend you to completely go through below tutorials.. Then, Start creating the App..
https://www.tutorialspoint.com/angularjs/angularjs_mvc_architecture.htm
http://www.w3schools.com/angular/default.asp
You have to define your angular application and its modules.
var app = angular.module('myApp');
app.controller('serviceController', function() {
$scope.message = "Nice, I now know how to create an angular app";
})
And you will now be able to access it on your page:
<body ng-app="myApp">...
<div ng-controller="serviceController">...
{{message}}
This should help you since you're getting started with angular.
Here this example
define your controller name (controller.js)
var app = angular.module('myApp', []);
app.controller('ServicesCtrl', function($scope) {
$scope.message = "Hello";
});
define your app name (index.html)
<body ng-app="myApp">
<div class="container" ng-controller="ServicesCtrl">
<h1>Service Client Maker</h1>
{{message}}
</div>
</body>
I am trying to build a simple web app that communicates with an external API , for the first step i wish to check if my controller,service-html integration is all in placed , so I'm tying to bind a simple variable from the controller to the view, but i am getting {{msg}} instead of a successful bind.
please ignore the service for now its just my fundumentals for later on.
main.html :
<!DOCTYPE html>
<html >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="controller.js"></script>
<head></head>
<body ng-app="queueApi" ng-controller="MainController">
<div>
<h1>{{msg}}</h1>
</div>
</body>
</html>
queueservice.js
angular.module('queueApi')
.factory('queueService', function ($resource){
return $resource('http://127.0.0.1:8080/queue/:id',{id: '#id'});
});
controller.js
var app = angular.module('queueApi' , ['ngResource']);
app.controller('MainController', function($scope,$http, queueService){
$scope.msg = "Hi tom";
// $scope.items = queueService.query({id:2}); //getting all from id 2
});
If you look at your console you can see the error in module creation. It is because the ngResource module is in external source file rather than angular.min.js. Add also the angular-resource.js.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.min.js"></script>
<script src="controller.js"></script>
In addition to Hamlet Hakobyan's answer, you must ensure that your modules have been included in correct order. With your code structure controller.js should precede queueservice.js.
From the documentation:
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
Is possible retrieve multiples html partials in one single html? I've the next situation:
Template: {header} {main} {footer}
/index: header:"Welcome" main:"welcome text" footer:""
/help: header:"Help title" main:"faq tips" footer"Back to home"
using ng-include I've to retreive 6 html from server. If I will retrive multiples partials in one html then I will retrieve 2 html from server only, one for /index and one for /help.
This situation is a small example the real situation.
The tag script with type ng-template don't work for me, because the script must be include before of ng-include.
Thanks!
Update 04/07/12:
I seek to update more than one div at a time, with an unique html retreive. I don't like this:
function IndexCtrl($scope) {
$scope.mainPage = 'partials/index/index.html';
$scope.headerTemplate = 'partials/index/header.html';
$scope.footerTemplate = 'partials/index/footer.html';
}
After in the template use ng-includes for include these partials. I think that this is not the correct way. There is other way?
Thanks!
Templates can be embedded in the main html. For example, with the following index.html:
<!DOCTYPE html>
<html ng-app=app>
<meta charset=utf-8>
<title>App</title>
<ng-view>Loading...</ng-view>
<script type=text/ng-template id=partial1.html>
<p>foo = {{foo}}</p>
</script>
<script type=text/ng-template id=partial2.html>
<p>Contents of partial2.html</p>
</script>
<script src=app.js></script>
you can use the following app.js:
angular.module('app', [], ['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider) {
$routeProvider.when('/p1', { templateUrl: 'partial1.html', controller: 'Partial1' });
$controllerProvider.register('Partial1', ['$scope', function($scope) {
$scope.foo = 'bar';
}]);
}]);
The documentation for the $templateCache service has more details.
What I do is use template instead of templateUrl, and use the requirejs text plugin to load the templates. that way for development you can have thousands of files for your templates, but once you minify you only have one javascript file with all the templates inlined.
I created an open source project which is setup for backbone but can easily be modified for angular which does the minification and requirejs text plugin wiring for you: http://github.com/davidjnelson/agilejs