I'm a newbie with AngularJS. I used it yesterday for the first time (loving it!), so I apology if this is a dumb question.
I'm looping through a set of data called "leagues" mapping my HTML template with no issues. The data for the 3 leagues, including the logo appears correctly, however, the browser console keeps telling me the 3 logos doesn't exist (like the mapping hasn't taken place yet...)
Any ideas why is this happening? Thanks in advance!
Error:
HTML:
<!doctype html>
<html ng-app id="ng-app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div id="choose-league" class="section row">
<div ng-repeat="league in leagues">
<div class="col-md-4 league" ng-click="getTeams(league.abbr)">
<img id="{{league.id}}" src="{{league.logo}}" alt="{{league.id}}">
</div>
</div>
</div>
</body>
</html>
JavaScript (AngularJS):
function dataController ($scope) {
// Set of leagues we want data from
$scope.leagues = [
{id: 'champions', abbr: 'uefa.champions', logo: '/img/champions-logo.png'},
{id: 'liga', abbr: 'esp.1', logo: '/img/liga-logo.png'},
{id: 'premier', abbr: 'eng.1', logo: '/img/premier-logo.png'}
];
}
You should use the ng-src directive instead of the src attribute on your images. The purpose of this directive is addressing precisely the issue you're experiencing.
[EDIT]
As per the question WHY this is happening, the HTML is parsed verbatim (with the curly brackets) before angular.js kicks in and does its magic, making the browser complain about an invalid image url under the src attribute.
Related
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 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
I am trying to display a plain html/css loading spinner on first load in my Angular APP. The spinner code is included in my index.html.
However, the dom seems not to be rendered until my angularjs APP starts kicking in, causing a very lengthy display of a white screen until this finally happens. Is there any way to prevent that?
I would like to understand how to load my plain html/css spinner right after the css code in the head is done loading so as to improve user experience.
Test on webpagetest.org seem to confirm this diagnosis (the /settings, /introductions, /menus lines are all calls to an external API done by an AngularJS service before render):
Here is a simplified version of my build code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title ng-bind="($title || 'Home') + ' - WalktheChat'">WalktheChat</title>
<link rel="stylesheet" href="styles/lib.css">
<link rel="stylesheet" href="styles/app.css">
</head>
<body>
<div id="base-container" ng-controller="Shell as main">
<div ng-include="'app/layout/header.html'"></div>
<div id="content" ui-view ng-cloak autoscroll="true"></div>
<div ng-include="'app/layout/footer.html'"></div>
</div>
<!-- This is the spinner I would like to display on first load -->
<div ng-show="::false" class="spinner-container">
<div class="spinner sk-spinner sk-spinner-pulse"></div>
</div>
<script src="js/lib.js"></script>
<script src="js/app.js"></script>
</body>
</html>
whatever the complexity of your application,all your controllers are within the same angular application, all scopes within the same application inherits from the same root, whatever you define on the $rootScope will be available to all child scopes.
we have two ways to resolve this problem:
use $broadcast(), $emit() and $on() that facilitate event driven publisher-subscriber model for sending notifications and passing data between your controllers.(professional solution)
declare $rootScope variable and watching changement.(simple way)
It turns out the problem was coming from "render-blocking javascript", I had to add the "async" tag to my JS to fix it.
When adding async to both my lib.js and app.js, I had an issue with app.js loading before angular scripts were loaded (thus causing the APP to throw an error). In order to solve this issue, I combined my lib.js and app.js into one single file and then added the async tag.
My final build code looks like that (the magic happens on the final "script" tag):
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title ng-bind="($title || 'Home') + ' - WalktheChat'">WalktheChat</title>
<link rel="stylesheet" href="styles/lib.css">
<link rel="stylesheet" href="styles/app.css">
</head>
<body>
<div id="base-container" ng-controller="Shell as main">
<div ng-include="'app/layout/header.html'"></div>
<div id="content" ui-view ng-cloak autoscroll="true"></div>
<div ng-include="'app/layout/footer.html'"></div>
</div>
<!-- This is the spinner I would like to display on first load -->
<div ng-show="::false" class="spinner-container">
<div class="spinner sk-spinner sk-spinner-pulse"></div>
</div>
<!-- This app.js now also contains lib.js from my question !-->
<script src="js/app.js" async></script>
</body>
</html>
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 was tried to use ng-if inside ng-repeat but it seems ng-if is not working properly.
I referred couple of forum links in StackOverflow but it doesn't help me.
I'm using angular version 1.3.0
HTML
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="/js/lib/angular-1.3.0/angular.js"></script>
<script src="/js/lib/controllers/ifRepeatController.js"></script>
</head>
<body>
<div ng-repeat = "data in comments">
<div ng-if="data.type == 'hootsslllll' ">
//differnt template with hoot data
</div>
<div ng-if="data.type == 'story' ">
//differnt template with story data
</div>
<div ng-if="data.type == 'article' ">
//differnt template with article data
</div>
</div>
</body>
</html>
Controller
var myIfRepeat = angular.module('myIfRepeat',[]);
myIfRepeat.controller('IfRepeatController', function ($scope,$http) {
$scope.comments = [
{"_id":"1",
"post_id":"1",
"user_id":"UserId1",
"type":"hoot"},
{"_id":"2",
"post_id":"2",
"user_id":"UserId2",
"type":"story"},
{"_id":"3",
"post_id":"3",
"user_id":"UserId3",
"type":"article"}
];
});
As per the first condition, the first line should not get displayed (Below find the screenshot for more reference), however the line is getting displayed.
the reference link : Using ng-if inside ng-repeat?
Now i added the controller in the div as advised, however i'm facing the same issue
Below i have given the screenshot for reference. Kindly help me how to solve this issue and please let me know in case of further clarifications.
Below provided screenshot on the working model used angular 1.3 version. If we use angular 1.0.2 the nf-if will not work properly (below provided the screenshot)
Screen shot for angular version 1.0.2
I'm not having issues with this working. Tweaked your code to fit into a fiddle
<div ng-app ng-controller="IfRepeatController">
<div ng-repeat="data in comments">
<div ng-if="data.type == 'hootsslllll' ">type={{data.type}}//differnt template with hoot data</div>
<div ng-if="data.type == 'story' ">type={{data.type}}//differnt template with story data</div>
<div ng-if="data.type == 'article' ">type={{data.type}}//differnt template with article data</div>
</div>
</div>
function IfRepeatController($scope) {
$scope.comments = [{
"_id": "1",
"post_id": "1",
"user_id": "UserId1",
"type": "hoot"
}, {
"_id": "2",
"post_id": "2",
"user_id": "UserId2",
"type": "story"
}, {
"_id": "3",
"post_id": "3",
"user_id": "UserId3",
"type": "article"
}];
}
Note: reference angular 1.3.0 here: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js
You are missing ng-controller:
<body ng-controller="IfRepeatController">
I have a similar issue. I cannot get ng-if to work correctly. The only way to get it to work is to evaluate the ng-if to the not operator (ng-if="!variableValue"). Is this an AngularJS version issue?
This in not AngularJs Version issue, If variableValue has boolean it will work fine.
Sample code like this:
$scope.variableValue = true; in Controller
"<"div ng-if="!variableValue" ">"Don't show content"<"/div">"// This DIV doesn't show the content
"<"div ng-if="variableValue" ">"show content"<"/div">" // This DIV will show the content