Your browser (Internet Explorer 6) is out of date. It has known security flaws and may not display all features of this and other websites. Learn how to update your browser.
X

Web Deploy 3.0 on IIS

So you’re setting up a new Windows IIS Web Server and you have heard about Web Deploy 3.5 to deploy applications to sites. It’s pretty sweet!

Installing Web Deploy 3.5

To install Web Deploy 3.5 on IIS 7.5 or IIS 8, I recommend using the Web Platform Installer. After adding Web Deploy 3.5, click Install and the platform installer will download and install the appropriate extensions for IIS.

webdeployadd

After you’ve installed Web Deploy 3.5, you’ll see a few more additional options under IIS’s home menu within the ‘Management’ section.

  1. Management Service – Go into the Management Service and Start the Service. You can optionally turn on IIS Manager Users or leave it by default to use only Windows Credentials.
  2. IS Manager Users – If you want to allow non-active directory users, you’ll need to create IIS manager users. Simply give a new user a name and a password.
  3. IIS Manager Permissions – Windows users can be granted all site access to deploy to any site, however IIS users are granted access on a per-site basis. So, if you have an IIS user you’ll need to go into each web site and grant permission.

iiswebdeploy3

HELP, the Management Service icon is not available!
If you find that the Management Service and associated icons are not appearing within IIS, it’s a potential for the web deploy not being installed correctly or the IIS management service was not installed when IIS was installed and configured. If the management service was not installed, simply open Server Manager and navigate to the IIS Role. Under the IIS features you’ll see a management service located toward the end of the list which needs to be installed. Check the box, install it, and then simply close and re-open IIS to see if the Management Service and associated icons appear.

Deploying with Web Deploy 3.5

To deploy to an IIS server that is configured with Web Deploy 3.5, you’ll need to start with a web application or site. Within Visual Studio, right-click on the Web Project and click ‘Publish’. Within the Publish Web dialog, create a new Profile and set the publish method to Web Deploy. Next, specify the service URL which is the IP or DNS name that you’ll use to point to your server. Set the Site/application to the name of your site within IIS. Lastly, specify the username and password and click Validate Credentials. If you’ve successfully validated your credentials, you can click Preview in Visual Studio 2013 to see the exact file changes that are going to occur, such as deleting, updating, or adding files. Clicking Publish will send your bits over the wire and deploy the site on IIS.

FastClick – Avoid Mobile Browser Tap Delays

because mobile web browsers don’t click fast enough…

Mobile web browsers have a short delay (300ms) when clicking on a link or activating an on-click event such that it allows the browser to successfully determine if the event was a double-click or a single-click. To mitigate this issue, you can drop in the following fastclick JavaScript script into your page and enable it to optimize the single-click events by removing the delay.

It’s important to note that the fastclick script will look at the user-agent and determine if the fastclick event listeners should be loaded or not, it will not change the behavior of desktop browsers.

AngularJS Built-in and Custom FIlters

This post on AngularJS Filters continues on a series of posts on AngularJS. Click here view the complete list of posts on AngularJS.

Filters don’t just filter data in AngularJS

Filters in AngularJS allow you to format the value that is displayed in a data-binding expression. There are several built-in filters that provide textual transformations such as uppercase and lowercase which will simply capitalize or lowercase all the characters in the string. There are also filters for presenting dates and currencies. In the example below, I’ve illustrated a few of the common AngularJS filters as well as show an example for creating your own custom filter.

Custom Filters

To create your own custom filter in AngularJS, you simply create a module first and then create a filter very similiar to creating a controller. The first function allows you to inject any dependencies that you may need to access while performing the operation on the object. The filter function returns a function that is invoked on the bound value within the expression. This is then returned when the binding occurs. When the bound variable changes, the filter expression will be re-run.

AngularJS – Duplicate Controller Instances

This post on AngularJS Duplicate Controller Instances continues on a series of posts on AngularJS. Click here view the complete list of posts on AngularJS.

What happens with duplicate Controller instances?

If you declare a controller that has a few scope variables and instantiate that controller by calling out a section of your HTML DOM with the controller, ng-controller=”someControllerHere”, you may be surprised that the controller creates a specific instance for each element that uses that controller. So if you have a few sibling div’s that use the same controller, they will NOT share the same scope. If you want to share data between controllers, you’ll want to instead create a factory to share data between controllers.

AngularJS – Factory for Shared Data

This post on AngularJS Project Folder Setup continues on a series of posts on AngularJS. Click here view the complete list of posts on AngularJS.

Factories in AngularJS are Singletons

Factories are singletons, meaning that they are single instances of themselves and the data that they encompass is shared across any modules, controllers, filters, services, or directives that they are injected into. This can be useful when you’re sharing data between controllers. The example below creates a factory that has a simple data object which has a property for a name. When the input element within the firstController div changes, the scope updates the factory’s value which ripples through the secondController’s bound input element and h2 as well. This has the same effect if you change the input element within the secondController div.

