I am trying to show a progressive circular symbol using angular-material's directive "md-progress-circular"(https://material.angularjs.org/latest/demo/progressCircular). I have included both angular-material.js as well as angular-material.css file. But still I am not able to see any circular symbol on the view.
The code that I have written in html file is -
<md-progress-circular md-mode="determinate" value="{{host.volumePercentage}}" md-diameter="25"></md-progress-circular>
Thanks in advance.
Here you go! This is straight from their documentation. You got to make sure the determinateValue is appropriately incremented based on whatever event you are waiting for.
var demoApp = angular.module('demo', ['ngMaterial']);
demoApp.controller('demoController', function($interval, $scope) {
});
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<body ng-app="demo">
<div ng-controller="demoController">
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
</div>
</body>
Related
I am relatively new to Angularjs and I am trying to use Syncfusion to implement few diagrams so I started with a simple code using the angularjs CDN provided in their website. But it throws me error. I am not sure what I am doing wrong. I could not find any post related to similar thing in SO or in Syncfusion forum. Can anyone please help me? I am really sorry if incase this is duplicate
This the help doc from their website: Help DOC Syncfusion AngularjS
This is the CDN links page: https://help.syncfusion.com/js/cdn#gsc.tab=0
Following is the code:
<!DOCTYPE html>
<html ng-app="DateCtrl">
<head>
<title>Testing EJAngular</title>
<!--jQuery Starts-->
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
<!--jQuery Ends-->
<!-- Angularjs CDN Starts -->
<script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
<!-- Angularjs CDN Ends -->
<!--EJ Angular Starts-->
<script src="http://cdn.syncfusion.com/18.2.0.44/js/common/ej.widget.angular.min.js"></script>
<!--EJ Angular ENDS -->
</script>
</head>
<body ng-controller="DatePickerCtrl">
<!--Container for ejDatePicker widget-->
<input id="datepick" ej-datepicker e-value="dateValue" e-enableStrictMode="true" />
<script type="text/javascript">
var DateCtrl = angular.module('DateCtrl', ['ejangular'])
DateCtrl.controller('DatePickerCtrl', function ($scope) {
$scope.dateValue = "2/3/2013";
});
</script>
</body>
</html>
Error Messages from console:
Posting this answer as it maybe useful for someone in the future. Few more CDN needs to be added. Here is all CDN:
<link href="http://cdn.syncfusion.com/18.2.0.44/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="http://cdn.syncfusion.com/18.2.0.44/js/web/ej.web.all.min.js"></script>
<!-- Angularjs CDN Starts -->
<script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
<!-- Angularjs CDN Ends -->
<!--EJ Angular Starts-->
<script src="http://cdn.syncfusion.com/18.2.0.44/js/common/ej.widget.angular.min.js"></script>
<!--EJ Angular ENDS -->
This issue generally arises when we haven’t referred the required Syncfusion script files. Check out the AngularJS documentation in the below link.
https://help.syncfusion.com/angularjs/overview
https://help.syncfusion.com/angularjs/accordion/getting-started#create-a-simple-accordion-in-angularjs
check the below link for DatePicker demo.
http://jsplayground.syncfusion.com/a1zdhiii
Check the below links to know more about Syncfusion AngularJS DatePicker.
Behavior : https://help.syncfusion.com/angularjs/datepicker/behavior-settings
Value binding: https://help.syncfusion.com/angularjs/datepicker/data-and-event-binding
API reference: https://help.syncfusion.com/api/js/ejdatepicker
We can also raise queries in Syncfusion forums.
https://www.syncfusion.com/forums
I am very new to angular-Js. I am trying to use the bootstrap angular UI as part of my learning I have taken code from https://angular-ui.github.io/bootstrap/.
the accordian module. http://imgur.com/h1IFF0g
But on page load I am getting below error for each accordion component.
VM5120:27 TypeError: $q.resolve is not a function at collapse (ui-bootstrap-tpls-1.3.3.js:66)
at Object.fn (ui-bootstrap-tpls-1.3.3.js:102)
at l.$digest (angular.js:14243)
at l.$apply (angular.js:14506)
at l (angular.js:9659)
at S (angular.js:9849)
at XMLHttpRequest.D.onload (angular.js:9790)
I am declaring dependency in my app.js file as
var mainApp = angular.module("myApp", ['ngRoute', 'myApp.view1','myApp.view2', 'myApp.login', 'ui.bootstrap']);
I have downloaded the ui-bootstrap-1.3.3.js and included them in my project as below.
<script src = "https://connect.facebook.net/en_US/sdk.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="ui-bootstrap-1.3.3.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
Could someone please guide me in understand where I am doing wrong.
Please let me know if I need to provide any further information.
I could resolve it by changing the angular js version to 1.4.3.
https://github.com/angular-ui/bootstrap/issues/5490 helped me.
Thank you!!
Okay, I have a pretty basic site I'm working on that I'm now modifying to use a MEAN stack and thus I'm getting started with Angular. I'm using Scotch.io's MEAN starter App as a base to get started. So far, it's been pretty easy, I've got key components in templates and added them using ng-include.
HTML
<title>First Angular Page</title>
<!-- CSS -->
<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css"> <!-- Font Awesome -->
<link href='http://fonts.googleapis.com/css?family=Quicksand:700|Montserrat:700|Open+Sans|Sniglet:400,800' rel='stylesheet' type='text/css'> <!-- Google Fonts -->
<link rel="stylesheet" href="css/mainStyles.css"> <!-- Stephie's styles -->
<!-- JS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<!-- ANGULAR CUSTOM -->
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/NerdCtrl.js"></script>
<script src="js/services/NerdService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="NerdController">
<!-- NAVAGATION -->
<div ng-include='"templates/navagation.html"'></div>
<div id="site-canvas">
<!-- HEADER -->
<div ng-include='"templates/header.html"'></div>
<div id="page-content">
<!-- ANGULAR DYNAMIC CONTENT / UNIQUE PAGE FRAGMENT -->
<div ng-view></div>
</div> <!-- #page-content -->
<!-- FOOTER -->
<div ng-include='"templates/footer.html"'></div>
</div><!-- #site-canvas -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/menu.js"></script>
</body>
</html>
But now I've got problems, my menu.js file isn't working. It consists pretty much entirely of add/removeClass methods using jQuery.
Here's an old Code Pen of the site I'm working on in basic HTML to demostrate how it's supposed to work.
http://codepen.io/StuffieStephie/pen/BNqJVX
function toggleNav() {
if ($('#drawer').hasClass('show-nav')) {
$('#drawer').removeClass('show-nav');
$('#nav-icon').removeClass('open');
$("nav li.gotsMenus").removeClass("showSub");
} else {
$('#drawer').addClass('show-nav');
$('#nav-icon').addClass('open');
$("nav li.gotsMenus").removeClass("showSub");
}
}
$('#closeButton, #site-canvas, nav li li').click(function() {
$('#drawer').removeClass('show-nav');
$('#nav-icon').removeClass('open');
$("nav li.gotsMenus").removeClass("showSub");
});
But this doesn't work with my Angular templates. (Or at least, the click and hover functions don't. The scroll function that auto hides the header still works mysteriously ...? So it's kinda working)
So.. where to begin? I'm sorry if this is a really dumb question but I'm new to Angular and I've been spinning my wheels for a couple of hours now. Do I put this in a directive or controller or module or what? Do I have to rewrite this in vanilla js? And even if I did, I have other jQuery dependencies (I have an image gallery powered by Tumblr's JSON API that uses a jQuery-dependent lightbox, among other things).
If someone can just point me in the right direction I would be so grateful ;_;
Sounds like a race condition, when the script executes, there might not a #menuHeader in the DOM. You may need to add the code to the load callback using a delegate. So like:
$("#menuHeader").on('load', function () {
// Put menu.js code here
});
I would put a break point and figure out what's actually in the DOM when this executes. And basically figure out what it takes to load up the DOM first, then run the script.
I have just started developing with AngularJS a few days ago, and this issue really bugs me.
I keep getting this error:
Error: ng:areq
Bad Argument
Argument 'NewStudentCtrl' is not a function, got undefined
All other controllers are working since I am using them in other files, just NewStudentCtrl won't work.
I have tried a lot of different things, only one worked: defining the controller using function NewStudentCtrl ($scope) {} inside the HTML file itself right before the use of the controller. The problem is that I want to split HTML and JS into seperate files.
Please note that the provided source is simplified a lot, there might be little indentation or syntax errors.
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>var app = angular.module('myApp',[]);</script>
</head>
<body>
<div ng-controller="NewStudentCtrl">
<div ng-controller="AccountMenuCtrl">
</div>
<script src="js/account-menu.js">
function AccountMenuCtrl ($scope) {
}
</script>
<div ng-controller="OrtsteileCtrl">
<option value="{{ortsteil.ID}}" ng-repeat="ortsteil in ortsteile">
{{ortsteil.Name}}
</option>
</div>
</div> <!-- end NewStudentCtrl -->
<!-- Loading dependencies -->
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/new-student.js">
var app = angular.module("myApp");
function NewStudentCtrl ($scope) {
}
</script>
<script src="js/plz.js">
angular.module('myApp').controller('OrtsteileCtrl', ['$scope', '$http',
function($scope, $http) {
}]);
</script>
</body>
</html>
EDIT: Scratch that, something I didn't realise is that angular is happy with mixing them.
The issue is because you are recreating your module several times:
Line 4: <script>var app = angular.module('myApp',[]);</script>
Line 28: var app = angular.module("myApp");
Line 34: angular.module('myApp').controller(...
fiddle: http://jsfiddle.net/uXpqL/
I'm following the video tutorials on egghead.io but while trying to follow his example when he created a factory (see video here) I keep getting "angular is not defined" Reference Error but I have included the angular script
This is my html page:
<!DOCTYPE html>
<html>
<head>
<title>Prototype</title>
<link rel="stylesheet" type="text/css" href="foundation.min.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div data-ng-app="">
<div data-ng-controller="FirstController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
<div data-ng-controller="SecondController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
and this is my javascript file "main.js":
//Services
// step 1 create an app
var myApp = angular.module('Data', []).
// tep 2 create factory
// Service name, function
myApp.factory('Data', function(){
return { message: "I'm Data from a Service" }
});
//Controllers
function FirstController($scope, Data){
$scope.data = Data;
}
function SecondController($scope){
}
I have read a few posts where similar happen (here) and please correct me if I'm wrong but I think it is to do with Boot strapping andI have tried manually bootstrapping using angular.bootstrap(document, ['Data']); but with no success, still get same error.
But What I want to know is, Why this works for so many examples online, like the egghead video series, but I have issues as I believe I have followed his video very closely. is it a change in angular in recent versions?
You have to put your script tag after the one that references Angular. Move it out of the head:
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
The way you've set it up now, your script runs before Angular is loaded on the page.
You have not placed the script tags for angular js
you can do so by using cdn or downloading the angularjs for your project and then referencing it
after this you have to add your own java script in your case main.js
that should do
I had the same problem as deke. I forgot to include the most important script: angular.js :)
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>