1. The username you choose for the deployment credential must be unique across all Azure subscribers. 
2. The deployment credential you create is tied to your Microsoft account and is the same credential for all Azure resources which require a deployment credential. 
3. You do not want to share your deployment credential.  Again, this credential has access to publish code to all Websites and Mobile Services that your Microsoft account can administer

The Basic Setup

To get started with Angular you need to include the AngularJS JavaScript <script> tag into the head of your HTML document.  You will also want to create a .js file to hold your Angular code. The embedded CodePen below shows the HTML and JS files of a very basic Angular app. 

See the Pen ZYeWrq by Tim Benroeck (@timrnd) on CodePen.

HTML
In the HTML I added <script> references to the AngularJS framework and our app.js file.  I also referenced our Angular app in the <body> tag using the ng-app directive. A directive is Angular's way of telling the Angular HTML "compiler" to attach specific behavior to and/or transform the DOM.  It is also scoped to that tag and the children of that tag.  I have seen many examples where the ng-app directive is placed in the <html> tag.  In the body of the HTML page you notice {{"World"}} and {{1+2}}, these are Angular expressions.  Expressions are what bind the Angular code to our HTML page and they will render where they are placed. 

JS
The app.js file in this example is super boring. I am creating an Angular module called myApp with no dependencies.  If this module was dependent on another module then I would pass the other module name into that empty array.  I will talk more about dependent modules in a future post about ui-bootstrap. In this example this file is overkill because I could have easily put ng-app="" and gotten away with not declaring the module at all. 

Result
A very simple static Hello World example. 

Adding a controller

Now that we have our app structure in place, let's add an Angular controller. A controller is primarily used for handling the business logic of our application. It has it's own scope and is also limited by where in the HTML markup you put the ng-controller directive. Let's create a controller and move our application's business logic inside. 

See the Pen azJmNy by Tim Benroeck (@timrnd) on CodePen.

 
HTML
I added the ng-controller directive to the <div> tag and in quotes I put the name of my controller (cleverly named MyController) and aliased the controller as mc.  By adding an alias I can easily refer to the controller properties and functions. I then replaced the static expression of {{"World"}} with {{mc.name}}.  Now Angular will reference the logic in my controller to return the name property.  Similarly, I replaced 1+2 = {{1+2}} with {{mc.num1}}+{{mc.num2}} = {{mc.doMath()}}. 

JS
Now we are actually doing something with our Angular code.  We added a controller to our app with properties for name, num1, num2 and a doMath function that returns the sum of num1 and num2. Any logic we want when accessing these properties should be done in the controller. 

Result
A static Hello World example with logic separated from the presentation layer. 

Adding interactivity 

Let's add a form to the page that will ask the user for their name and numbers to add. 

See the Pen RNpGKE by Tim Benroeck (@timrnd) on CodePen.

HTML
We added a form and inputs for name, num1, and num2 and we are now using the ng-model and ng-show Angular directives. The ng-model directive will bind the input value to the property in our controller with a two-way binding.  Meaning if I change the value of he input or I change the property value in the controller both will reflect the new change.  I'm also using the ng-show directive to control the visibility of the heading tags.  I only want to show the greeting and math equation when it makes sense.  There is also an ng-hide directive that will hide elements if the value returns true, this way you do not need to negate the ng-show value to hide controls. 

JS
We made no changes to our Angular controller.  What!?  Yup, this is part of the magic of Angular.  The ng-model directive bound the values in the HTML input fields to our controller.  We didn't have to write any code to update the properties or submit the form to execute the doMath() function. 

Result
A proper hello world example allowing the user to interact with the page.  Try it out! 

Summary 

Although the example we used in this post was super simple, I hope you started to see the power of what Angular can do.  I'm going to continue learning more about Angular and I'll post more on advanced topics as I learn them. 

Transferring files to an Azure Website with FTP is pretty straightforward, however, I get asked questions about it regularly. 

Step 1: Find the FTP hostname. 

You can find your FTP hostname on the  Dashboard tab of your Website.  In this example my website is ftphowto.azurewebsites.net
 

Once on the Dashboard page, you will see a quick glance section on the right.  Scroll down until you see FTP HOST NAME 

For this site, my host name is: ftp://waws-prod-ch1-003.ftp.azurewebsites.windows.net/. 

Step 2: Understand your deployment credentials

