Parse URL using AngularJS

Parse URL Using AngularJS AngularJS provides a very compatible service $location for acccessing and modifying browser URLs, but still if we need a basic function that can parse a URL string and returns the hostname/ protocol/ port etc we can use this basic code to get it using a variable and a $watch on this variable, so whenever it changes we get all the different values.
Have some HTML that can accept a URL as input. Also set some lables to show the Host/ Port etc…

&lt;h3&gt;Parse URL using AngularJS | open and free&lt;/h3&gt;

url: &lt;input type="text" ng-model="url" value="" style="width:780px;"&gt;

&lt;ul&gt;
&lt;li&gt;href = {{parser.href}}&lt;/li&gt;
&lt;li&gt;protocol = {{parser.protocol}}&lt;/li&gt;
&lt;li&gt;host = {{parser.host}}&lt;/li&gt;
&lt;li&gt;hostname = {{parser.hostname}}&lt;/li&gt;
&lt;li&gt;port = {{parser.port}}&lt;/li&gt;
&lt;li&gt;pathname = {{parser.pathname}}&lt;/li&gt;
&lt;li&gt;hash = {{parser.hash}}&lt;/li&gt;
&lt;li&gt;search = {{parser.search}}&lt;/li&gt;
&lt;/ul&gt;

As we are done with the HTML part, let us create a small angularjs controller to parse the URL and provide distinct properties from it.

function AppCtrl($scope) {

$scope.$watch('url', function () {
$scope.parser.href = $scope.url;
});

$scope.init = function () {
$scope.parser = document.createElement('a');
$scope.url = 'https://17path.wordpress.com/2015/10/22/the-ellen-show-vs-other-shows/';
}

}

You can play with a full example here: Parse URL using AngularJS | Fiddle

angular charts angular-chart.js Angularjs angularjs charting free charting plugin HOW TO JavaScript js charts open source Tutorial

Angularjs Charting Library

angular-chart.js

by admin · September 12, 2015 685

angular-chart.js

Beautiful, reactive, responsive charts for Angular.JS using Chart.js.

Demo

Installation

bower

bower install --save angular-chart.js

npm

npm install --save angular-chart.js

cdn


//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js

//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css

manually

or copy the files from dist/.

Then add the sources to your code (adjust paths as needed) after adding the dependencies for Angular and Chart.js first:


<head>
  <link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css" />
<head>
<body>
  ...
</body>
  <script src="bower_components/angular/angular.min.js"></script>
  <script src="bower_components/Chart.js/Chart.min.js"></script>
  <script src="bower_components/angular-chart.js/dist/angular-chart.min.js"></script>

Utilisation

There are 6 types of charts so 6 directives: chart-line, chart-bar, chart-radar, chart-pie, chart-polar-area, chart-doughnut.

They all use mostly the same API ([chart-] indicates an optional but recommended prefix):

[chart-]data: series data
[chart-]labels: x axis labels (line, bar, radar) or series labels (pie, doughnut, polar area)
[chart-]options: chart options (as from Chart.js documentation)
[chart-]series: (default: []): series labels (line, bar, radar)
[chart-]colours: data colours (will use default colours if not specified)
getColour: function that returns a colour in case there are not enough (will use random colours if not specified)
[chart-]click: onclick event handler
[chart-]hover: onmousemove event handler
[chart-]legend: (default: false): show legend below the chart

DEPRECATION WARNING: Note that all attributes which do not use the [chart-] prefix are deprecated and may be removed in a future version.

There is another directive chart-base that takes an extra attribute chart-type to define the type dynamically, see stacked bar example.

Example

Markup


<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series" chart-click="onClick"></canvas>

Javascript


angular.module("app", ["chart.js"])
  // Optional configuration
  .config(['ChartJsProvider', function (ChartJsProvider) {
    // Configure all charts
    ChartJsProvider.setOptions({
      colours: ['#FF5252', '#FF8A80'],
      responsive: false
    });
    // Configure all line charts
    ChartJsProvider.setOptions('Line', {
      datasetFill: false
    });
  }])
  .controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) {

  $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
  $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };

  // Simulate async data update
  $timeout(function () {
    $scope.data = [
      [28, 48, 40, 19, 86, 27, 90],
      [65, 59, 80, 81, 56, 55, 40]
    ];
  }, 3000);
}]);

AMD RequireJS

See a simple AMD example

CommonJS e.g. webpack

Module should work with CommonJS out of the box e.g. browserify or webpack, see a webback example.

Reactive

angular-chart.js watch updates on data, series, labels, colours and options and will update, or destroy and recreate, the chart on changes.

Events

angular-chart.js emits the following events on the scope and pass the chart as argument:

create: when chart is created
update: when chart is updated


