I have this problem, that it would be easier for me to inject some configuration to my Angular app from html. What I'm thinking about is something like:
In HTML:
<body ng-app="MyApp" my-config="ABC">
</body>
So later I could convert it to a constant, so I can easier reuse the value across rest of the app. Something like:
angular
.module('MyApp', [])
.constant('MY_CONFIG', /** the value would become what was set in HTML */);
Would something like that be possible? Thanks for your help!
I've solved that differently. In the end of my <body>, after all js files are loaded I'm just setting the value:
<body ng-app="MyApp">
<!-- [...] -->
<script>
angular
.module('MyApp')
.constant('MY_CONFIG', 'testing.config');
</script>
</body>
Related
I am using the following version of Angularjs and trying to bind property called Description, that containing html tags, with my template.
I tried to use
{{Description | unsafe}} -- rendering html as string
ng-bind-html-unsafe -- nothing rendering
ng-bind-html -- nothing rendering
Files:
<script src="https://storage.googleapis.com/vendortoolkit/Scripts/angular.min.js"></script>
<script src="https://storage.googleapis.com/vendortoolkit/Scripts/angular-route.js"></script>
How html string can be rendered as html?
Make use of $sce service. Inject $sce to your controller & then use trustAsHtml method. In controller add code as:
$scope.desc = $sce.trustAsHtml($scope.Description);
Where $scope.Description is a string containing html tags
Then, bind on template with ng-bind-html :
<div ng-bind-html="desc"></div>
For ng-bind-html to work as expected, you need to include angular-sanitize library and ngSanitize as a dependency injection.
Sharing here an example for the same. Hope, this helps.
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: <h1>John Doe</h1>";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myText"></p>
</div>
I am currently working on a Node project using Express and ejs as view engine.
Now, for some purposes, I want to put some Angularjs on the project but I encountered some issues.
None of the scripts I write on the Angularjs controller are executed though they are correctly loaded.
For example, I initiate the angular module like so in a file app.js
angular.module('myApp', [])
.controller('MainController', MainController);
then I load it in a rendered ejs file index.ejs
<body ng-app="myApp">
<div>{{ variable }}</div>
<script src="/public/js/angular.min.js"></script>
<script src="/public/modules/part.js"></script>
<script scr="/public/modules/app.js"></script>
</body>
where /public is a the static directory for serving static files and part.js the file containing the MainController defined as following
var MainController = function($scope) {
$scope.variable = 'text';
console.log('other text');
}
When the page is completely loaded, nothing in the console and the {{ variable }} isn't interpreted.
So what have I done wrong?
You need to add ng-controller="MainController" as well,
<body ng-app="myApp" ng-controller="MainController">
<div>{{ variable }}</div>
</body>
Is it possible to use Angular not for all the application but only for some parts ?
I use Express for the server side and few pages are already made. Should I rebuild them or can I use Angular for only some parts ?
If you want to build only some page in angular, do it something like this:
Add angular script in header.
define your body like this:
<body ng-app="myApp">
</body>
Define module like this:
<script>
var app = angular.module("myApp", []);
</script>
Now on those pages where you want to use angular define a ng-controller at the very first div like this:
<div ng-controller="myCtrl">
</div>
and now define your controller like this:
<script>
app.controller("myCtrl", function($scope) {
//here you can define all your logic for page.
});
</script>
I have a trouble with starting an example in JSFiddle, it's simple code with AngularJS module, but I get a error with injecting module.
Javascript code:
angular
.module('App', ['ngMaterial'])
.controller('Ctrl', function($scope) {
$scope.text = 'Hello';
});
Html code:
<div ng-app="App" ng-controller="Ctrl">
{{ text }}
</div>
Please, help me to fix it.
Link to my JSFiddle
You need to change you javascript Load Type configuration. For example:
No wrap - in <body> or <head>
Updated JSFiddle
Hello I want to print content from an array of objects using angular js. I know that there are a lot of questions like this but there isn't any case where the same problem occurs. I want to print an attribute of an object as html. I use ng-sanitize as seen in many examples and it works fine though i get an error in console.
Here my test case:
<body ng-controller="myCtrl">
<div ng-repeat="widget in widgets track by $index">
<div ng-bind-html="widget.content">
</div>
</div>
</body>
<script>
var app = angular.module("MainCtrl", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
function Widget(){
this.content='<p>test</p>';
}
$scope.widgets=[];
$scope.widgets.push(new Widget(),new Widget(),new Widget());
console.log( $scope.widgets);
});
</script>
which works fine and print the elements as it should but in the console i get this error:
TypeError: c.push is not a function
at Function.K.$$addBindingInfo (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:78:223)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:252:330
at ea (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:73:293)
at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:62:190)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:122)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:54:249
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:56:79
at k (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:377)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:281:253 <div ng-bind-html="widget.content" class="ng-binding">
I use angular 1.4.8
Do you have any ideas why this error occurs or how to solve it?
Thx in advance
I forked your plunkr to show the problem you are encountering.
Whenever you use angular modules like ngRoute or ngSantize, it is important that the version of the module match exactly to the version of the angular library. In your case, you were using angular 1.4.8, but angular ngSanitize 1.0.3.
Updating the code to the proper version of ngSanitize from the CDN (and using angular.js instead of angular.min.js for debugging) shows that the error does not occur with ng-bind-html.
Use correct Versions for .js files... here is the code.... This is running perfectly
this is index.html
<html ng-app = "myapp">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.4.8/angular-sanitize.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body ng-controller = "myController">
<h1>Welcome to the Angular</h1>
{{4/3}}
<div ng-repeat="widget in widgets track by $index">
<div ng-bind-html="widget.content">
</div>
</div>
</body>
</html>
and this is test.js
var app1 = angular.module('myapp',['ngSanitize']);
app1.controller("myController" , function($scope){
function Widget(){
this.content='<p>test</p>';
}
$scope.widgets=[];
$scope.widgets.push(new Widget(),new Widget(),new Widget());
console.log( $scope.widgets);
});
save these two files in one folder and run.. it gives output perfectly
Found the bug, don't use ng-bind-html, that causes the issue.
Use single angular expression inside your html and it'll just work.
However I don't know what causes the issue.
Plunkr: http://plnkr.co/edit/xiSGVIPXb27GcKRh9yR1