This is probably the most confusing step of deploying to an Azure Website. To log into the Azure portal you need a Microsoft Account and each Microsoft Account is assigned a global deployment username and password. In the picture above you can see my Deployment / FTP User is ftphowto\tim.  My website is ftphowto and my global deployment username is tim.  This means that the password associated with my deployment user tim can deploy to any website on any of my Microsoft Account's Azure Subscriptions.  For example, let's say I had another website myblog.azurewebsites.net.  My deployment / ftp user for that site would be myblog\tim and it would have the same password as ftphowto\tim.  The global deployment account is not just for FTP either, if you deploy from a local Git repository you will use this same username / password to authenticate.  

This is awesome! I only need to remember one username / password to deploy to any website I host on Azure. However, this is also very dangerous because you would not want to share this username / password, but the portal doesn't highlight the other option of the publishing profile. In addition, many people will mistakenly reset their deployment credentials assuming they are only resetting the credentials for that particular website.

If you want credentials that can ONLY deploy to the website you are administering or you want to share the FTP credentials, then you want to download the Publishing Profile.  You can do this from the top of the quick glance section. 

 

The publishing profile may have an extension of .PublishSettings but it is really just an XML document. Open the file in any text editor or your favorite XML editor and you will see a publishing profile node with a publishMethod of FTP.  That node will have a dedicated FTP username / password with permission to deploy to only that site.  
 

Step 3: FTP your files

Now that you have the FTP Host Name and FTP username and password you are ready to FTP the files.  You can use any FTP program such as FileZilla or WS_FTP, but why complicate things ... just use Windows Explorer! 
 

If you are interested in joining, or have questions about BizSpark benefits, or want to talk about if you qualify, then grab one of my office hours slots and lets talk about it! 

• 06/03/2014: 4 slots (20 minutes each) starting at 9:00 AM CDT
• 06/06/2014: 5 slots (20 minutes each) starting at 2:00 PM CDT
• 06/09/2014: 5 slots (20 minutes each) starting at 12:00 (Noon) CDT
• 06/13/2014: 5 slots (20 minutes each) starting at 12:00 (Noon) CDT

Quick Facts

• More than 50,000 startups from over 100 countries are enrolled in the program. The program was founded in November 2008.
• The three-year program provides startups with access to a global community of advisors, investors and partners as well as Microsoft software and services.
• More than 1500 BizSpark Network Partners assist startups through financial and legal assistance, mentoring, networking and business advice.
• Thirty-five percent of these members are in the U.S., with the remainder based internationally.

How to Participate

• To qualify, startups must be less than five years old, be privately held, have less than $1 million (U.S.) in revenue and be developing software.
• At the end of three years, companies graduate, retaining perpetual licenses to all the software used while in the program and significant discounts on support and new software.

Program Benefits

• Software. Members receive immediate access to current, full-featured Microsoft software development tools, platform technologies and server products to build software applications. BizSpark members also get monthly Windows Azure benefits enabling them to quickly build, deploy and manage web applications. The three-year program provides startups with access to a global community of advisors, investors and partners as well as Microsoft software and services.
• Support. Startups become part of the BizSpark ecosystem and get access to world-class mentors, potential investors, clients, advisors, partners and valuable offers to help run their business. Startups also get access to technical, product and business training & support. Thirty-five percent of these members are in the U.S., with the remainder based internationally.
• Microsoft BizSpark Partner Network. To help early-stage technology startups, BizSpark enables access to a community of more than 1500 partners around the world — all involved in supporting entrepreneurship by providing mentoring, advice, investment, training, marketing and services. Some partners include Startup America Partnership LLC, Startup Weekend, Founder Institute Inc., DEMO, TechStars, SVForum, Seedcamp, RocketSpace Inc., 500 Startups and many more. More details can be found at http://www.microsoft.com/bizspark/Partners/Default.aspx.
• BizSpark Alumni. Graduates retain perpetual licenses to all the software used while in the BizSpark program and significant discounts on support, cloud access and new versions of software.

If you are interested in BizSpark then please contact me because I can pre-qualify you and help you get the most out of your benefits!

As you can see from the above example Construct2 allows for Functions, Loops, and If statements just as you would write in any programming language.   Construct2 also has a library of standard gaming attributes, behaviors, and movements that can be added to any object to rapidly build and prototype 2d games.

Construct2 is a powerful game engine that enables developers of all skill levels to build games and target multiple platforms.  If you've never built a game before I highly encourage you to download Construct2 and walk through a few of these tutorials: 

