I am trying to run this program and I see no output. Can you please let me know what I am missing here. Thanks in advance.
<html>
<head ng-app="myApp">
<title>Test</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>
<div my-directive my-url="http://www.google.com" my-click="Click me">
</div>
</body>
<script>
angular.module('myApp',[]).directive('myDirective',function()
{
return
{
restrict : 'AE',
replace : true,
scope :
{
myURL :'#',
myClick : '#'
},
template : '{{myLinkText}}'
};
});
</script>
</html>
It looks like you placed the root of your Angular app in the header and not in the body.
Change the location of the ng-app="myApp" attribute from the head to the body or html elements
<html ng-app="myApp"> <!-- new location -->
<head > <!-- ng-app="myApp" it was here -->
<title>Test</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
In the directive {{myLinkText}} does not exists, it should be renamed for {{myClick}}
some how by spending whole day i am able to display the text and able to click it but failing to redirect to the mentioned URL,i am getting error in console like Refused to display 'https://www.google.co.in/?gfe_rd=cr&ei=kepTWNDiIvLI8Afnp4HIBg' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.you can found the same here in console
Related
I know this question has been asked a bunch of times before, I read through the answers, tried the offered solutions, but I'm still getting the error and I'm not sure why. I stripped my application down to a simple hello world to try and figure out why its happening.
<!--index.html -->
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script type="text/javascript"
src="./controller/MainController.ctrl.js"></script>
</head>
<body >
<div ng-controller="HelloController">
<test-dir/>
</div>
</body>
</html>
//controller/MainController.ctrl.js
var app = angular.module('app',[]);
app.controller("HelloController", function($scope) {
});
app.directive('testDir', function (){
return {
restrict:'E',
replace:true,
template:`template/helloWorld.template.html`
};
});
<!--template/helloWorld.template.html -->
<div>
<h1>hello, is it me you're looking for</h1>
</div>
if you are providing the link to the template file you should use templateUrl not template.
If you want to use template you have to write
"template":"<div>...</div>"
Change from template to templateUrl
`template:`template/helloWorld.template.html`
to
templateUrl :template/helloWorld.template.html
I had a Single Page Application developed in angular-js and i need to open a printside under a new url. At present, printtext.html loads its content but on the inside of the index.html. What i want is to load the content of the printtext.html alone without any Content from the index.html. Basically if i click on the link in my index.html i just want to see in the browser the text printtext. And not something like Some headertext which is curretnly the case. Is that possible or do i break the SPA rules? My Main goal is to create a Printsite where i just see the content without any header or footer information. Or should i user ng-hide for this?
I am not including the logic here, but if required will provide.
Index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Myapp</title>
<script src="libs/js/angular.js"></script>
<script src="libs/js/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<h1> Some headertext </h1>
<ng-view></ng-view>
</body>
app.js
var app = angular.module('myapp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/text', {
templateUrl: "template/text.html"
})
.when('/print', { //actually the parameter is /print/:object but i left the logic out here
templateUrl: "Print/printtext.html"
})
}])
text.html
<p> Some text </p>
<a ng-href="#!/print">Print </a> <!-- The right link would be something like #!/print/marc -->
printtext.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ng-app="myapp">
<head><title>
Printview
</title>
<script src="../libs/js/angular.js"></script>
<script src="../libs/js/angular-route.js"></script>
<script src="../js/app.js"></script>
<body>
<p>printtext</p>
</body>
</html>
You directly use target = "_blank" in your anchor tag.
<p> Some text </p>
<a ng-href="#!/print" target="_blank">Print </a> <!-- The right link would be something like #!/print/marc -->
Otherwise, you can create a dynamically custom directive in angular.
custom directive generally uses to set target according to a dynamic condition.
<p> Some text </p>
<a ng-href="#!/print" ng-attr-target="_blank">Print </a> <!-- The right link would be something like #!/print/marc -->
<a ng-attr-target="_blank">
...
</a>
ng-attr-xyz lets you dynamically create #xyz, and if the value is undefined no attribute is created.
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>
<!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', []);
I'm using ng-bind-html to put up some HTML content on my site. The problem is if the content has links, the links open in the same window when clicked. How can I make it open in a new window?
<div ng-bind-html="currentElement.content"></div>
links contained in your currentElement.content should have the attribute target='_blank'
MyLink
if the html content comes from an external source, you could add a filter that parses the html content and adds the target attribute to links
this is a sketch:
return angular.element(htmlContent).find('a').attr('target', '_blank');
more in details
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-sanitize#*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="test" ng-controller="HomeCtrl">
<h1>Test </h1>
<div ng-bind-html="myHtml | addTargetBlank"></div>
</body>
</html>
//script.js
angular.module('test', ['ngSanitize'])
.filter('addTargetBlank', function(){
return function(x) {
var tree = angular.element('<div>'+x+'</div>');//defensively wrap in a div to avoid 'invalid html' exception
tree.find('a').attr('target', '_blank'); //manipulate the parse tree
return angular.element('<div>').append(tree).html(); //trick to have a string representation
}
})
.controller('HomeCtrl', function($scope){
$scope.myHtml = 'test html content 1 click here, test html content 2 click here, test html content 3 click here';
})
;
http://plnkr.co/edit/tpl:JHcBgtJ75fVaqFYQlE4a