Showing posts with label AngularJs. Show all posts
Showing posts with label AngularJs. Show all posts
How to use AngularJs Expressions

Points To Remember

You can evaluate angular expressions by the following ways

  • using interpolation {{ }}
  • using ng-bind

Examples of AngularJs Expressions

Following are the ways you can use the angular expressions.

  • Mathematical calculations 
  • String operations
  • Json operation
  • Array operations
You may want to see ng-init.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>

  <body ng-app="" ng-init="firstName='Ekansh';lastName='Rastogi';json=[{'name':'user1','age':'18'},{'name':'user2','age':'24'}];array=[0,1,2,3,8]">
    <div ng-bind="firstName + ' ' + lastName"></div><hr/>
    
    String operation ->{{"Hello" +" " + "World!" }}<hr/>
    
    Math operation -> {{2 * 5 }}<hr/>
    
    String &amp; Math operation ->{{"10 * 15 * 84  = "  + (10 * 15 * 84)}}<hr/>
    
    Json Operation ->{{'name = ' +json[0].name + ' age =' + json[0].age}}<br/>
    
    {{'name = ' +json[1].name + ' age =' + json[1].age}}<hr/>
    
    Array operation -> <span ng-bind="{{array}}"></span>
  </body>

</html>

The above code will give you the following output.

Introduction to AngularJS

Setting up AngularJS.

All you need to do is

  • Download the AngularJs script from https://angularjs.org/.
  • You can use the AngularJs cdn  
    http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js
  • Add the Angular Js ng-app="" tag to initialize the angukar application.
  • Add the angularjs script to the Html page and you are good to go
<!DOCTYPE html>

<html>
  <head>

    <link rel="stylesheet" href="style.css">

    <script src="script.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

  </head>
  <body ng-app="">
    <h1>{{"Hello" +" " + "World!" }}</h1>
  </body>

</html>

The above code will give you the following output.
Different ways to bind Elements to Model in AngularJs

Different ways to Bind Elements to Model/ Directives

You can bind the Angular Elements to the Model in the following ways.

  <span ng-bind="name"></span> <br/>
  <span ng:bind="name"></span> <br/>
  <span ng_bind="name"></span> <br/>
  <span data-ng-bind="name"></span> <br/>
  <span x-ng-bind="name"></span> <br/>

So the above ways are
Following example in the Plunk shows the various ways to write our angular directive.




Now most of the above code works perfectly with angular js but they may cause HTML validation to fail. So if you want your code to be Html validatable then you should use

 <span data-ng-bind="name"></span> 

How to escape Html in Angular js

Points To Remember


  • You need to use SCE to render html as it is on the page.
  • There are two ways to use sce either you use it in the angular controller to prevent escape html or you can create a filter to do this where ever you need it.
  • Using it with a filter is a much better way to do so, if you need to do it at multiple places.

Following Plunker example shows how you can prevent escaping of Html




Prevent Escape Html from angularjs Controllers

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>

<body ng-app="demo">
<div ng-controller="home">
  Original Text : {{text}}<br/><br /><br />
  EscapedText   : <span ng-bind-html="text"></span>

</div>

<script>
var app = angular.module("demo",[]);

app.controller('home', function ($scope, $sce) {
    $scope.text = $sce.trustAsHtml("hi this is a <b>demo text</b> <br> <a href='#'>This is a link</a>");
});


</script>

</body>
</html>

Using this method you can prevent escape any value and display it as html.

Prevent Escaping Html using angularjs Filter

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>

<body ng-app="demo">
<div ng-controller="home">
  Original Text : {{text}}<br/><br /><br />
  EscapedText   : <span ng-bind-html="text | escapeHtml"></span>

</div>

<script>
var app = angular.module("demo",[]);

app.filter('escapeHtml', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});

app.controller('home', function ($scope) {
    $scope.text = "hi this is a <b>demo text</b> <br> <a href='#'>This is a link</a> ";
});


</script>

</body>
</html>

The above code will give the following output.

Using this method you can show the render the html using the filter escapeHtml wherever needed. 
View and Download from Plunker
Subscribe to: Posts (Atom)