AngularJS: Tutorial: Part 4: Directive Example

In Part 1, we when over the basics on AngularJS. In Part 2, we when over AngularJS and Charts. In Part 3, we when over common mistakes when developing using AngularJS.  In this part of the tutorial, I wish to share with you a small directive I am building. I apologize in advance if you see my code a little messy. I have a shortage of free time so I built this in a hurry. I am not including the back-end such as PHP, MySQL, and REST using JSON. That would be part of another tutorial.

Lets begin with this draft of project. The idea is to use JSON as the model that will indicate the view to use a template which itself use the UI feature called accordion in a nested way to display all the work experience I have:

Lets begin with the JSON, workExperience.json:

[ 

{ "IT Consultant - Vestal, New York (June 2014 – Present)": 
	{ "<p><i>Self-Employed</i></p><p>Providing services to the company Hourglass Applications. Involved in a variety of applications and research development.</p><p><u>Project Examples:</u></p>" : [ 
		{ "Jog 101" : 
			"Designed, coded, and tested using Swift with Core Data, GeoLocation, MapKit, and MediaPlayer."}, 
		{ "Browser Alexia" : 
			"Designed and coded in collaboration using Objective-C and Swift with UIWebView, WKWebView and JavaScript injection."}
	]} 
},

{ "The Raymond Corporation - Greene, New York (March 2012 – May 2014)": 
	{ "<p><i>Programmer Analyst IV</i></p><p>The Raymond Corporation is a Toyota material handling solution provider company.<br> Acted as project leader designing, coding, testing, documenting and maintaining large complex programs. Provided leadership, support, and technical guidance to all levels of personnel over technical, programming, and system related issues.</p><p><u>Project Examples:</u></p>" : [ 
		{ "IBM WebSphere Cast Iron" : 
			"Designed, coded, tested, documented and maintained integrations which synchronize information between different databases such as AS400, MS SQL Servers, and cloud solutions such as Oracle CRM on Demand and Big Machines using SOAP and REST web services."}, 
		{ "Suppliers Center" : 
			"Maintained and expanded website running on Apache Tomcat 5.5 using JavaScript, jQuery, and JSP with functionalities that included accessing multiple databases (MS SQL Server, AS400, and MS Access 97), reporting, plus providing email services."},
		{ "Asaichi Strips" : 
			"Designed, coded, tested, documented and maintained website running on ColdFusion 8.0 and 9.0.2 accessing databases (MS SQL Server and AS400) and providing export services (CSV, XLS, and PDF). Agile programming approach similar to SCRUM was used when building this system."}, 
		{ "Contractor Manager System" : 
			"Redesigned RMIS for Human Resources department, coded using PrimeFaces framework, tested, documented and maintained website running on Apache Tomcat 7.0/8.0 with access to MS SQL 2012 Server database."}, 
		{ "HR E-Application" : 
			"Modified website running on ColdFusion 8.0 with functionalities that included accessing to MS SQL 2008 and email services."}, 
		{ "Atlassian Jira and Confluence" : 
			"Used Groovy to export tickets from TrackIT! into Jira and MDR structure into Confluence."},
		{ "PLM Report" : 
			"This is a lifecycle management report system. Worked in collaboration to build the user interface using JavaScript, jQuery, and CFML in the back end. This website was running on ColdFusion 8.0 server."},
		{ "Microsoft SharePoint" : 
			"Export documentation from Atlassian Confluence into Microsoft SharePoint."}
	
	]} 
},

{ "Hourglass Applications - Vestal, New York (May 2011 – March 2012)": 
	{ "<p><i>Programmer and Developer</i></p><p>Involved in an application development for Android phones and Nook tablets using Java and Eclipse, in partnership with David W. Corrigan, MS (Phone: 607.239.2702).</p><p><u>Project Examples:</u></p>" : [ 
		{ "IBM WebSphere Cast Iron" : 
			"Designed, coded, tested, documented and maintained integrations which synchronize information between different databases such as AS400, MS SQL Servers, and cloud solutions such as Oracle CRM on Demand and Big Machines using SOAP and REST web services."}, 
		{ "Suppliers Center" : 
			"Maintained and expanded website running on Apache Tomcat 5.5 using JavaScript, jQuery, and JSP with functionalities that included accessing multiple databases (MS SQL Server, AS400, and MS Access 97), reporting, plus providing email services."},
		{ "Asaichi Strips" : 
			"Designed, coded, tested, documented and maintained website running on ColdFusion 8.0 and 9.0.2 accessing databases (MS SQL Server and AS400) and providing export services (CSV, XLS, and PDF). Agile programming approach similar to SCRUM was used when building this system."}, 
		{ "Contractor Manager System" : 
			"Redesigned RMIS for Human Resources department, coded using PrimeFaces framework, tested, documented and maintained website running on Apache Tomcat 7.0/8.0 with access to MS SQL 2012 Server database."}, 
		{ "HR E-Application" : 
			"Modified website running on ColdFusion 8.0 with functionalities that included accessing to MS SQL 2008 and email services."}, 
		{ "Atlassian Jira and Confluence" : 
			"Used Groovy to export tickets from TrackIT! into Jira and MDR structure into Confluence."},
		{ "PLM Report" : 
			"This is a lifecycle management report system. Worked in collaboration to build the user interface using JavaScript, jQuery, and CFML in the back end. This website was running on ColdFusion 8.0 server."},
		{ "Microsoft SharePoint" : 
			"Export documentation from Atlassian Confluence into Microsoft SharePoint."}
	
	]} 
},

{ "Broome Community College - Binghamton, New York (January 2007 – December 2008)": 
	{ "<p><i>Computer Lab Student Support</i></p><p>Maintained a positive learning environment in the computer laboratory and provided instructional support service to credit students. Provide support to students on topics such as Java, Visual Basic, Visual C# .NET, Visual C++ .NET, Structured Programming, Object Oriented Programming, Microprocessors and Assembly Language Programming, Data Structures, Problem Solving and Communication Tools, and Digital Logic.</p>" : []} 
},

{ "Fusion Development, Inc. - Coral Springs, Florida (December 2004 – December 2006)": 
	{ "<p><i>Project Manager in Charge of Applications Development</i></p><p>Maintained a positive learning environment in the computer laboratory and provided instructional support service to credit students. Provide support to students on topics such as Visual Basic, Visual C# .NET, Visual C++ .NET, Structured Programming, Object Oriented Programming, Microprocessors and Assembly Language Programming, Data Structures, Problem Solving and Communication Tools, and Digital Logic.</p><p><u>Project Examples:</u></p>" : [ 
		{ "13angel" : 
			"Acted as project leader by designing, testing, and documenting a 3D visualization tarot software built on Visual C++ and Direct 3D. Also, designed, coded, tested and documented CD recording system for software distribution using JavaScript, PHP, and Linux command line for CD-ROM recording."}, 
		{ "Eurocoach, Inc." : 
			"Eurocoach is a company that restores and fabricates Ferraris, racing and Italian cars. This website was built using Macromedia Flash, Macromedia Fireworks, JavaScript and PHP."},
		{ "Tic-Tac-Toe 3D for BluePepper Technologies, Inc." : 
			"Acted as project leader by designing, testing and documenting 3D tic-tac-toe for BlackBerry market built using C."},
		{ "Fusion Development, Inc." : 
			"Website build using Macromedia Flash, Macromedia Fireworks, JavaScript, PHP and MySQL."},
		{ "Tango Advertising Banners" : 
			"Designed advertising banners using Macromedia Fireworks for Tango Group in Miami, Florida."}
	]} 
},


{ "BluePepper Technologies, Inc. - Coral Springs, Florida (January 2003 – December 2004)": 
	{ "<p><i>Software Designer</i></p><p>Developed, designed, and wrote PHP programs that were instrumental in the success of four projects related with telephone and wireless technology; also, maintenance of the company website. Performed installation, maintenance, configuration, and repair PC Networks. </p><p><u>Project Examples:</u></p>" : [ 
		{ "MTeam" : 
			"Instant conferencing for business subscribers. URL: <a href=\"http://bptweb.com/mteam/index.html\" target=\"_blank\">http://bptweb.com/mteam/index.html</a>"}, 
		{ "Ping" : 
			"Instant conferencing for young adults and teens. URL: <a href=\"http://bptweb.com/ping/index.html\" target=\"_blank\">http://bptweb.com/ping/index.html</a>"},
		{ "SvMS" : 
			"Short voice message services. URL: <a href=\"http://bptweb.com/svms/index.html\" target=\"_blank\">http://bptweb.com/svms/index.html</a>"},
		{ "PASS" : 
			"Patient automatic scheduling services."},
		{ "BluePepper Technologies, Inc" : 
			"Maintained website using JavaScript, PHP, and MySQL.<br>All projects interfaces were built using JavaScript, PHP, MySQL, Macromedia Flash, and Macromedia Fireworks."}
	]} 
},

{ "Apex Voice Communications - Coral Springs, Florida (October 2001 – December 2004)": 
	{ "<p><i>Web Programmer and Designer</i></p><p>Started in the company creating, developing and maintaining the APEX Reseller Program website using ASP, JavaScript, Macromedia Flash and Macromedia Fireworks with functionalities that included database access (ODBC to MS SQL and MS Access), email services, callback, and others. Performed development of telephone applications and installation; maintenance, configuration and repair of PC Networks.</p>" : []} 
},

{ "Ecconet S.A. - Capital Federal, Buenos Aires, Argentina (March 2000 – June 2001)": 
	{ "<p><i>Technical Support</i></p><p>Maintenance, configuration, and repair of PC Networks.</p>" : []} 
}

]

