I'm working on a angularjsproject and I would like to add turbolinksto make the navigation on my WebSite faster. When I add turbolinksto my project, angularjsis not working.
I did an example on Plunker here.
I have two pages, index.html and products.html that look like that:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
<script src="turbolinks.js"></script>
</head>
<body ng-controller="MainCtrl">
<nav>
<ul>
<li>
Home
</li>
<li>
Products
</li>
</ul>
</nav>
<p>Hello {{name}}!</p>
</body>
</html>
And a javascriptfile:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.products = 'Products';
});
You can see when turbolinksis added, the {{name}} and {{products}} values are not displayed.
How can I fix this issue?
Related
I want to download a file using angular js...
I got one link
[It has code for downloading a file using Plunker][1[1]: Download a file with AngularJS
angularjs/28873580#comment46050222_28873580
when i am trying to download it it says server not found...so i provided another link to download it, then it says download failed..no file there but file is there..
what i am doing wrong!!!!! controller
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.fileHref = 'http://en.unesco.org/inclusivepolicylab/sites/default/files/dummy-pdf_2.pdf';
});
front view
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x"
src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14">
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<a ng-href="fileHref" download="yourFilename">Download</a>
</body>
</html>
this simplest angular page may help you,
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="test" ng-controller="myCtrl">
<a ng-href="{{fileHref}}" >My PDF</a>
<script>
angular.module('test',[]).controller('myCtrl', function($scope) {
$scope.fileHref = 'https://en.unesco.org/inclusivepolicylab/sites/default/files/dummy-pdf_2.pdf';
});
</script>
</body>
</html>
I am using google recaptcha . but it is not displaying at the time of pageload . But when i am using ctrl+R is displays. So what should i do to overcome this problem.
Thanks in advance.
Here is my code
var app = angular.module('plunker', ['vcRecaptcha']);
app.controller('MainCtrl', function($scope ) {
$scope.name = 'World';
$scope.respone1 = '';
$scope.respone2 = '';
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- <script src="//www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer></script> -->
<script src="angular.js"></script>
<script src="angular-rechapcha.js"></script>
<script src="app.js"></script>
<script>
$(window).load(function () {
window.location.href=window.location.href
});
</script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div vc-recaptcha key="'6LdexkAUAAAAAHJjHft19DekOjH0XdNsFjw1mdNm'" ng-model="respone1"></div>
<!-- <div vc-recaptcha key="'6LdexkAUAAAAAHJjHft19DekOjH0XdNsFjw1mdNm'" ng-model="respone2"></div> -->
<pre>respone1 = {{respone1 | json}}</pre>
<pre>respone2 = {{respone2 | json}}</pre>
</body>
</html>
I want to achieve something like this :
This is what I have so far:
You can see in my case the month is repeating. I want to have the months Group by.
Here is my controller code for getlist:
Event.getList().then(function(data){
$scope.events = data.events;
$rootScope.events = data.events;
});
For live https://plnkr.co/edit/jUhSXJJEAqKnJz1H3kiv?p=preview
HTML :
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul ng-repeat="(key,x) in groupevent">
{{key|date:'MMMM yyyy'}}
<li ng-repeat="y in x |orderBy:'start_date'">
<span>{{y|json}}</span>
</li>
</ul>
</body>
</html>
Javascript:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.event = [
{id:'1',ex:true,end_date:'2017-08-31',start_date:'2017-08-29'},
{id:'15',ex:true,end_date:'2017-05-18',start_date:'2017-05-15'},
{id:'18',ex:true,end_date:'2017-06-12',start_date:'2017-06-09'},
{id:'51',ex:true,end_date:'2017-08-01',start_date:'2017-08-01'},
];
angular.forEach($scope.event,function(value,key){
value.groupdate = value.start_date.substring(0,7)+'-01';
});
$scope.event = _.orderBy($scope.event, ['start_date'], ['asc'])
$scope.groupevent = _.groupBy($scope.event,'groupdate');
});
I know I can set html src tag like <img ng-src="{{phone.imageUrl}}">. But how can I set an id tag like <span id="sourceId::{{post.id}}" class="count"></span> ?
I tried <span id="{{ 'sourceId::'post.id }}" class="count"></span> but it didn't work.
It worked for me.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<span id="{{name}}" class="count">Jeinsh</span>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
here is working plunk => link
Inspect the element in developer tool on span and you will get updated id there.
As #karaxuna said, the following should work
id="sourceId::{{post.id}}"
Or doing the string concatenation inside the {{}} with a +
id="{{'sourceId::' + post.id}}"
I have the following in my plunker
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="//code.jquery.com/jquery-2.1.1.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<accordion close-others="false">
<accordion-group heading="Company" ng-click="toggleOpen()">
<div class="row" data-ng-repeat="item in companyValues">
<div class="col-xs-6">
<input name="companyFilter" type="radio" value="{{item.value}}" id="{{item.name}}-filter-radio" ng-model="userData.companyFilter" ng-change="saveUserPreferences()" />
</div>
<div class="col-xs-6 pull-text-left">{{item.name}}</div>
</accordion-group>
</accordion>
</body>
</html>
However, when I try to run I get a 404 on template/accordion/accordion-group.html. Any ideas?
Your markup loads two different versions of ui.bootstrap.
A version with templates for components pre-loaded in Angular.js' $templateCache service.
A version with no pre-loaded templates for if you want to tweak control looks.
Since version #2 is loaded 2nd, it appears that all the pre-loaded templates are not available.
Solution: Delete the line:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
Example: http://plnkr.co/edit/JyNu2hggAFt33hTvfoXo?p=preview
When you use angular.ui you also have to include angular.ui.tpls in your dependencies like so:
var app = angular.module('myApp', ['ui.bootstrap', 'ui.bootstrap.tpls']);