For example, I have HTML code in variable JS:
var template = '<div>%name%</div>';
How easy to replcae %name% on text in template? What is tools provided in Angular JS for this?
What you're trying to do is simple interpolation - angular does this out of the box with two way data binding, for example, take the following:
<html ng-app="ExampleApp">
<body ng-controller="ExampleController as vm">
<div>Hello {{vm.name}}</div>
</body>
</html>
You could have a script like this:
angular.module('ExampleApp', [])
.controller('ExampleController', function(){
this.name = "World";
})
Which would print out "Hello World".
This is really basic though - if you're asking this question you definitely read more about angular before you attempt to create an application.
I would recommend the course at thinkster.
AngularJS provides possibilities to create HTML templates, data binding, loops, filters, ajax and you can extend everything you want with directives, you can create components to shrink you templates to be even smaller and concise. Here you can find examples and also some documentation, AngularJS is very popular so it's easy to find resources.
Related
Need help in knowing how to use AngularJS in Salesforce Lightning and VisualForce pages?
I do know that it has to be used using static resource but need step by step details in using it.
Well, when talking about AngularJS, I believe you are talking about the version 1.x, because the version 2.0, which is currently 6.0 needs to be used in a different way compared to the earlier version.
For Angular 1.x, I am listing down the steps here:
The very first step is to download the latest version of AngularJS. You can get that here.
https://angularjs.org/
Zip the AngularJS file and create a Static Resource, so that you can reference it in your pages. In case, you want to know how to create a static resource in Salesforce, refer SF documentation.
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_resources_create.htm
(You also have an option of directly referencing the CDN file in your VF pages, however, it is recommended that you should go for Static resources.)
Now, to get AngularJS in action, you have to do something called as “bootstrapping” your app.
This can be done in 2 ways:
Use “ng-app” directive. (NOTE:You can only have one ng-app directive in your HTML document. If more than one ng-app directive appears, the first appearance will be used.)
And the second way is manual bootstrapping. You can refer to this blog to know more about it.
http://blogs.quovantis.com/process-to-use-manual-bootstrapping-in-angularjs-with-examples/
You can use the following code to see manual bootstrapping in action.
<apex:page showHeader="true" sidebar="true">
<apex:includeScript value="{!URLFOR(<your-static-resource-name>,'angular.min.js')}">
<div id="demo" ng-controller="demoAngularController">
{{testVar}}
</div>
<script>
var demoModule = angular.module('demo', []);
demoModule.controller('demoAngularController', function ($scope) {
$scope.testVar = 'Prem';
});
angular.bootstrap(document.getElementById("demo"),['demo']);
</script>
Make sure you replace the static resource name with actual name that you created in the system.
I have added a code snippet as well.
var app = angular.module('demo', []);
app.controller('demoAngularController',function MyController($scope) {
$scope.testVar = 'Prem';
});
angular.bootstrap(document.getElementById("demo"),['demo']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="demo">
<div ng-controller='demoAngularController'>
<h1>Hello, {{ testVar }}!</h1>
</div>
</div>
For Angular 2.0
In case, you want to learn the usage of Angular2.0 (or Angular6.0 as known currently), you may look at this tutuorial and let me know your feedback.
https://premjpal.wordpress.com/2018/09/06/getting-started-with-angular6-in-salesforce/
Happy coding!
I have an angularjs 1.5.8 application created using Jhipster.
For my website I want to make a HTML and JAVASCRIPT editor. Need to allow user to write HTML Code but JAVASCRIPT also.
Using this library I know I can achieve the follow.
https://github.com/incuna/angular-bind-html-compile
1: Bind HTML Code.
2: Bind Angular code if present in HTML
Eg: <h1>{{$scope.test}}</h1>
Would render correct value in the scope.
But what about something like this in the html
<script>
console.log($scope);
</script>
I get a $scope not defined error, somehow the $scope value is not available in the script tag.
If anyone curious that why I need to do this because we want to provide users of the application to create there own Angularjs Forms.
I solved using ng-include, here is the example source.
I wanted to do two things.
1: Make ng-include work from a scope variable which will contain html and javascript.
2: In the included string if I have a script tag I wanted it to render correct in the ng-include.
To achieve the #1 I did the following.
Used $templateCache service.
Sample code.
$templateCache.put('template-form', vm.html + vm.script);
For point #2
I made sure the script tag is structured in the following way.
<script>
(function() {
'use strict';
angular.module('myApp').controllerProvider.register('AppTemplateController',AppTemplateController);
AppTemplateController.$inject = ['$scope'];
function AppTemplateController($scope){
// WRITE YOUR CODE IN THIS CONTROLLER
// YOU CAN WRITE YOUR VARIABLES/FUNCTIONS HERE.
// MAKE SURE TO CALL THE method "vm.submitForm", to submit your form and pass the form object.
};
})();
</script>
This way you can inject a controller.
My requirement was very very specific to my projecct, I am not sure if others who did not face this issue even would understand what I am talking about. But for those who do face it, I hope you it helpful
I have a data source that contains an array of raw HTML strings. I must display these in a page to the user.
Being a bit new with Angular, the first thing I tried was this:
<div ng-repeat="html in ctrl.html" ng-bind="html"></div>
This causes Angular to escape my HTML and display it as a string. It isn't what I need, but at least it shows that Angular is, indeed, loading the data.
Doing a Google search, I read about the ng-bind-html-unsafe directive, which I understand is supposed to inject text into an HTML document without escaping or sanitizing it in any way, which is what I want because I must trust our data source.
<div ng-repeat="html in ctrl.html" ng-bind-html-unsafe="html"></div>
This doesn't work, either. It just shows me a blank page. When I open the document inspector, I see that there is a div tag for each entry in the HTML array, but the divs are all blank.
Doing more Google-fu, I found discussions about calling methods on $scope to make Angular play nice with this. They say that ng-bind-html-unsafe is deprecated.
With all the talk about different ways to do what I need with different versions of Angular, how do I do this with today's version: 1.4?
I think you have to "sanitize" your html's..
Example:
angular.module('sanitizeExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {
this.html = array with your htmls;
this.sanitizeHtml = function(html) {
return $sce.trustAsHtml(html);
};
}]);
Then
<div ng-repeat="html in ctrl.html" ng-bind-html="ctrl.sanitizeHtml(html)"></div>
I think it will work
use ngSanitize module...
var app = angular.module("myApp", ['ngSanitize']);
see this link. this work perfect
In view
<div ng-repeat="html in ctrl.html" ng-bind-html="ctrl.sanitizeHtml(html)"></div>
In controller
myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });
This will work
I retrieve the code of an HTML page from a server thanks to a rest service and I want integrate the html code into an empty template
.controller('TestController', ['$scope' ,'$rootScope' , '$sce' , function ($scope ,$rootScope,$sce) {
var restHtml =$rootScope.test; //contains <div>Test</div>
$scope.showHtml= $sce.trustAsHtml(restHtml );
}]);
The template
<div ng-bind-html="showHtml"></div> <!-- didn't work and i want a solution without integrate my html code into a existing div -->
Thank you
Ideally DOM manipulations should not happen in the controller, directives should be used for them.
To answer your question, you could compile the html into your tag. Get the html, find the element you want to insert the html in and use compile to do it. A good example of compile.
New to Angular. I feel like I'm missing something obvious: Shouldn't I easily be able to run to separate AngularJs apps (modules) in the same html page? Something like this:
<section ng-app="HelloWorldApp" ng-controller="HelloWorldController">
Hello {{name}}!
</section>
<br />
<section ng-app="MyNameIsApp" ng-controller="MyNameIsController">
My Name is {{FirstName}} {{LastName}}!
</section>
Javascript:
var HelloWorldApp = angular.module('HelloWorldApp', []);
HelloWorldApp.controller('HelloWorldController', function($scope) {
$scope.name = 'World';
});
var MyNameIsApp = angular.module('MyNameIsApp', []);
MyNameIsApp.controller('MyNameIsController', function($scope) {
$scope.FirstName = 'John';
$scope.LastName = 'Smith';
});
This only runs the first module, while the second doesn't appear to do anything. I want to do this so that I can build reusable, encapsulated directives for multiple pages that don't have to name their modules the same thing.
Live Example: http://plnkr.co/edit/cE6i3ouKz8SeQeA5h3VJ
We ended up building small hierarchy of modules, however my original question can done, with just a bit of work (see below).
It is possible, but it requires a little bit coding by hand. You need to bootstrap the angular apps on your own. Don't worry, it is not that complicated
Do not add ng-app attributes in your HTML
Make sure you can fetch the DOM elements holding the app
When DOM is loaded you need to start the apps on your own: angular.bootstrap( domElement, ['AppName']);
Fork of you plunker which works: http://plnkr.co/edit/c5zWOMoah2jHYhR5Cktp
According to the Angular docs for ngApp:
Use this directive to auto-bootstrap an application. Only one
directive can be used per HTML document. The directive designates the
root of the application and is typically placed at the root of the
page.
Seems it's by design.
You can specify any nested apps in the module def of the main one.
angular.module("myapp", ['statusapp', 'tickerapp']).controller(....
and in a separate file, you have the other apps defined. We're using a template engine which hides some of this, but you'll end up with HTML that contains nested ng-apps and javascript for each one that defines the module/controller. The code above is the trick to getting more than one bootstrapped.