5/15/2015

My First AngularJS App in Plunker

I created my first AngularJS application the other day, in Visual Studio, and uploaded to an Azure account.  Blogged about it here:

So my brother, suggested I write an similar app, but this time use the http://plnkr.co/ site.

So here goes...

First, I had to figure out my GitHub user name and password.

After changing the password, was able to log in:

Then went to the Plunker site:



And logged in with the GitHub account:


Once logged in, they have a list of already created applications you can view, so I picked an AngualJS sample app:



Clicked on edit, to see the code underneath:


So back to the GitHub site, it appears I have no repository's:


So let's create one:


And now it's created:


Clicked on the + to create a new file:


To make is simple, and because I'm a bit lazy, I went to the AngularJS org website to grab a sample code snipped:


Copied and pasted the code snipped into the GitHub page:

Clicked Preview, added a comment and committed changes to the Index.HTML file:


File now exists:


Back at the Plunker site, have the option to Launch the Editor:


I was looking for a way to import the Index.HTML page from GitHub, didn't see it, so copied and pasted the raw code into the Editor, it pre-named the file index.html:


Clicked the --> Run Button, and the page rendered on the right hand side of the screen, entered name "JB" and it displayed correctly:


This entry level project may not stop world hunger, but it shows how to get up and running in AngularJS in Plunker website in under a half hour.  I added the steps for GitHub, although it's not required.

The extremely complex code is on my Github site: https://github.com/jbloombi/Javascript

And on Plunker: First AngularJS app, simple yet effective. http://plnkr.co/users/jbloombi

Thanks for reading~!  Thanks DM (my brother in Raleigh) for suggesting this blog post~!  His post is located: http://bloomonclientside.blogspot.com/2014/09/plunker.html

No comments:

Post a Comment

Mountain Living