InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

AngularJS

  • Hello world
  • ng-init
  • ng-model
  • Controller to increment value
  • Controller - basic clock
  • Controller - ajax
  • date filter
  • include template (url)
  • include template (inline)
  • tabs using ng-switch
  • conditional style using ng-style
  • animation with ng-class
  • ng-if vs ng-hide/ng-show

AngularJS Directives

  • ng-bind
  • ng-bind-html
  • ng-bind-template
  • ng-blur
  • ng-change
  • ng-checked
  • ng-class
  • ng-class-even and ng-class-odd
  • ng-click
  • ng-cloak
  • ng-dblclick
  • ng-disabled
  • ng-focus
  • ng-hide
  • ng-href
  • ng-if
  • ng-list
 
  • Home
  • > Tutorials
  • > Javascript
  • > AngularJS

AngularJS ng-cloak examples

on Jul 25, 2016

AngularJS ng-cloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. It can be used in two ways

  1. Using ng-cloak attribute
    <div ng-cloak>{{ 'hello' }}</div>

  2. Using class ng-cloak
    <div class="ng-cloak">{{ 'hello' }}</div>

For the best result, the angular.js script must be loaded in the head section of the html document.

Example

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

<div ng-app="myApp" ng-controller='MyCtrl'>
  <input ng-model="name" ng-init="name='John'"><br>
  <div ng-cloak>name: {{name}}</div>
</div>


<script>
  var module = angular.module('myApp', []);
  module.controller('MyCtrl', function($scope) {});
</script>
refresh done
try it online

Suggested posts:

  1. AngularJS controller ajax examples
  2. AngularJS – display html without escaping using ng-bind-html
  3. AngularJS ng-href example
  4. AngularJS simple controller tutorial to increment a value
  5. AngularJS ng-if – conditional dom tree
  6. AngularJS ng-dblclick examples
  7. AngularJS ng-bind example
  8. AngularJS ng-click examples
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged AngularJS, Javascript, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress