https://c.na24.visual.force.com/apex/AngularBasics?Id=0031a000001YveQ
Visualforce Page: AngularBasics
<apex:page applybodytag="false" doctype="html-5.0" showheader="false" standardstylesheets="false" standardController="Contact">
<!--
applybodytag[DEFAULT this to false]:
A Boolean value that specifies whether or not Visualforce should automatically add a <body> tag to the generated HTML output. Set to false to disable adding the <body> tag to the response.
For example, when the <body> tag is statically set in your markup. If not specified, this value defaults to the value of the applyHtmlTag attribute if it's set, or true, if applyHtmlTag isn't set.
applyHtmlTag:
A Boolean value that specifies whether or not Visualforce should automatically add an <html> tag to the generated HTML output.
Set to false to disable adding the <html> tag to the response, for example, when the <html> tag is statically set in your markup. If not specified, this value defaults to true.
doctype[DEFAULT this to html-5.0]:
The HTML document type definition (DTD), or doctype, that describes the structure of the rendered page. If not specified, this value defaults to "html-4.01-transitional", which results in a doctype of .
Possible values for this attribute include "html-4.01-strict", "xhtml-1.0-transitional", "xhtml-1.1-basic", and "html-5.0", among others.
showheader[DEFAULT this to false]:
A Boolean value that specifies whether the Salesforce tab header is included in the page. If true, the tab header is displayed. If not specified, this value defaults to true.
standardStylesheets[DEFAULT this to false]:
A Boolean value that specifies whether the standard Salesforce stylesheets are added to the generated page header if the showHeader attribute is set to false.
If set to true, the standard stylesheets are added to the generated page header. If not specified, this value defaults to true.
By setting this to false, components that require Salesforce.com CSS may not display correctly, and their styling may change between releases.
/-->
<!-- Include Angular SRC using direct script tag or using apex:component -->
<script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script>
<!-- Defining angular app here. App is named as AngularBasicsApp -->
var app = angular.module("AngularBasicsApp",[]);
<!-- Defining angular controller here. Controller is named as AngularBasicsController taking $scope as parameter -->
app.controller("AngularBasicsController",function($scope)
{
<!-- attach helloworldmessage to scope -->
$scope.helloworldmessage = "Hello! This is my first angular app..."
$scope.contactname = "{!Contact.Name}";
$scope.email = "{!contact.email}";
$scope.imgurl = "{!Contact.PhotoUrl}";
$scope.phonedetails = function(){
var phone = "Phone: {!Contact.Phone}";
var otherphone = "OtherPhone:{!Contact.OtherPhone}";
return phone+"-----"+otherphone;
}
$scope.printfunction = function(testinput){
return testinput;
}
});
</script>
<div ng-app="AngularBasicsApp" ng-init="contactid='{!Contact.Id}'">
<div ng-controller="AngularBasicsController">
<fieldset>
<legend>Binding using braces:</legend>
<!-- Angular Binding using double braces -->
<h4>{{helloworldmessage}}</h4>
</fieldset>
<fieldset>
<legend>Binding using ng-bind directive:</legend>
<!-- Angular Binding using ng-bind directive -->
<h4 ng-bind="helloworldmessage"></h4>
</fieldset>
<fieldset>
<legend>SFDC Contact Name:</legend>
<span><image ng-src="{{imgurl}}"/></span>
<span ng-bind="contactname"></span><br/>
<span ng-bind="email"></span>
</fieldset>
<fieldset>
<legend>Sample Input and Output Text Display</legend>
<p>
<input type="text" ng-model="myinputtext"/>
<span ng-bind="myinputtext"></span>
</p>
</fieldset>
<fieldset>
<legend>Simple Maths</legend>
<p>
{{500/21}}
</p>
</fieldset>
<fieldset>
<legend>Simple Maths using dynamic input</legend>
<p>Enter Distance: <input type="text" ng-model="distance"/></p>
<p>Enter Time: <input type="text" ng-model="time"/></p>
<p>Velocity Is: {{distance/time}}</p>
</fieldset>
<fieldset>
<legend>Contact ID display using ng-init</legend>
<p>
{{contactid}}
</p>
</fieldset>
<fieldset>
<legend>Binding output of a function</legend>
<p>
{{phonedetails()}}
</p>
</fieldset>
<fieldset>
<legend>Passing parameter to a function and binding the output</legend>
<p>
{{printfunction("Sample Print")}}
</p>
</fieldset>
<fieldset>
<legend>ng-disabled</legend>
<p>
<button ng-disabled="switch">UnCheck to enable me</button>
<input type="checkbox" ng-model="switch" ng-init="switch=true"/>
</p>
</fieldset>
<fieldset>
<legend>ng-show</legend>
<p>
<button ng-show="switchVisibility">UnCheck to Hide Me!</button>
<input type="checkbox" ng-model="switchVisibility" ng-init="switchVisibility=true"/>
</p>
</fieldset>
<fieldset>
<legend>ng-hide</legend>
<p>
<button ng-hide="hideMe">Check to Hide Me!</button>
<input type="checkbox" ng-model="hideMe" ng-init="hideMe=false"/>
</p>
</fieldset>
</div>
</div>
</apex:page>
Preview:
No comments:
Post a Comment