Please notice that in your database the information would not be organized in this way. I am doing in purposed because I don’t wish to give a solid idea on how the database looks like:

Second, lets go to our template, accord.html:

<uib-accordion close-others="true">

	<div ng-repeat="companies in datasource" ng-init="companiesIndex = $index">
		
		<div ng-repeat="(a, b) in companies">

			<uib-accordion-group is-open="status.openMain[companiesIndex]" >

				<uib-accordion-heading>
					{{'{\{::a}\}'}} <!-- Company Name -->
					<i class="pull-right glyphicon" 
					   ng-class="{'glyphicon-chevron-down': status.openMain[companiesIndex], 'glyphicon-chevron-right': !status.openMain[companiesIndex]}">
					</i>
				</uib-accordion-heading>

				<div ng-repeat="(c, d) in b">					
					<p ng-bind-html="c"></p> <!-- Company Description -->
					
					<uib-accordion close-others="false">

						<div ng-repeat="(e, f) in d">
														
							<div ng-repeat="(g,h) in f">
					
								<uib-accordion-group is-open="status.openSub[e]" >

									<uib-accordion-heading>		
										{{'{\{::g}\}'}}	<!-- Project Name -->							
										<i class="pull-right glyphicon" 
										    ng-class="{'glyphicon-chevron-down': status.openSub[e], 'glyphicon-chevron-right': !status.openSub[e]}"></i>
									</uib-accordion-heading>
									<p ng-bind-html="h"></p> 	<!-- Project Description -->						

								</uib-accordion-group>								
							
							</div>
						</div>

					</uib-accordion>
				</div>	
			
			</uib-accordion-group>
		</div>

	</div>

