Create a counter button with AngularJS | (English Video Tutorial) by rdvn

View this thread on: hive.blog | peakd.com | ecency.com

utopian-io · @rdvn · Feb 22 '18 (edited)

$4.71

Create a counter button with AngularJS | (English Video Tutorial)


### Details

<br> 
![rdvn.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518531912/ozdbk6dp50aw1ezmnccn.jpg)

**Tutorial about:** Create a counter button with AngularJS (English Video Tutorial)<br>
**Video  Language :** English Language <br>
**Githup link:**  [AngularJS](https://github.com/angular/angular.js),
>**What is AngularJS ? HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. [AngularJS More detail](https://angularjs.org/)**

### What We Can Learn?
In this video tutorial we can learn about how to create a counter form with angularjs codes. In this lesson we are going to look at how to create a counter button and how to design and edit button section. I am going to add a button if I click 2 times it is going to count +1 . If I click 1 time it is not going to work. I'm going to do step by step. If you want to learn AngularJS you can follow me.

### We Learn About
- How to call angularJS documents.
- How to give script value for button.
- How to add button color and how to change button color.
- How to add counter 
- How to edit AngularJs 


### Requirements
- **1-** Plunker Program
- **2-** AngularJs code knowledge.
- **3-** Basic CSS code knowledge.
- **4-** Basic HTML code knowledge.


### My Operating System
![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516379881/libdd6r5olbo0zfe18ct.png)

### Difficulty
- Basic level


### Description
 In this video going to be showing you how to create a double click counter.You are going to see of part how  I created it. I will use plunker with this project . Firstly I'll call angularJs documents then I will start a project. I hope you like it. Let's go to the project!
I explained for this project with Angularjs in video.

**Video Tutorial - English Language - 720p**
https://www.youtube.com/watch?v=OcSa8kD0Q98&feature=youtu.be

### Curriculum
Here we go some AngularJS by me.
- [My AngularJS Example 1](https://utopian.io/utopian-io/@rdvn/create-a-detail-connect-form-with-angularjs-or-serie-1-english-video-tutorial)
- [My AngularJS Example 2](https://utopian.io/utopian-io/@rdvn/create-a-detail-connect-form-with-angularjs-serie-2-or-english-video-tutorial)


### [ANGULARJS REPOSITORY](https://github.com/angular/angular.js)

###  More Details About Tutorial
 <br>
### Github Repository
AngularJS Github view.
![Screenshot_2.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518530627/buykb0ljdfxw8jodln0r.jpg)

<br>
--------------------------
-----------------------------
 <center>Author : @rdvn</center>


<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@rdvn/create-a-counter-button-with-angularjs-or-english-video-tutorial">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>

👍 adol, flauwy, mooncryption, espoem, coolguy123, utopian-1up, jaff8, stoodkev, mahdiyari, e-babil, ronimm, slider2990, jamesbarraclough, luoq, yandot, amosbastian, rhotimee, mufasatoldyou, thatmemeguy, gotgame, exploreand, lemony-cricket, idlebright, howtosteem, leir, acrywhif, jesdn16, makrotheblack, isabella394, kslo, fth, ansonoxy, jrmiller87, steemitstats, chelsea.bear, bitopia, navx, claraquarius, zinonweke, opulence, fknmayhem, gobbo, omersurer, irfandogan, zoneboy, tugbabeauty, roj, erhanoz, isacastillor, not-a-bird, cgbartow, nathalie13, neokuduk, sweeverdev, marianarojas, abelcachay, rolltwodice, yourmercury, dyancuex, fabiocola, jdc, bargolis, yeswanth, gsxr, and 65 others

properties (23)vote details (129)

voter	rshares	pct
adol	527,135,131,319	50%
thatmemeguy	6,683,393,554	50%
slider2990	11,262,425,458	100%
dyancuex	819,390,634	50%
gunina	524,218,342	50%
jdc	761,857,081	20%
bargolis	736,428,962	5%
flauwy	181,794,854,176	30%
herman2141	151,346,366	50%
mahdiyari	13,181,738,741	20%
ronimm	11,910,416,098	100%
mufasatoldyou	6,990,536,688	100%
dysc0rd	408,458,779	100%
makrotheblack	2,819,689,582	50%
thinkkniht	500,079,142	75%
tradeownsystems	436,297,180	100%
jesdn16	2,887,941,093	100%
odibezeking	417,519,392	100%
leir	2,992,355,453	97%
yandot	9,874,703,441	30%
stoodkev	16,332,474,779	10%
luisrod	115,940,930	15%
mooncryption	28,975,523,092	100%
ansonoxy	2,131,293,133	100%
jamesbarraclough	10,725,856,739	100%
espoem	21,331,323,702	40%
gotgame	6,301,222,824	100%
bobdos	379,615,934	5%
zoneboy	1,388,167,236	50%
omersurer	1,619,005,356	5%
idlebright	3,142,844,912	50%
coolguy123	18,695,666,375	7%
fknmayhem	1,697,071,720	15%
utopian-io	0	0%
jaff8	17,326,337,278	25%
kona9918	217,935,738	50%
parag	221,294,081	50%
kslo	2,275,340,235	50%
mrmaracucho	533,706,480	100%
nathalie13	1,084,001,720	100%
not-a-bird	1,150,292,774	15%
adhew	61,532,000	10%
bitopia	1,987,494,046	100%
steemitstats	2,059,403,267	5%
fabiocola	792,612,579	100%
navx	1,962,752,594	70%
family.app	125,059,265	100%
cgbartow	1,104,258,761	50%
irfandogan	1,397,539,373	10%
erhanoz	1,176,628,945	10%
maphics	101,520,660	100%
sebastiengllmt	306,775,823	50%
utopian-1up	17,949,495,831	100%
luoq	10,095,764,148	100%
ewq	109,298,001	3%
zlatkamrs	429,419,978	70%
amosbastian	9,396,672,641	50%
yourmercury	853,542,801	100%
acrywhif	2,914,293,791	80%
tugbabeauty	1,387,350,221	100%
goddywise4-eu	435,401,494	100%
layanmarissa	221,062,503	50%
proffgodswill	58,529,397	10%
sweeverdev	1,052,002,634	50%
isacastillor	1,166,157,212	95%
jerybanfield	93,726,697	50%
abelcachay	991,563,973	100%
marianarojas	991,714,410	100%
fth	2,197,963,301	100%
rhotimee	7,965,214,991	50%
jrmiller87	2,083,039,047	100%
patatesyiyen	78,033,851	12.5%
deejee	116,564,997	20%
rsteem	61,813,970	25%
e-babil	12,631,111,426	93%
onin91	159,464,258	50%
isabella394	2,450,280,760	100%
zinonweke	1,788,144,186	75%
sportscontest	67,013,997	50%
neokuduk	1,080,811,649	100%
literaturk	598,532,937	100%
lemony-cricket	4,420,736,687	20%
yeswanth	613,238,558	100%
exploreand	5,297,301,673	25%
cashthekush	301,028,931	50%
chelsea.bear	2,058,496,119	5%
petvalbra	589,062,560	100%
steemassistant	447,834,562	100%
sudefteri	601,242,760	100%
akinzie	322,487,516	100%
olayhemy	307,919,806	50%
photohunter1	90,020,568	100%
photohunter2	98,914,931	100%
photohunter3	99,604,162	100%
photohunter4	84,986,416	100%
photohunter5	82,487,898	100%
howtosteem	3,112,804,127	100%
sylinda	223,893,665	50%
fmbs25	301,654,830	50%
livsky	255,179,212	50%
gsxr	604,095,113	100%
badmusazeez	107,453,403	50%
roj	1,205,169,544	100%
kid1412	252,989,290	50%
claraquarius	1,870,969,446	5%
elasevimli	442,644,169	50%
paav	460,148,646	75%
fai.zul	263,725,490	50%
nightdragon	172,189,651	50%
jacintoelbarouki	222,227,439	50%
arellanoyan	217,693,381	50%
mirna98	218,616,569	50%
flinter	162,758,991	50%
abreu	220,761,665	50%
opulence	1,772,072,929	50%
phasma	122,704,606	20%
donjyde	254,643,267	50%
crispycoinboys	460,235,799	75%
gwapoaller	301,268,378	50%
bluestorm	456,548,916	75%
mosesogenyi	220,986,359	50%
genoner	255,646,869	50%
dexter24	221,206,399	50%
pepememes	61,873,474	50%
feronio	224,483,974	50%
rolltwodice	965,593,378	100%
gobbo	1,644,067,923	100%
rolld20	95,071,441	100%
flugbot	122,643,184	100%

@buckydurddle · Feb 19 '18

Thank you for the contribution. It has been approved.

I send you a message in Discord with some suggestions on how to improve your grammar and punctuation in your contribution's text. Your video is very good and it be great for your text to be equally as good as your video. 

You can contact us on [Discord](https://discord.gg/uTyJkNm).
**[[utopian-moderator]](https://utopian.io/moderators)**

properties (22)

`author`	buckydurddle
`permlink`	re-rdvn-create-a-counter-button-with-angularjs-or-english-video-tutorial-20180219t124849319z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
`created`	2018-02-19 12:48:48
`last_update`	2018-02-19 12:48:48
`depth`	1
`children`	3
`last_payout`	2018-02-26 12:48:48
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	395
`author_reputation`	101,965,608,464,038
`root_title`	"Create a counter button with AngularJS \| (English Video Tutorial)"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	38,783,142
`net_rshares`	0

@rdvn · Feb 19 '18 (edited)

Thanks a lot for approval andsuggest . Done !

properties (22)

`author`	rdvn
`permlink`	re-buckydurddle-re-rdvn-create-a-counter-button-with-angularjs-or-english-video-tutorial-20180219t152841193z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"app":"steemit/0.1"}
`created`	2018-02-19 15:28:39
`last_update`	2018-02-19 16:09:15
`depth`	2
`children`	2
`last_payout`	2018-02-26 15:28:39
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	45
`author_reputation`	12,487,610,583,231
`root_title`	"Create a counter button with AngularJS \| (English Video Tutorial)"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	38,817,232
`net_rshares`	0

@espoem · Feb 22 '18

Hi, I am sorry but we feel that this tutorial cannot be approved after all.

You focus on one directive only and make a simple example that could be read from the documentation.

- https://docs.angularjs.org/api/ng/directive/ngDblclick

You prepare the CSS almost half of the video but the styles are not really needed for any part of AngularJS. It is styled only to make it more readable and as such it has no additional value in teaching AngularJS.

Since you focus only on one directive, your tutorials are quite simple with no tutoring for the parts.

I believe that you should work on the preparation part where you put related topics together and work on the tutoring part. At the moment, the documentation is as much informative or even more and your tutorial does not bring anything new.

You can contact us on [Discord](https://discord.gg/uTyJkNm).
**[[utopian-moderator]](https://utopian.io/moderators)**

properties (22)

`author`	espoem
`permlink`	re-rdvn-re-buckydurddle-re-rdvn-create-a-counter-button-with-angularjs-or-english-video-tutorial-20180222t214411839z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
`created`	2018-02-22 21:44:12
`last_update`	2018-02-22 21:44:12
`depth`	3
`children`	1
`last_payout`	2018-03-01 21:44:12
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	914
`author_reputation`	59,289,149,412,912
`root_title`	"Create a counter button with AngularJS \| (English Video Tutorial)"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	39,703,170
`net_rshares`	0

1 reply

@steemitstats · Feb 19 '18

@rdvn, I always try to support who contribute to open source project, upvote you.

properties (22)

`author`	steemitstats
`permlink`	20180219t113152516z-post
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"]}
`created`	2018-02-19 11:31:57
`last_update`	2018-02-19 11:31:57
`depth`	1
`children`	0
`last_payout`	2018-02-26 11:31:57
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	81
`author_reputation`	351,882,871,185
`root_title`	"Create a counter button with AngularJS \| (English Video Tutorial)"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	38,767,148
`net_rshares`	0

@utopian-1up · Feb 19 '18

$0.02

<div class="pull-left">

![1UP-Kayrex_tiny.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515383984/ekyf2thxg7j2t0qro1h3.png)

</div>

<div class="text-justify">


### You've got upvoted by <code>Utopian-1UP</code>!
You can give up to ten [1UP](https://steemit.com/utopian-io/@steem-plus/steemplus-2-4-utopian-1up-is-here)'s to Utopian posts every day after they are accepted by a Utopian moderator and before they are upvoted by the official @utopian-io account. Install the @steem-plus browser extension to use 1UP. By following the 1UP-trail using [SteemAuto](https://steemauto.com/) you support great Utopian authors and earn high curation rewards at the same time. 

<hr>

1UP is neither organized nor endorsed by Utopian.io!

</div>

👍 rdvn

`author`	utopian-1up
`permlink`	20180219t152900430z
`category`	utopian-io
`json_metadata`	{"app":"1up"}
`created`	2018-02-19 15:29:00
`last_update`	2018-02-19 15:29:00
`depth`	1
`children`	0
`last_payout`	2018-02-26 15:29:00
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.018 HBD
`curator_payout_value`	0.006 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	764
`author_reputation`	2,324,758,056,093
`root_title`	"Create a counter button with AngularJS \| (English Video Tutorial)"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	38,817,308
`net_rshares`	5,124,375,422
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
rdvn	0 B		5,124,375,422	100%

@utopian-io · Feb 22 '18 (edited)

$4.09

Hey @rdvn, your contribution was rejected by the supervisor @espoem because he found out that it did not follow the [Utopian rules](https://utopian.io/rules).

Upvote this comment to help Utopian grow its power and help other Open Source contributions like this one. Do you want to chat? Join me on [Discord](https://discord.gg/Pc8HG9x).

👍 utopian-io

`author`	utopian-io
`permlink`	re-rdvn-create-a-counter-button-with-angularjs-or-english-video-tutorial-20180221t211230546z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
`created`	2018-02-21 21:12:30
`last_update`	2018-02-22 21:38:33
`depth`	1
`children`	0
`last_payout`	2018-02-28 21:12:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	3.065 HBD
`curator_payout_value`	1.020 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	337
`author_reputation`	152,955,367,999,756
`root_title`	"Create a counter button with AngularJS \| (English Video Tutorial)"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	39,437,980
`net_rshares`	735,460,689,283
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
utopian-io	0 B		735,460,689,283	0.1%