How to get percentage progress circles working in angular js?

Question

I've downloaded node.js and angular js.

Added angular js script and percent-circle-directive script as mentioned here https://www.npmjs.com/package/angular-percent-circle-directive

Here is my html code -

<!DOCTYPE html>
<html>
<head>
<title>My dashboard</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="C:\Users\Shantanu\node_modules\angular-percent-circle-directive\dist\percent-circle.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body>
<script src="C:\Users\Shantanu\node_modules\angular-percent-circle-
directive\dist\percent-circle-directive.js" type="text/javascript"></script>
<script type="text/javascript" src="ang.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
crossorigin="anonymous"></script>

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">  
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-
expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <img src="vx-medium.jpg"><a class="navbar-brand" href="#"><strong> 
VenturX: Prototype</strong></a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><strong>Hello, 16@test.com</strong></a></li>
    <li><a href="login.html">Log out</a></li>

  </ul>
 </div> 
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="img">
<img src="person_male.jpg" class="person">
</div>
<div id="content">
<table>
    <tr>
        <td><strong>Market</strong></td>
        <td class="tc">Fill in who are your customers?</td>
    </tr>
    <tr>
        <td><strong>Pain</strong></td>
        <td class="tc">What is the pain statement you are trying to solve 
for them?</td>
    </tr>
    <tr>
        <td><strong>Benefit</strong></td>
        <td class="tc">What is the benefit that will match that pain 
statement?</td>
        <td class="editpro"><a class="btn btn-default" href="#" 
role="button">Edit Profile</a></td>
    </tr>
</table>
</div>
<div class="title">
<span class="bigf">How is <strong>VenturX <span class="glyphicon glyphicon-
pencil" aria-hidden="true"></strong> doing today?</span></span><span 
class="checkd"> Check dashboard</span>
</div>
<percent-circle percent=50 class="cir">HighS</percent-circle>
<!-- 
<p class="bg-warning"><strong>Small conversion?</strong> Learn what you can 
do to <strong><span class="bl">rise your conversion</span></strong>.</p>
<p class="bg-danger"><strong>Low product score?<span class="bl"> Try 
this</span></strong> to get more ...</p>
--></body>
</html>

My percent-circle is not working at all. I've tried increasing the width and height of the circle but its still not working. Its complete blank. The text inside it is showing up but the circle is not coming up. Where can be the issue ?

Answer 1

script src="C:\Users\Shantanu\node_modules\angular-percent-circle-directive\dist\percent-circle-directive.js" type="text/javascript"

This Script of your here, i haven't tested if it can be included this way, but as far as know, this is not the correct war to do it, as angular project when complied, it will gather everything from your src/app directory.

If you are installing it with npm, you can use it in angular by:

const package-name = require('package-name');

And to use require, do follow these steps:

run npm i --save-dev @types/node
in you app.modules.ts , write the line: declare let require: any; .
and finally, in your tsconfig.app.json file, write

{"extends": "../tsconfig.json","compilerOptions": {"types": ["node"], "typeRoots": [ "../node_modules/@types" ] }}

And then include the script file from the imported package.

Answer 2

All I had to do is add

 <script type="text/javascript"> var app = angular.module('percentCircleDemo', ['percentCircle-directive']); </script>

and add

 <body ng-app="percentCircleDemo">

I didn't know earlier that to run angular js we need to mention ng-app somewhere in the html code.

How to get percentage progress circles working in angular js?

Question

2 answers

solution1
0 2017-10-07 09:45:01

solution2
0 2017-10-07 12:31:28

How to get percentage progress circles working in angular js?

Question

2 answers

solution1 0 2017-10-07 09:45:01

solution2 0 2017-10-07 12:31:28

solution1
0 2017-10-07 09:45:01

solution2
0 2017-10-07 12:31:28