</uib-accordion>

In accord, we are using “ng-bind-html” which allows us to include HTML in our JSON to be displayed.
You need to have the angular-sanitize.js library in order to use it. Also, notice I am using one-time binding “::” indicator, in this way we reduce the number for $watchers being used.

Next, is the motor of our directive and controller, index.js:

(function () {
	'use strict';

	var accMod = angular.module('acc', ['ngAnimate', 'ui.bootstrap']);
	
	accMod.directive('accord', function () {

	    var scope = {
	    	datasource: '='
	    };

    	return {    		
	        templateUrl: 'accord.html',	     
	        scope: scope
    	};

	});


	var mod = angular.module('ui.bootstrap.app', ['acc', 'ngSanitize']);

	mod.controller('workExperienceController', ['$scope', '$http', function($scope, $http){

		$http.get('workExperience.json')
			.then(function(res){
				$scope.workExperienceDataSource = res.data;
		});

	}]);




	
}());

Short and to the point. I created a module where I administrate the directive related with accordion UI feature, and another module which takes care of all the modules of my application. By doing this, I can reuse code that later I inject in other projects. Also, I can little by little build my own angular library.

Here is the main page, index.html:

<!doctype html>
<html ng-app="ui.bootstrap.app">
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
		<script src="https://code.angularjs.org/1.2.0-rc.3/angular-sanitize.js"></script>
		<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
		<script src="index.js"></script>
		<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>

		<div>

			<p><b>WORK EXPERIENCE</b></p>
			<div ng-controller="workExperienceController">
				<div accord datasource="workExperienceDataSource"></div>
			</div>

		</div>

	</body>
</html>

In the future, I will create a directive that will iterate through all the JSON and build nested accordions automatically.
For now, this JSON will create a 2 level nested accordion as displayed below.

Finally, the working example:

Share
Leave a comment

AngularJS: Tutorial: Part 2: Charts

Line, Bar, and Radar Char Examples

Note: The Chart.js plugin have being modified by the author and it is breaking up. I will be replacing this post if I don’t see the plugin being fixed soon and/or I will fix that plugin locally.

Source Code:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>AngularJS: Charts: Line, Bar, and Radar Chart</title>
  <link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/dist/angular-chart.css">
  <link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/themes/github.css">
  <link href="http://jtblin.github.io/angular-chart.js/examples/bootstrap.css" rel="stylesheet">
  <link href="http://jtblin.github.io/angular-chart.js/examples/app.css" rel="stylesheet">
</head>
<body ng-app="examples" id="top">

  <div class="container">

    <section id="directives">
        <div class="col-lg-6 col-sm-12">
            <tabset>
                <tab heading="Line Chart" class="lineChart">
                    <div class="settings">
                        <div class="row">
                            <div class="col-lg-6 col-sm-12" id="line-chart" ng-controller="LineCtrl">
                                <div class="panel panel-default">
                                    <div class="panel-heading">Line Chart</div>
                                        <div class="panel-body">
                                            <canvas id="line" 
                                                    class="chart chart-line" 
                                                    chart-data="data" 
                                                    chart-labels="labels" 
                                                    chart-legend="true"
                                                    chart-click="onClick" 
                                                    chart-hover="onHover" 
                                                    chart-series="series"></canvas>
                                        </div>
                                </div>


                                <div class="panel panel-default">
                                    <div class="panel-heading">Line Chart Data</div>
                                    <div class="panel-body">
                                        <table class="table table-responsive table-condensed table-striped">
                                            <tr>
                                                <th ng-repeat="label in labels">{{label}}</th>
                                            </tr>
                                            <tr ng-repeat="dataSet in data">
                                                <td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>


                            </div>
                        </div>


                    </div>
                </tab>

                <tab heading="Bar Chart" class="barChart">
                    <div class="settings">
                        <div class="row">
                            <div class="col-lg-6 col-sm-12" id="bar-chart" ng-controller="BarCtrl">
                              <div class="panel panel-default">
                                <div class="panel-heading">Bar Chart</div>
                                <div class="panel-body">
                                  <canvas id="bar" 
                                            class="chart chart-bar" 
                                            chart-data="data" 
                                            chart-labels="labels"
                                            chart-series="series" 
                                            chart-options="options"></canvas>
                                </div>
                              </div>


                               <div class="panel panel-default">
                                    <div class="panel-heading">Bar Chart Data</div>
                                    <div class="panel-body">
                                        <table class="table table-responsive table-condensed table-striped">
                                            <tr>
                                                <th ng-repeat="label in labels">{{label}}</th>
                                            </tr>
                                            <tr ng-repeat="dataSet in data">
                                                <td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                </tab>

                <tab heading="Radar Chart" class="radarChart">
                    <div class="settings">
                        <div class="row">
                            <div class="col-lg-6 col-sm-12" id="radar-chart" ng-controller="RadarCtrl">
                                <div class="panel panel-default">
                                    <div class="panel-heading">Radar Chart</div>
                                    <div class="panel-body">
                                        <canvas id="area" class="chart chart-radar" chart-data="data"
                                        chart-labels="labels" chart-click="onClick"></canvas>
                                    </div>
                                </div>

                               <div class="panel panel-default">
                                    <div class="panel-heading">Radar Chart Data</div>
                                    <div class="panel-body">
                                        <table class="table table-responsive table-condensed table-striped">
                                            <tr>
                                                <th ng-repeat="label in labels">{{label}}</th>
                                            </tr>
                                            <tr ng-repeat="dataSet in data">
                                                <td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>                        
                </tab>

            </tabset>
        </div>       
  
      </div>

    </section>

    
  </div>

  <script src="http://jtblin.github.io/angular-chart.js/bower_components/angular/angular.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/Chart.js/Chart.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/rainbow.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/generic.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/html.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/javascript.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/examples/smoothscroll.min.js"></script>
  