• Beginner's guide to Construct 2
• Building a platform game - a beginner's guide
• How to make a Platform game with Enemies  
• Other top rated tutorials 

The most intimidating part of game development (for me) was building the graphics and animation frames needed to make an engaging game.  Luckily there are some fantastic designers out there who have built gaming assets and have published them for their left brained developer friends.  Here is a list of software and gaming asset sites I recommend for getting started:

Software:

• Gimp: Open source image editing software very similar to Photoshop 
• InkScape: Open source vector graphics software editor  

Media 

• Open Game Art
• 2d Game Art for Programmers
• Kenney Donation Pack
• CodeFoster.com's Media Reference Sheet

Game development is a challenging and fun experience that I feel all developers should experience.  I was very intimidated by game development but Construct2 removed a lot of the complexity I was worried about and allowed me to focus on developing the actions for the game and not how to add physics to my jumping character. 

One of these resources is Azure Mobile Services. Azure Mobile Services provides developers the ability to quickly deploy a full featured and scalable backend for their application. Their application can be written in any language and deployed to any platform (including iOS and Android) because all features of Mobile Services can be accessed via a REST API. To assist developers even further there are SDKs available for C#, JavaScript, iOS, Android, and cross platform tools like Xamarin and PhoneGap. 

Some features of Mobile Services include: 

• Data storage
• User authentication and data authorization 
• Custom server side scripts written in Node.JS or C#
• Push notifications for Windows, iOS, and Android applications 
• A scheduler service for running reoccurring tasks

Getting Started with Azure Mobile Services using the javascript API:

Why is this important?

Because 9 out of 10 elementary / junior high / high schools have zero computer sciences classes, and by 2020 it is estimated that millions of technology jobs will be left unfilled by American workers. Of course these jobs will be filled by employers choosing to outsource the work or hiring foreign employees. This is a large opportunity that the future American workforce will potentially be missing out on, if this trend continues. 

The CSEdWeek website provides some great tutorials for students of all ages and programming skill levels to get started writing code.  There are plenty of resources for learning, teaching, and promoting.  In Illinois a citizen can sign this petition to request that computer sciences classes satisfy the high school graduation requirements for math or science.  Check out code.org/stats for more jaw-dropping statistics about the lack of computer sciences classes in schools. 

I went to rural schools in the far western suburbs of Chicago for all of my pre-college educational years, and fortunately for me, they offered (what I know realize to be) a great computer science curriculum:  

• I learned how to type in elementary school using the PAWS in Typing Town program.  This program was really fun and it included typing games like a cat catching mice and kayak racing.  The faster and more accurate I typed,  the faster my kayak went!  While we typed, the teacher made each student in the class put a cardboard box over our keyboard so we could not see the keys. I thought all schools taught typing classes, and I was in disbelief when I learned that my 13 year old brother’s school did not offer any typing classes. I think that typing is an extremely valuable skill that every child should be mandated to learn in elementary school.
• Another class that was offered in my earlier years of school was a Logo Programming Class that taught us how to draw pictures using "programming instructions".   There was a "turtle" and it drew and changed colors when the proper commands were submitted.  I think the most creative thing I created in that class was a picture of an ice rink (a tribute to my love of hockey) - it was hard!  If you want to give it a try, here is a Javascript Logo Interpreter. 
• In middle school our teachers put on an intramural week in which they taught a class about anything they wanted.  Some teachers took the easy way out and had reading or board game "classes", and one teacher even taught a class on the tricks and techniques of the yo-yo.  Even though these classes were entertaining diversions from our normal class schedule, my favorite class was put on by our math teacher, Mr. Reinhardt, who taught a Q-Basic class.  As you might expect, this class was not the most popular, but it taught the main programming concepts: variables, looping, and branching.  The only assignment I remember was writing a program to output the first 100 numbers in a Fibonacci number sequence.  I still remember the rush I got when I figured out I needed a swap variable.
• In high school, my classmates and I learned how to use Microsoft Office and could optionally take classes teaching web programming (HTML), computer assembly, and Macromedia Flash programming.  The school also partnered with the local community college and I was able to take an introduction into Visual Basic for both high school and college credit. 

Even if a child chooses not to pursue a higher education or a job in the computer science/technology space, I think it is our responsibility to provide each child with the educational opportunity to pursue this avenue if they would like to learn more about it from an early age. Programming is becoming just as relevant (if not more relevant) in our every day lives as math, language arts, science, and social studies, and I firmly believe that we need to acknowledge this by providing it with a place in our children's school schedules.