I have text like below which comes from JSON
<div><div>All are lucky and contect is like
I want this to be displayed properly when rendered. How do i do this.
<p>{{bodydata}}</p>
you can use $sce (Strict Contextual Escaping) for displaying HTML encoded characters
function myCtrl($scope,$sce){
$scope.html = $sce.trustAsHtml('<div><div>All are lucky and contect is like');
}
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<span ng-bind-html="html"></span>
</div>
</body>
</html>
Hope it works for you :)
Related
I'm new to AngularJS.
I started to write a basic code, but the result doesn't give me as expected. The result give me as 10+20={{ 10+20 }}. But instead I need to see 10+20=30
Here is what I tried.
<!DOCTYPE html>
<html>
<head>
<script src="lib/angular.min(2).js"></script>
</head>
<body data-ng-app>
<div>
10+20={{ 10+20 }}
</div>
</body>
</html>
I'm using eclipse. The angular.min(2).js file is in lib folder under WebContent. The HTML page is under WebContent folder.
Check your angular.js script file is loading properly by looking at the network tab. The following works fine.
DEMO
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body data-ng-app>
<div>
10+20={{ 10+20 }}
</div>
</body>
</html>
Remove WebContent from the URL. If your html file is in WebContent directory, your URL should be
<script src="lib/angular.min(2).js"></script>
have you tried to use the script in js like this:
<body ng-app="main">
10+20={{10+20}}
</body>
<script>
var app=angular.module("main",[])
</script>
Is there anyway to show skeleton (empty boxes- if I need to load some images and text from background using services) while loading data from api services so that user get a feeling something is happening over instead of showing empty page and dump data once ready.
You can use a simple ng-show, and a loaded variable.
ie
<div ng-show="Controller.loaded"></div>
$scope.loaded = false;
$http.get(...)
.then(...{
$scope.loaded = true;
})
you need ngCloak
there is a plunker however it's too fast to be noticed:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ng-cloak-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="">
<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2">{{ 'world' }}</div>
</body>
</html>
try it on your project and see if it helps
I am learning angular.. I tried to run a small example,but wasn't able to render correct output.Can anybody help?
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-app='app' ng-controller='MainController as main'>
<div class='container'>
<h1>{{ title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
</div>
</body>
</body>
</html>
app.js
angular.module('app', []);
angular.module('app').controller("MainController", function($scope){
$scope.title = 'AngularJS Nested Controller Example';
});
angular.module('app').controller("SubController", function(){
this.title = 'Sub-heading';
});
I am not able to figure out why angular variables are getting displayed as normal text instead of its assigned value. kindly help...
It looks like you are missing a link to your app.js file.
Just a tip when referencing your .js files, make sure you reference any javascript which uses Angular AFTER the line where you reference angular.js
So your references should look something like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script> <!-- this is the one you are missing -->
Please, plunkr
It works
<h1>{{main.title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
I'm copying my code exactly from an egghead.io tutorial but it isn't working. The angular expression isn't posting to the view properly (it posts with the {{}} rather than evaluating). It works if I remove ng-controller from the <body> and the value "app" from ng-app in the <html> so I can't figure out where to pinpont the problem. I've tried moving the script for the angular module/controller all over the html page (header, bottom of page, etc.) and no luck.
As a side question I'm wondering if Stackoverflow is the proper place to post this. Supposedly you're not supposed to use the 'code-review' tag and reviews of "other-wise working code" belongs on codereview.stack. My code is working sooo...
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
angular.module("app", [])
.controller(FirstCtrl, function FirstCtrl()[
var first = this;
first.greeting = "First";
])
</script>
</head>
<body ng-controller="FirstCtrl as first">
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">
{{first.greeting}} {{World}}
</div>
</body>
</html>
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
angular.module("app", [])
.controller("FirstCtrl", [ function () {
var first = this;
first.greeting = "First";
}
])
</script>
</head>
<body ng-controller="FirstCtrl as first">
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">
{{first.greeting}} {{World}}
</div>
</body>
</html>
I made a slight change to your code.
The Controller name needed double qoutes around it see "FirstCtrl" also you had a missing square bracket and closing bracket. Copy and past the above code it should work.
It works for me. :)
Your copying went wrong somewhere , controller name should be a string
Change:
.controller(FirstCtrl...
to
.controller('FirstCtrl'...
You should have seen errors thrown in console to give you clues about this
<!DOCTYPE html>
<html ng-app="">
<head>
<link rel="stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-controller="userCtrl">
<div class="container">
<div ng-include="'myUsersList.html'"></div>
<div ng-include="'myUsersForm.html'"></div>
</div>
</body>
</html>
I have the two files 'myUserList.html' and 'myUsersForm.html' in the same folder as this index file. It is still not loading the two 'html pages' one below other. I am getting a blank page. Is anything missing???
And also don't miss to initialize model.
angular.module('MyApp', []);