<script>
    (function () {
    'use strict';

        var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);

        app.config(function (ChartJsProvider) {
            
            // Configure all charts
            ChartJsProvider.setOptions({
                colours: ['#97BBCD', '#A80000', '#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
                responsive: true
            });
            
            // Configure all doughnut charts
            ChartJsProvider.setOptions('Doughnut', {
                animateScale: true
            });

        });

        app.controller('MenuCtrl', function ($scope) {
            $scope.isCollapsed = true;
            $scope.charts = ['Line', 'Bar', 'Doughnut', 'Pie', 'Polar Area', 'Radar', 'Base'];
        });

        app.controller('LineCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
            $scope.labels = firstTabSharedLabels;
            $scope.series = firstTabSharedSeries;
            $scope.data = firstTabSharedData;

            $scope.onClick = function (points, evt) {
                console.log(points, evt);
            };

            $scope.onHover = function (points) {
                if (points.length > 0) {
                    console.log('Point', points[0].value);
                } else {
                    console.log('No point');
                }
            };

            $timeout(function () {
                $scope.labels = firstTabSharedLabels;
                $scope.series = firstTabSharedSeries;
                $scope.data = firstTabSharedData;
            }, 1000);

        }]);

        app.controller('BarCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
            $scope.options = { scaleShowVerticalLines: false };
            $scope.labels = firstTabSharedLabels;
            $scope.series = firstTabSharedSeries
            $scope.data = firstTabSharedData;

            $timeout(function () {
                $scope.options = { scaleShowVerticalLines: true };
            }, 1000);

        }]);


        app.controller('RadarCtrl', function ($scope) {
            $scope.labels = firstTabSharedLabels;
            $scope.data = firstTabSharedData;

            $scope.onClick = function (points, evt) {
                console.log(points, evt);
            };
        });


    })();
</script>

</body>
</html>

 

Doughnut and Pie Chart Examples

Source Code:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>AngularJS: Charts: Doughnut and Pie Charts</title>
  <link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/dist/angular-chart.css">
  <link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/themes/github.css">
  <link href="http://jtblin.github.io/angular-chart.js/examples/bootstrap.css" rel="stylesheet">
  <link href="http://jtblin.github.io/angular-chart.js/examples/app.css" rel="stylesheet">
</head>
<body ng-app="examples" id="top">

  <div class="container">

    <section id="directives">
 
        <div class="col-lg-6 col-sm-12">
            <tabset>

                <tab heading="Doughnut Chart" class="doughnutChart">
                    <div class="settings">
                        <div class="row">
                            <div class="col-lg-6 col-sm-12" id="doughnut-chart" ng-controller="DoughnutCtrl">
                                <div class="panel panel-default">
                                    <div class="panel-heading">Doughnut Chart</div>
                                    <div class="panel-body">
                                        <canvas id="doughnut" 
                                            class="chart chart-doughnut chart-xs" 
                                            chart-data="data"
                                            chart-labels="labels" 
                                            chart-legend="true"></canvas>
                                    </div>
                                </div>


                               <div class="panel panel-default">
                                    <div class="panel-heading">Doughnut Chart Data</div>
                                    <div class="panel-body">
                                        <table class="table table-responsive table-condensed table-striped">
                                            <tr>
                                                <th ng-repeat="label in labels">{{label}}</th>
                                            </tr>
                                            <tr>
                                                <td ng-repeat="set in data track by $index">{{data[$index]}}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>
                     </div>
                </tab>                

                <tab heading="Pie Chart" class="pieChart">
                    <div class="settings">

                        <div class="row">
                            <div class="col-lg-6 col-sm-12" id="pie-chart" ng-controller="PieCtrl">
                                <div class="panel panel-default">
                                    <div class="panel-heading">Pie Chart</div>
                                        <div class="panel-body">
                                            <canvas id="pie" 
                                                    class="chart chart-pie chart-xs" 
                                                    chart-data="data" 
                                                    chart-labels="labels"></canvas>
                                        </div>
                                </div>

                               <div class="panel panel-default">
                                    <div class="panel-heading">Pie Chart Data</div>
                                    <div class="panel-body">
                                        <table class="table table-responsive table-condensed table-striped">
                                            <tr>
                                                <th ng-repeat="label in labels">{{label}}</th>
                                            </tr>
                                            <tr>
                                                <td ng-repeat="set in data track by $index">{{data[$index]}}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>

                             </div>
                         </div>
                    </div>
                </tab>

            </tabset>
        </div>       



  
      </div>

    </section>

    
  </div>

  <script src="http://jtblin.github.io/angular-chart.js/bower_components/angular/angular.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/Chart.js/Chart.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/rainbow.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/generic.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/html.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/javascript.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/examples/smoothscroll.min.js"></script>
  
<script>
    (function () {
    'use strict';

        var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);

        app.config(function (ChartJsProvider) {
            
            // Configure all charts
            ChartJsProvider.setOptions({
                colours: ['#97BBCD', '#A80000', '#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
                responsive: true
            });
            
            // Configure all doughnut charts
            ChartJsProvider.setOptions('Doughnut', {
                animateScale: true
            });

        });

        app.controller('MenuCtrl', function ($scope) {
            $scope.isCollapsed = true;
            $scope.charts = ['Line', 'Bar', 'Doughnut', 'Pie', 'Polar Area', 'Radar', 'Base'];
        });

        var secondTabSharedLabels = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
        var secondTabSharedData = [350, 450, 100];

        app.controller('DoughnutCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
            $scope.labels = secondTabSharedLabels;
            $scope.data = [0, 0, 0];

            $timeout(function () {
                $scope.data = secondTabSharedData;
            }, 500);

        }]);

        app.controller('PieCtrl', function ($scope) {
            $scope.labels = secondTabSharedLabels;
            $scope.data = secondTabSharedData;
        });

    })();
