I am trying to use this plugin http://prrashi.github.io/rateYo/ and for some reason when my artistpage.html page is served up the stars aren't appearing. I know the page is being served up because all other elements in the view appear. Something else that is strange is that when I put <div id="rateYo"></div> in the index.html the plugin works. So I am not really sure why its not working when the view is injected into <div ng-view></div>. Assuming my paths are correct, what could be the problem?
index.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="./lib/jquery.rateyo.css"/>
</head>
<body ng-app='LiveAPP'>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./lib/jquery.rateyo.js"></script>
<script src="/controllers/mainCtrl.js"></script>
<script src="/controllers/signUpCtrl.js"></script>
<script src="/controllers/artistCtrl.js"></script>
<script src="/routes.js"></script>
<script src="./js/stars.js"></script>
</body>
</html>
artistpage.html
<h1>This is a title</h1>
<div id="rateYo"></div>
routes.js
angular.module('LiveAPP', ['ngRoute',
'LiveAPP.main',
'LiveAPP.signUp',
'LiveAPP.artist'])
.config(function($routeProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl : '/home.html',
controller : 'mainCtrl'
})
.when('/signup',{
templateUrl : '/signup.html',
controller : 'signUpCtrl'
})
.when('/artist',{
templateUrl : '/artistpage.html',
controller : 'signUpCtrl'
})
});
stars.js
$(function () {
$("#rateYo").rateYo({
rating: 3.6
});
});
The code in stars.js is evaluated when the document is ready, but jQuery has no knowledge of Angular replacing the view content in ng-view, so it won't attach the rating plugin to any newly added elements. Generally, you want to wrap jQuery plugins in Angular directives so that you can use them the "Angular way." For example:
app.directive("rateYo", function() {
return {
restrict: "A",
scope: {
rating: "="
},
template: "<div id='rateYo'></div>",
link: function( scope, ele, attrs ) {
$(ele).rateYo({
rating: scope.rating
});
}
};
});
Which would be used like this in your view:
<!-- assuming $scope.myRating equals the rating you want to display -->
<div rate-yo rating="myRating"></div>
Code above is untested, but it should give you the gist of it.
Related
I have been trying to make a angularjs application where I want to route to a different html page on a button click. But is not working for some unknown reasons.
My html code
<!DOCTYPE html>
<html ng-app="app">
<head>
<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.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Controller">
<h1>Plunkr Example</h1>
<button ng-click="changeview()">ClickMe</button>
<h1>MainPage</h1>
</body>
</html>
My Code
var app = angular.module("app", ['ngRoute'])
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/Details', {
templateUrl: 'details.html'
}).
when('/Main', {
templateUrl: 'main.html'
}).
otherwise({
redirectTo: '/Main'
});
}]);
app.controller("Controller", function($scope,$routeParams,$location){
//$scope.ProductId = $routeParams.id;
$scope.changeview = function () {
console.log('in function changeview');
$location.path('/Details');
}
})
Here is my plunkr
Please help.
You have missed to add the ng-view directive. It needs to be included for the routing to be able to rendered the templates
<div ng-view></div>
Working plunker
You need to have ng-view directive in index.html
<div class="viewWrapper">
<div ng-view></div>
</div>
WORKING DEMO
I am trying to use this jQuery Plugin Date and Time Picker in my Angularjs project to receive date from a user in a form.
<html>
<head>
<title>Datetime picker</title>
<link href="bootstrap.min.css" rel="stylesheet" >
<link href="jquery.datetimepicker.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<input type="text" id="datetimepicker" class="form-control">
</form>
</div>
<script src="jquery-3.1.1.min.js" ></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.datetimepicker.full.js"></script>
</body>
<script type="text/javascript">
$('#datetimepicker').datetimepicker();
</script>
</html>
So, when I click on the form, the datetime widget appears quite alright. At this point I have not used any Angularjs.
Now I want to do this with Angularjs and this is the attempt I've so far made:
<html ng-app="myApp">
<head>
<title>Datetime picker</title>
<link href="bootstrap.min.css" rel="stylesheet" >
<link href="jquery.datetimepicker.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-view></div>
<script src="angular.min.js" ></script>
<script src="ngRoute.js" ></script>
<script src="app.js" ></script>
<script src="jquery-3.1.1.min.js" ></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.datetimepicker.full.js"></script>
</body>
<script type="text/javascript">
$('#datetimepicker').datetimepicker();
</script>
</html>
here is my app.js file:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/datetime', {
templateUrl: 'admin/date.html',
controller: 'DateTimeController'
})
.otherwise({
redirectTo: "/"
});
});
myApp.controller('DateTimeController', ["$scope", function($scope){
}]);
according to my routes, when I get /datetime in the url, the date.html partial is rendered; Here is the code for the date.html partial:
<div ng-controller="DateTimeController">
<input type="text" id="datetimepicker" class="form-control">
</div>
When I did this, I expected the date/time widget to appear but it didn't. So I began searching for solutions. The best solution I found suggested that I use angular directives. According to this solution, I made the following changes:
I created a custom directive date-time and here is the code in my app.js file:
// ...
myApp.directive('dateTime', function () {
return {
template:'<input type="text" id="datetimepicker" class="form-control">',
restrict: 'E',
link: function (scope, element, attr) {
$('#datetimepicker').datetimepicker();
}
};
});
and the date.html partial now looked like this:
<div ng-controller="DateTimeController">
<date-time></date-time>
</div>
At this point I was confident that it will work but it didn't.
What am I doing wrong? Is there a better way of doing this?
Thanks for any help.
Hard to say exactly what is wrong because there seem to be multiple iterations of your code here, and it's not clear how all of them have changed over time. Having said that, there's no reason that this shouldn't work-- it's working fine for me in this Plunker. You should be able to take a look and see what you're doing differently.
var app = angular.module('plunker', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/datetime', {
templateUrl: 'date.html',
controller: 'DateTimeController'
})
.otherwise({
redirectTo: "/"
});
});
app.directive('dateTime', function () {
return {
template:'<input type="text" id="datetimepicker" class="form-control">',
restrict: 'E',
link: function (scope, element, attr) {
$('#datetimepicker').datetimepicker();
}
};
});
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
app.controller('DateTimeController', function() {
});
I'm trying to get the Animsition plugin working in an Angular project.
The loader is stuck and the view doesn't load.
The jQuery plugin is in a directive, and works as separate HTML files without Angular routing. But I want to get it to work WITH Angular Router.
// In the directive, defaults were:
loadingParentElement : 'body',
overlayParentElement : 'body',
(and it worked fine without router + separate full html files with head/body/script tags to sources. But as separate views, I changed each view to have parent main elements, assuming they acted as parent body elements. But still didn't work.
app.js
var app = angular.module('MyApp', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'AppCtrl',
})
.when('/work', {
templateUrl: 'partials/work.html',
controller: 'AppCtrl',
})
.otherwise({
redirectTo: '/'
});
});
// the directive
app.directive('ngAnimsition', [function() {
return {
restrict: 'A',
scope: {
'model': '='
},
link: function(scope, elem, attrs) {
var $animsition = $(elem);
$animsition.animsition({
inClass: 'fade-in',
outClass: 'fade-out',
inDuration: 1500,
outDuration: 800,
linkElement: '.animsition-link',
loading: true,
loadingParentElement: 'main', //animsition wrapper element
loadingClass: 'animsition-loading',
loadingInner: '', // e.g '<img src="loading.svg" />'
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: [ 'animation-duration', '-webkit-animation-duration'],
overlay : false,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'main',
transition: function(url) {
window.location.href = url;
}
});
}
}
}]);
index.html file
<!DOCTYPE html>
<html class="no-js" ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Getting Animsition jQuery + Angular Router</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS-->
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="js/animsition/animsition.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-controller="AppCtrl">
<!-- ng-router -->
<div ng-view></div>
<!-- tried below, but only does animsition on first load, not changing between views -->
<!-- <div ng-animsition class="animsition">
<!-- <div ng-view></div>
<!-- </div>
<!-- jquery -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/animsition/jquery.animsition.min.js"></script>
<!-- Angular -->
<script src="js/angular/angular.min.js"></script>
<script src="js/angular/angular-router.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Partial home.html
<main>
<div ng-animsition class="row container animsition">
<nav>
<a ng-href="#/" class="active animsition-link">Home</a>
<a ng-href="#/work" class="animsition-link">Work</a>
</nav>
<div>
<h1>Home</h1>
</div>
</div>
</main>
Partial work.html
<main>
<div ng-animsition class="row container animsition">
<nav>
<a ng-href="#/" class="animsition-link">Home</a>
<a ng-href="#/work" class="active animsition-link">Work</a>
</nav>
<div>
<h1>Work</h1>
</div>
</div>
</main>
I got this problem also, and i make it work by using this code, you can tried it
transition: function(url){
if(url){
window.location.href = url;
}
else{
location.reload();
}
}
I am trying to creae an application in angular using ng-route but i cannot get it to work.
I did search the issue and tried suggestions like to move my ng-app to but nothing seems to work.
I have added a plunker link below
http://plnkr.co/edit/a8VIRzloIMqANK4f8YXb?p=preview
Can someone help
adding the code here too
index html
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script type="text/javascript" src="dist/ng-table.min.js"></script>
<link rel="stylesheet" href="dist/ng-table.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
<link href="main.css" rel="stylesheet" />
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="DemoCtrl.js"></script>
</head>
<body ng-controller="DemoCtrl" ng-app="stockApp">
<header>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<h1 class="stockHeader">Stock App</h1>
<a class="blog-nav-item pull-right" href="#/">Login</a>
<a class="blog-nav-item pull-right" href="#/stock">Stock</a>
<a class="blog-nav-item active pull-right" href="#/addTools">Add Tools</a>
</nav>
</div>
</div>
</header>
<div ng-view></div>
</body>
</html>
app.js
var sampleApp = angular.module('stockApp', ['ngRoute']);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'login.html',
controller: 'DemoCtrl'
}).
when('/stock', {
templateUrl: 'stockStatus.html',
controller: 'DemoCtrl'
}).
when('/addTools', {
templateUrl: 'addTools.html',
controller: 'DemoCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
DemoCtrl.js
var app = angular.module('stockApp', ['ngTable']).
controller('DemoCtrl', function($scope) {
$scope.stock="In Stock!"
})
other than these have 3 partials.
See this fork of your original plunker where the code segments below have been updated: http://plnkr.co/edit/91XYMEC85Shgu6kQSrty?p=preview
// DemoCtrl.js
var app = angular.module('controllers', []).
controller('DemoCtrl', function($scope) {
$scope.stock="In Stock!"
})
// app.js
var sampleApp = angular.module('stockApp', ['ngRoute', 'controllers']);
First, your controller code was re-initializing the stockApp module by passing in dependencies. If you need separate depedencies for your controllers, create them as a separate module and make your app dependent on that module.
Second, I updated the versions of angular and angular JS. Conflicting versions can cause issues as per this prior answer: Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
One additional thing to check on... make sure you're loading your angular js files (controllers, services, factories, etc) in the correct order. For example, if a controller uses a service, the service needs to be loaded into the DOM before the controller.
Additionally, make sure that none of your services or factories are re-initializing the app. Your code should NOT look like this:
angular.module('app', [])
.service('TrxnService', function () {
//code here
})
But instead, it should look like this (without the brackets)...
angular.module('app')
.service('TrxnService', function () {
//code here
})
NOTE FOR NEWBIES: replace 'app' with whatever you named your app in your top level module declaration.
Ive just started to learn AngularJS and im trying to use angular-route but can't get it to work.
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="fantasySportsApp">
<head>
<title></title>
</head>
<body>
<link type="text/css" rel="stylesheet" href="Content/Style/bootstrap.min.css"/>
<!--Placeholder for views-->
<div data-ng-view="">
Hejsan
ge
</div>
<script src="Content/Scripts/jQuery-1.11.0.js"></script>
<script src="Content/Scripts/jquery-ui.js"></script>
<script src="Content/Scripts/angular.min.js"></script>
<script src="Content/Scripts/angular-route.js"></script>
<script src="App/app.js"></script>
<script src="Content/Scripts/bootstrap.min.js"></script>
</body>
</html>
my app.js looks like this:
var fantasySportsApp = angular.module('fantasySportsApp', ['ngRoute']);
fantasySportsApp.config(function($routeProvider) {
$routeProvider.when('/login', {
controller: 'userController',
templateUrl: 'App/partials/login.html'
})
.when('/startPage', {
controller: 'startPageController',
templateUrl: '/App/partials/startPage.html'
})
.otherwise({ redirectTo: "/index" });
});
when i start my page ill get to this url: localhost:26283/index.html#/index but it wont show me anything. the page is empty. If i inspect the html i find this in the code: "<-- ngView: -->" think indicates that the partial view that i try to route to is supposed to start but there is nothing under the tag.
What could be the problem?