$scope.$on('create', function (event, chart) { 
  console.log(chart); 
});

Note: the event can be emitted multiple times for each chart as the chart can be destroyed and created multiple times during angular watch lifecycle.

angular-chart.js listen to the scope destroy event and destroy the chart when it happens.

Colours

There are a set of 7 default colours. Colours can be replaced using the colours attribute. If there is more data than colours, colours are generated randomly or can be provided via a function through thegetColour attribute.

Hex colours are converted to Chart.js colours automatically, including different shades for highlight, fill, stroke, etc.

Issues

Issues or feature requests for Chart.js (e.g. new chart type, new axis, etc.) need to be opened on Chart.js issues tracker

For general questions about usage, please use http://stackoverflow.com/

Please check if issue exists first, otherwise open issue in github. Ensure you add a link to a plunker, jsbin, or equivalent. Here is a jsbin template for convenience.

Browser compatibility

For IE8 and older browsers, you will need to include excanvas. You will also need a shim for ES5 functions.

You also need to have height and width attributes for the <canvas> tag of your chart if using IE8 and older browsers. If you do not have these attributes, you will need a getComputedStyle shim and the line document.defaultView = window;, but there still may be errors (due to code in Chart.js).


<head>
<!--[if lt IE 9]>
  <script src="excanvas.js"></script>
  <script src="es5-shim.js"></script>
<![endif]-->
</head>

Contributing

Pull requests welcome!

Fork the repo
Make your changes
Run tests: npm test
Submit pull request

Contributors

Thank you to the contributors!

Author

Jerome Touffe-Blin, @jtblin, About me

License

Download

article caught on : reddit

Angular Directives Angularjs Code HTML JavaScript ng-change directive ng-model directive Poetry Radio Button Change jQuery Radio Buttons RadioButton Change RadioButton Change Angularjs

Radio Button Change Event in Angularjs

Its pretty easy to fire a radio button change event in jQuery. We just have to attach the .change event of jQuery using the name of the radio button group.

In HTML we will have a radio-button-group that we want to select from:

</pre>
<div class="line number1 index0 alt2"><code class="xml plain"><</code><code class="xml keyword">input</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"radio"</code> <code class="xml color1">name</code><code class="xml plain">=</code><code class="xml string">"radioGroupThing"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"allot"</code> <code class="xml color1">checked</code><code class="xml plain">=</code><code class="xml string">"checked"</code> <code class="xml color1">value</code><code class="xml plain">=</code><code class="xml string">"something"</code><code class="xml plain">>Do Something</code></div>
<div class="line number2 index1 alt1"><code class="xml plain"><</code><code class="xml keyword">input</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"radio"</code> <code class="xml color1">name</code><code class="xml plain">=</code><code class="xml string">"radioGroupThing"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"transfer"</code> <code class="xml color1">value</code><code class="xml plain">=</code><code class="xml string">"some other thing"</code><code class="xml plain">>So Some Other Thing</code></div>
<pre>

And then we have some jquery code to workout when user changes or selects a radio button from the given group.

$(document).ready(function() {
  $('input:radio[name=radioGroupThing]').change(function() {
  if (this.value == 'something') {
   //do something for something
  }
  else if (this.value == 'some other thing') {
   //do something for some other thing
  }
 });
});

Thats it. Now what if we are using Angularjs and want to achieve same results. In Angularjs we have two angular directives to work it out:
ng-model directive this will connect your html view to angular controller variable.
ng-change directive this will attach the event to be fired on change of radio button.

We have to just pass the ng-model using a method which is called on ng-change.
Ok let’s see it in code:

So we will have this html in our angular view(which is HTML actually)

<div ng-controller="MyCtrl">
<input type="radio" ng-model="radio" name="radioGroupThing" id="first" checked="checked" value="something" ng-change='radioChange(radio)'>Do Something
<input type="radio" ng-model="radio" name="radioGroupThing" id="second" value="some other thing" ng-change='radioChange(radio)'>So Some Other Thing
<hr> 
You are doing: <b>{{radio}}<b>
</div>

And then we have a basic angular controller that works behind the above view:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
 $scope.radio= 'something';
 
 $scope.radioChange = function(value) {
 console.log(value);
 }
}

So its nice and easy. Above code is perfectly fiddle ready; why don’t you just try it in jsfiddle or plunkr
Let us know your views in comments.

Sharing is Caring

angular-chart.js

angular-chart.js

Installation

bower

npm

cdn

manually

Utilisation

Example

Markup

Javascript

AMD RequireJS

CommonJS e.g. webpack

Reactive

Events

Colours

Issues

Browser compatibility

Contributing

Contributors

Author

License

Sharing is Caring

Sharing is Caring