</script>

</body>
</html>

Polar, Dynamic, and Reactive Chart Examples

Source Code:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>AngularJS: Charts: Polar, Dynamic, and Reactive Chats</title>
  <link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/dist/angular-chart.css">
  <link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/themes/github.css">
  <link href="http://jtblin.github.io/angular-chart.js/examples/bootstrap.css" rel="stylesheet">
  <link href="http://jtblin.github.io/angular-chart.js/examples/app.css" rel="stylesheet">
</head>
<body ng-app="examples" id="top">

  <div class="container">

    <section id="directives">

        <div class="col-lg-6 col-sm-12">
            <tabset>

                <tab heading="Polar Chart" class="polarChart">
                    <div class="settings">
                        <div class="row">
                            <div class="col-lg-6 col-sm-12" id="polar area-chart" ng-controller="PolarAreaCtrl">
                                <div class="panel panel-default">
                                    <div class="panel-heading">Polar Area Chart</div>
                                    <div class="panel-body">
                                        <canvas id="polar" class="chart chart-polar-area" chart-data="data" chart-labels="labels"></canvas>                            
                                    </div>                            
                                </div>

                               <div class="panel panel-default">
                                    <div class="panel-heading">Pie Chart Data</div>
                                    <div class="panel-body">
                                        <table class="table table-responsive table-condensed table-striped">
                                            <tr>
                                                <th ng-repeat="label in labels">{{label}}</th>
                                            </tr>
                                            <tr>
                                                <td ng-repeat="set in data track by $index">{{data[$index]}}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>                                

                            </div>
                        </div>
                    </div>
                </tab>

 

                <tab heading="Dynamic Chart" class="dynamicChart">
                    <div class="settings">
                        <div class="row"> 

                            <div class="col-lg-6 col-sm-12" id="base-chart" ng-controller="DynamicCtrl"> 
                                <button type="button" class="btn btn-primary pull-right" ng-click="toggle()">
                                    <b>Toggle</b>                                        
                                    <img height="28px" width="28px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/View-refresh-2.svg/48px-View-refresh-2.svg.png">
                                </button>
                               
                                <div class="panel panel-default">
                                    <div class="panel-heading">Dynamic Chart</div>
                                    <div class="panel-body">
                                        <canvas id="base" class="chart chart-base" chart-type="type" chart-data="data"
                                        chart-labels="labels" chart-legend="true"></canvas>                        
                                    </div>

                                </div>

                                 <div class="panel panel-default">
                                    <div class="panel-heading">Pie Chart Data</div>
                                    <div class="panel-body">
                                        <table class="table table-responsive table-condensed table-striped">
                                            <tr>
                                                <th ng-repeat="label in labels">{{label}}</th>
                                            </tr>
                                            <tr>
                                                <td ng-repeat="set in data track by $index">{{data[$index]}}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                               
                            </div>
                        </div>
                    </div>
                </tab>


               <tab heading="Reactive Chart" class="reactiveChart">
                    
                    <div class="settings">

                        <div class="row" ng-controller="ReactiveCtrl">

                            <div class="col-lg-6 col-sm-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">Reactive Chart</div>
                                <div class="panel-body">
                                    <canvas id="tables" class="chart chart-line" chart-data="data"
                                    chart-labels="labels" chart-colours="colours"></canvas>
                                    <!-- <button type="button" class="btn btn-primary pull-right" ng-click="randomize()">Randomize</button> -->
                                </div>
                            </div>
                            </div>


                            <div class="col-lg-6 col-sm-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">Chart Data</div>
                                    <div class="panel-body">
                                        <table class="table table-responsive table-condensed table-striped">
                                            <tr>
                                                <th ng-repeat="label in labels">{{label}}</th>
                                            </tr>
                                            <tr ng-repeat="dataSet in data">
                                                <td ng-repeat="set in dataSet track by $index"><span style="text-align: right;">{{data[$parent.$index][$index]}}</span></td>
                                            </tr>
                                        </table>                            
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </tab>

            </tabset>
        </div>
  
      </div>

    </section>

    
  </div>

  <script src="http://jtblin.github.io/angular-chart.js/bower_components/angular/angular.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/Chart.js/Chart.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/rainbow.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/generic.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/html.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/bower_components/rainbow/js/language/javascript.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/examples/smoothscroll.min.js"></script>
  