AngularJS – Project Folder Setup

This post on AngularJS Project Folder Setup continues on a series of posts on AngularJS. Click here view the complete list of posts on AngularJS.

Structure your Projects

Below are several ways that you can structure your web project, feel free to incorporate ideas from any of them to build your project. Depending on the lifetime and complexity of your solution, feel free to progress to the later examples.

Vendor Scripts in Scripts, Custom Scripts in js

If you’re in .NET land you’ll most likely use Nuget to download and retrieve dependencies for your solution, one which will be AngularJS. After nugetting the AngularJS package, all of the AngularJS files will be put Scripts folder. Avoid putting any of your own scripts in the scripts folder and instead create and reference them from your own folder, ex. “js”. Depending on how many scripts you’ll create, it may be ok to have all of your scripts within the js folder. In the later examples further down this post, you’ll see other alternatives for structuring your custom script folder.

angularjsjsfolder

Structure your App

The next example focuses on structuring your custom scripts directory. In the previous example we created a custom folder “js”, but often you’ll see developers reference an “app” folder for the complete structure of their application, which may include not just JavaScript files but also HTML templates and partials. In the root of the app folder, you’ll create your module file and reference any dependencies. Create your AngularJS controllers within the controllers directory, services in the services directory, and templates/views within the templates or views directory.

angularjsappfolder

Structure a Large, Complex, or Enterprise App

The evolution on the previous example is to simply break your controller, services, and templates/views folder even further into logical areas of your application. For example, you may have several discrete areas within your app that can be broken into their own set of folders for Controllers, Services, and Templates/Views. Within the app directory, you may still have a services and templates folder for generic or global services, but then create folders for each area by naming it with the function of the area.

angularjsareas

Feel free to incorporate this structure or any combination of the ideas from above.

AngularJS – Minification

This post on AngularJS Minification continues on a series of posts on AngularJS. Click here view the complete list of posts on AngularJS.

Minification is an Issue…

Initially when you saw examples and demos on AngularJS the developer would most likely create an AngularJS controller or factory directly within the HTML or perhaps within the JavaScript in a traditional function syntax. However, this syntax breaks when using minification tools that crunch the JavaScript file. Here’s what the controller looks like that will break when minified.

In the snippet above, the $scope variable would be mutated into a random variable name that would ultimately not be linked to the $scope variable that AngularJS injects. To ensure that the Controller/Factory is able to be minified successfully, use the following additional syntax which maps the name of the variable first and then injects it into the function. Notice the array [ that wraps the function's variables and function ].

AngularJS – Links

Over the course of the past year there have been a lot of resources that I’ve bookmarked to come back to for reference and example. Besides the posts that I’ve created, check the following list for more AngularJS tutorials, videos, samples, documentation, etc.

AngularJS – Controllers

This post on AngularJS Controllers continues on a series of posts on AngularJS. Click here view the complete list of posts on AngularJS.

1) Create a Controller

Controllers will help provide additional behavior to your application besides simple data-binding that we’ve seen in previous posts. Controllers allow you to create additional functions that are invoked on initialization, clicks, submits, etc. as well as create a contained scope for that controller. You can create your controller directly within the html file or in a separate script externally loaded.

2) Connect with the Controller

To specify that a portion of the html page will use a specific controller, simply add the ng-controller attribute on a container element, such as a div.

In the next post we’ll introduce modules in AngularJS which will allow us to create controllers by referencing the module we create. Here’s a sneak peak at what a controller looks like when created from a module.

Click here to continue on to the next post about AngularJS Modules. Note: You’ll notice that the controller above fails if you’re minifiying your JavaScript. Here’s another post on how to support minified AngularJS files.

AngularJS – Getting Started

This post on AngularJS is the first in a series of posts on AngularJS. Click here view the complete list of posts on AngularJS.

1) Create a new HTML file and Add the Script Reference

Add the AngularJS JavaScript reference to your html file from a local source or an Angular CDN.

To help recover from failures to retrieve the from the CDN, you can leverage the CDN first and then fall back to the local AngularJS script.

2) Bootstrap AngularJS with ng-app=””

Add the following attribute (ng-app) to the HTML element to ensure that AngularJS is bootstrapped to look for other AngularJS Directives

Note You may see some AngularJS script examples that use data- which is just a additional prefix that allows your html to validate against W3C HTML validators, AngularJS will look for data-ng-… and ng-…

3) Simple Data Binding

To see a hint of the power of AngularJS, simply add an input textbox and a span within the html body and bind them together with AngularJS attributes. Note that the span in this example could also be bound with the handle bar, double brace syntax <span>{{name}}</span>.

4) Launch a browser and navigate to your HTML file

AngularJS will initially load its script and then search for AngularJS directives in the page, such as bindings, attributes, and even custom elements. If you begin to type in the input element you’ll notice it’s bound to the span’s content.

Check out the next post to see how to use AngularJS – Controllers to the mix to help structure you code more efficiently