<script>
    (function () {
    'use strict';

        var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);

        app.config(function (ChartJsProvider) {
            
            // Configure all charts
            ChartJsProvider.setOptions({
                colours: ['#97BBCD', '#A80000', '#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
                responsive: true
            });
            
            // Configure all doughnut charts
            ChartJsProvider.setOptions('Doughnut', {
                animateScale: true
            });

        });

        app.controller('MenuCtrl', function ($scope) {
            $scope.isCollapsed = true;
            $scope.charts = ['Line', 'Bar', 'Doughnut', 'Pie', 'Polar Area', 'Radar', 'Base'];
        });

        var thirdTabSharedLabels = ['Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales'];
        var thirdTabSharedData = [350, 450, 90, 140, 120];

        app.controller('PolarAreaCtrl', function ($scope) {
            $scope.labels = thirdTabSharedLabels;
            $scope.data = thirdTabSharedData;
        });

        app.controller('DynamicCtrl', function ($scope) {
            $scope.labels = thirdTabSharedLabels;
            $scope.data = thirdTabSharedData;
            $scope.type = 'PolarArea';

            $scope.toggle = function () {
            $scope.type = $scope.type === 'PolarArea' ?  'Pie' : 'PolarArea';
            };
        });



       app.controller('ReactiveCtrl', function ($scope, $interval) {
            $scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
            $scope.data = [
                [46, 95, 18, 28, 65, 55, 14],
                [82, 84, 14, 91, 68, 72, 19]
            ];

            $scope.colours = [
                { // Red                    
                    fillColor: 'rgba(168,0,0,0.2)',
                    strokeColor: 'rgba(96,0,0,1)',
                    pointColor: 'rgba(96,0,0,1)',
                    pointStrokeColor: '#fff',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(96,0,0,0.8)'
                },
                { // dark grey
                    fillColor: 'rgba(77,83,96,0.2)',
                    strokeColor: 'rgba(77,83,96,1)',
                    pointColor: 'rgba(77,83,96,1)',
                    pointStrokeColor: '#fff',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: 'rgba(77,83,96,1)'
                }
            ];

            $scope.randomize = function () {
                $scope.data = $scope.data.map(function (data) {
                    return data.map(function (y) {
                        y += Math.random() * 9 - 3;
                        return parseInt(y < 0 ? 0 : (y > 90) ? 90 : y);
                    });
                });
            };

            $interval(function(){ $scope.randomize(); }, 1500);            

        });

    })();
</script>

</body>
</html>

 

Credits

Angular-Chart.js is a nice chart library built by Jerome Toufee-Blin, under BSD License, using AngularJS and Chart.js

Share
Leave a comment

AngularJS: Tutorial: Part 1

Background

AngularJS is an open source framework, designed for the creation of enhanced web applications, created by Miško Hevery at Brat Tech LLC, and maintained by Google plus a community of developers and corporations. It implements most of the concepts behind all new standards on web components and model driven views. This framework is in the category of data binding frameworks.

You can create single page applications in which the page doesn’t required to reload, by using XML, JSON plus AJAX to fetch data, and without using server-side rendering. You follow a simple concept called Model-View-Controller in which the data taken care by the model (database, file, etc.), the view take cares of everything related with the interaction with the user, and the controller takes care of the communication between the model and the view. Another way to describe this concept is the idea that the model updates the view, the view display the information to the user, the user interact with the controller via the view, and the controller manipulates the model.

MVC-ConceptIt is important to indicate that AngularJS uses data binding which means that there is a synchronization between the model an the user interface. That, it implements routing, a way to handle updates by using URL hash fragments. Finally, by using templates and model, it allows for the dynamically creating and update of HTML.


 

Example 1
Try:

Source Code:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>AngularJS - Example 1</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular.min.js"> </script>
</head>
<body>
Type your name: <input ng-model="name" type="text" />
Hello, {{'{{name}\}'}}
</body>
</html>

 

Example 2:

Try:

Source Code:

<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title>AngularJS - Example 2</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular.min.js"> </script>
<script>	
	// From Angular 1.3, you must use allowGlobals if you wish to use
	// global controller declaration without explicit registration
	// on the global scope.
	angular.module("ng").config(function($controllerProvider){
		$controllerProvider.allowGlobals();
	});
	
	function NameController($scope){
		$scope.firstName = 'Alex';
		$scope.lastName = 'Ramod';
	}
</script>
</head>
<body ng-controller="NameController">
First Name: <input ng-model="firstName" type="text" /><br>
Last Name: <input ng-model="lastName" type="text" /><br>
Hello, {{'{{firstName}\}'}} {{'{{lastName}\}'}}
</body>
</html>

 

Example 3:

Try:

Source Code:

<!DOCTYPE html>
<html ng-app="thisApp">
<head>
<meta charset="UTF-8">
<title>AngularJS - Example 3</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular.min.js"> </script>
<script>	
	var thisApp = angular.module('thisApp', []);
	thisApp.controller('NameController', function NameController($scope){
		$scope.firstName = 'Alex';
		$scope.lastName = 'Ramod';
	});
</script>
</head>
<body ng-controller="NameController">
First Name: <input ng-model="firstName" type="text" /><br>
Last Name: <input ng-model="lastName" type="text" /><br>
Hello, {{'{{firstName}\}')) {{'{{lastName}\}'}}
</body>
</html>

 

Example 4:

Try:

Source Code:

<!DOCTYPE html>
<html ng-app="thisApp">
<head>
<meta charset="UTF-8">
<title>AngularJS - Example 4</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular.min.js"> </script>
<script>	
	var thisApp = angular.module('thisApp', []);
	
	thisApp.controller('thisController', function NameController($scope){
		$scope.firstName = 'Alex';
		
		$scope.$watch('lastName', function(newValue, oldValue){
			console.log('--- $watch ---');
			console.log('Old value: ' + oldValue);			
			console.log('New value: ' + newValue);
			console.log('--------------');
		});
		
		setTimeout(function(){
			$scope.lastName = "Ramod";
			$scope.$apply();
		}, 1000);
	});
</script>
</head>
<body ng-controller="thisController">
First Name: <input ng-model="firstName" type="text" /><br>
Last Name: <input ng-model="lastName" type="text" /><br>
Hello, {{'{{firstName}\}'}} {{'{{lastName}\}'}}
</body>
</html>

Console Output:

--- $watch ---
Old value: undefined
New value: undefined
--------------
--- $watch ---
Old value: undefined
New value: Ramod
--------------

 

Example 5:

Try:

<!DOCTYPE html>
<html ng-app="thisApp">
<head>
<meta charset="UTF-8">
<title>AngularJS - Example 5</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular.min.js"> </script>
<script>	
	var thisApp = angular.module('thisApp', []);
	
	thisApp.controller('employeesController', function NameController($scope){
		
		$scope.employeeNames = ['Diego', 'Marina', 'Marc'];
		
		$scope.addEmployeeName = function() {
			$scope.employeeNames.push($scope.enteredEmployeeName);
			$scope.enteredEmployeeName = "";
		}
		
		$scope.removeEmployeeName = function(employeeName){
			var index = $scope.employeeNames.indexOf(employeeName);
			$scope.employeeNames.splice(index, 1);
		}
		
	});
</script>
</head>
<body ng-controller="employeesController">

	<form name="employeeNameForm" ng-submit="addEmployeeName()">
		Employee Name: <input name="employeeNameTextBox" 
							  ng-model="enteredEmployeeName"
							  type="text" 
							  required />		
		<input type="submit" value="add">
		<div role="alert">
			<span class="error" ng-show="employeeNameForm.employeeNameTextBox.$error.required">
				* The employee name cannot be empty
			</span>
		</div>	
	</form>
	<ul>
		<li ng-repeat="employeeName in employeeNames">
			{{'{{employeeName}\}'}} <a href="" ng-click="removeEmployeeName(employeeName)">[Remove]</a>
		</li>
	</ul>

</body>
</html>

 

Example 6:

Try:

Source Code:

<!DOCTYPE html>
<html ng-app="thisApp">
<head>
<meta charset="UTF-8">
<title>AngularJS - Example 6</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular.min.js"> </script>
<script>	
	var thisApp = angular.module('thisApp', []);
	
	thisApp.controller('countriesController', function NameController($scope){
		
		// We will fetch this data in the next example using JSON
		$scope.countries = [
			{"name": "The United States", "state": "Colorado"},
			{"name": "The United States", "state": "Florida"},
			{"name": "The United States", "state": "New York"},
			{"name": "Argentina", "state": "Buenos Aires"},
			{"name": "Argentina", "state": "Pellegrini"},
			{"name": "Uruguay", "state": "Carmelo"},
			{"name": "Uruguay", "state": "Colonia"},
			{"name": "Uruguay", "state": "Conchillas"}
		];
		
		$scope.sortField = 'name';
		$scope.reverse = true;
		
	});
</script>
</head>
<body ng-controller="countriesController">
	Search: <input ng-model="query" type="text" />
	<table border="1">
		<tr>
			<th><a href="" ng-click="sortField = 'name'; reverse = !reverse">Country</a></th>
			<th><a href="" ng-click="sortField = 'state'; reverse = !reverse">State/Provincia</a></th>
		</tr>
		<tr ng-repeat="country in countries | filter: query | orderBy: sortField:reverse">
			<td>
				{{'{{country.name}\}'}}
			</td>
			<td>
				{{'{{country.state}\}'}}
			</td>
		</tr>		
	</table>
	<br>
</body>
</html>

 

Example 7:

Try:

Source Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS - Example 7</title>
<style>
    @import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
    
    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        text-align: center;
    }
    
    ul li { display: inline; }
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
 
<script>    
    var thisApp = angular.module('thisApp', []);
 
    // Controllers
    var TableController = thisApp.controller('TableController', function ($scope, $http, $filter, serviceFilteredList) {
     
        $scope.pageSize = 4;
        $scope.reverse = false;           
       
        $scope.selectedItems =  [
                                    {numOfRows: 4, text: "4 rows"},
                                    {numOfRows: 3, text: "3 rows"},
                                    {numOfRows: 2, text: "2 rows"},
                                    {numOfRows: 1, text: "1 row"},                                                                        
                                ];
                                
        $scope.allItems = getEmptyData();
           
        $scope.getCountriesFromUrl = function($scope, $http, url){
            $http.get(url).success(function(data, status, headers, config){
                console.log("[!] Success:");
                $scope.allItems = data;
                $scope.sort();
            }).error(function(data, status, headers, config){
                var errorMessage = "[!] Failure:"
                                 + "    -> Headers: " + headers
                                 + "    -> Status: "+ status
                                 + "    -> Config: "+ config
                                 + "    -> Data: "+ data;
                console.log(errorMessage);
            });            
        }
    
        var url = "https://raw.githubusercontent.com/astockwell/countries-and-provinces-states-regions/master/countries.json";
        $scope.getCountriesFromUrl($scope, $http, url);       
        
        $scope.add = function () {
            $scope.allItems.push({
                code: $scope.newCode,
                name: $scope.newName,
                continent: $scope.newContinent
            });
            $scope.resetAll();
        }
        
        $scope.resetAll = function () {
            $scope.filteredList = $scope.allItems;
            $scope.newCode = '';
            $scope.newName = '';
            $scope.newContinent = '';
            $scope.Header = ['','',''];
            $scope.currentPage = 0;
            $scope.searchText = '';
        }
        
        $scope.search = function () {
            $scope.filteredList = serviceFilteredList.searched($scope.allItems, $scope.searchText);
            
            if ($scope.searchText == '') {
                $scope.filteredList = $scope.allItems;
            }
            
            $scope.pagination(); 
        }
    
        $scope.range = function (input, total) {
            var ret = [];
            
            if (!total) {
                total = input;
                input = 0;
            }
            
            for (var i = input; i < total; ++i) {
                if (i != 0 && i != total - 1) {
                    ret.push(i);
                }
            }
            
            return ret;
        };        
        
        $scope.pagination = function () {
            $scope.ItemsByPage = serviceFilteredList.paged( $scope.filteredList, $scope.pageSize );         
        };
    
        $scope.setPage = function () {
            $scope.currentPage = this.n;
        };
    
        $scope.firstPage = function () {
            $scope.currentPage = 0;
        };
    
        $scope.lastPage = function () {
            $scope.currentPage = $scope.ItemsByPage.length - 1;
        };
    
        
        $scope.sort = function(sortBy){
            $scope.resetAll();  
            
            $scope.columnToOrder = sortBy; 
                 
            $scope.filteredList = $filter('orderBy')($scope.filteredList, $scope.columnToOrder, $scope.reverse); 
                                   
            $scope.reverse = !$scope.reverse;   
            
            $scope.pagination();    
        };
        
        $scope.$watch("display", function(newValue, oldValue){            
            $scope.pageSize = parseInt(newValue.numOfRows);
            $scope.sort()
        });
        
      $scope.display = $scope.selectedItems[0];
                
    });

    // Services
    thisApp.service('serviceFilteredList', function () {
        
        this.searched = function (listsOfValues, toSearch) {
            return _.filter(listsOfValues, function (i) {
                return searchInAllFields(i, toSearch);
            });        
        };
    
        this.paged = function (listsOfValues, pageSize) {
            retVal = [];
            if (undefined !== listsOfValues) {
                for (var i = 0; i < listsOfValues.length; ++i) {
                    var pageIndex = Math.floor(i / pageSize) 
                    if (i % pageSize === 0) {
                        retVal[pageIndex] = [listsOfValues[i]];
                    } else {
                        retVal[pageIndex].push(listsOfValues[i]);
                    }
                }
            }
            return retVal;
        };
 
    });

    //Inject Services
    TableController.$inject = ['$scope', '$filter','serviceFilteredList'];
    
    function searchInAllFields(item, toSearch) {     
        return (item.name.toLowerCase().indexOf(toSearch.toLowerCase()) > -1 || 
                item.continent.toLowerCase().indexOf(toSearch.toLowerCase()) > -1 || 
                item.continent.toLowerCase().indexOf(toSearch.toLowerCase()) > -1) ? true : false;
    }
        
    function getEmptyData() { return [{}]; }
    
</script>
</head>
<body>
 
    <div ng-app="thisApp">
        <div ng-controller="TableController">
            <div class="input-group">
                Search: <input ng-model="searchText" 
                               ng-change="search()" 
                               placeholder="Search in all fields" 
                               type="search" 
                               class="form-control" /> 
            <span>
                <span>
                     Display: <select id="displaySelect"
                                       name="displaySelect"
                                       ng-model="display"
                                       ng-options="display as display.text for display in selectedItems">                                        
                              </select>                    
                </span>
            </span>
         </div>
         <table class="table table-hover data-table">
            <thead>
                <tr>
                    <th class="name"> 
                        <a ng-click="sort('name')" href="#"> 
                            Country <span class="{{Header[1]}}"></span>
                        </a> 
                    </th>
                    <th class="code"> 
                        <a href="#" ng-click="sort('code',$event)">
                            Code <span class="{{Header[0]}}"></span>
                        </a>
                    </th>
                    <th class="continent"> 
                        <a ng-click="sort('continent')" href="#"> 
                            Continent <span class="{{Header[2]}}"></span>
                         </a> 
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in ItemsByPage[currentPage] | orderBy:columnToOrder:reverse">
                    <td>{{item.name}}</td>
                    <td>{{item.code}}</td>
                    <td>{{item.continent}}</td>
                </tr>
            </tbody>
        </table>
        <ul id="navcontainer" name="navcontainer" class="pagination pagination-sm">
            <li ng-class="{active:0}">
                <a href="#" ng-click="firstPage()">First</a>
            </li>
            <li ng-repeat="n in range(ItemsByPage.length)"> 
                <a href="#" ng-click="setPage()" ng-bind="n + 1">1</a>
            </li>
            <li>
                <a href="#" ng-click="lastPage()">Last</a>
            </li>
        </ul>
        
    </div>

</body>
</html>

 

 

 

Share
Leave a comment

Living in the “Industial Era” in the 21st Century

Today, I am planning to begin my route into AngularJS. Currently, I am searching for a job and due the fact that I do not know AngularJS have closed to me many great opportunities. It did not matter if I am a nice guy, if I am a fast learned, or if I was in charged of developing and maintaining critical systems that cost and/or generated thousands of dollars at my previous jobs. My lack of knowing a framework such as AngularJS have being the major reason for being rejected. At least, that is the reason I was told.

We still behaving like in the “Industrial Era”, even do we are leaving the “Information Era” and getting into the era of “What to do With so Much Information Era”. In this new era, you are required to learn, re-learn and even forget faster than never before. The technology you are using today, can be easily replaced by something else, quite fast. Programming languages, libraries, and frameworks can be learned thanks for the available tools such as Internet, books, and so for. How to do clean, reusable, and expandable code is different matter. That takes time, experimentation, practice, and experience.

If you are interested in learning on how to recognize in which era you are and which era you are getting into, read “The Third Wave” by Alvin Toffler, author of “Powershift“, “Future Shock“, and “Revolutionary Wealth“. I would advice to take attention on how the author identify each era, instead of just reading for knowledge gathering.

My learning process have always being to get involved into some major project. There is nothing better than real life experiences. They beat any tutorial you can find. You have to learn fast and do thing right from the beginning because people depend on you and you should try to be always a professional. However, I do not have a real life project right now and money is running out. Therefore, I will have to do with tutorials and perhaps some fake project that force me to cover everything needed to be learn.

Lucky for me there is always an image that give me hope:
never-give-up

Share
Leave a comment