8 Questions to Ask to Determine if you should be in the Cloud

Everyone wonders if they should be moving to the cloud. Here are 8 starter questions you should ask yourself. Are you...


  1. Spending too much time on your IT infrastructure?
  2. Anticipating future growth?
  3. Needing to react quickly to change?
  4. Tired of hassling with Microsoft Exchange?
  5. Wanting to run your software as a service?
  6. Constantly adding more hardware to run your company
  7. Worried that your servers may not be backed up properly?
  8. Concerned about disaster recovery?

If you answered "Yes" to even one of these questions, a cloud solution may be just what you need. Companies are successfully using the cloud to scale their applications up and down without purchasing more equipment for the organization. Moving your applications into the cloud offers multiple benefits including:

  • Better security
  • Less manpower needed to manage software updates
  • More flexibility in application management
  • Disaster recovery is easier

If any of these keep you up at night, you should consider moving into the cloud. Fairway Technologies can help you migrate your infrastructure and your software to the cloud. Read more in our special report entitled Why Move to the Cloud?

PDSA is now Fairway Technologies!

PDSA is now Fairway Technologies PDSA has merged with Fairway Technologies! This is definitely a case of one + one = three! When two great companies, that have made customer service a priority, come together, the end result is spectacular for our clients. With this merger, Fairway now has over 50 employees to help serve our customers in everything from Java to Oracle to SQL Server to .NET.

Stay tuned for more exciting news as we get our two companies completely integrated. In the meantime, it is business as usual at PDSA and at Fairway. All employees at PDSA and Fairway are very excited about our integration and will be sharing all resources to ensure a smooth transition.

Testing is Not Just for Quality Assurance People

Testing Every developer needs to test their code, or have it tested by someone. I don’t know about you, but I am horrible at testing my own code. Does this mean that I do not need to test my code? Heck, no! It is always best if you do not rely on your end-user to test your code. This can end up with a very frustrated user, and your user can lose faith in your ability to get their project done. There are several ways you can get your code tested. This article explores a few of these methods for testing and talk about the advantages and disadvantages of each.

Why you should Test your Code

We all know that we need to test our code prior to putting it into production. Testing is your way of ensuring that the code you have written actually works as expected. But it is not enough to check that it works as expected, but also under varying circumstances, and with different inputs. For example, what if someone takes the database offline? Will your code recover gracefully from this exception? Does your code inform the user that there is a problem with the database connection in a friendly, easily-understood manner? All of these questions should be answered in the testing of your code. You need to simulate these exceptions so you can test your exception code.

Performing the act of testing often helps you improve the quality of your code. As you think about the various scenarios that can go wrong, you add additional code to handle these scenarios. This leads to your code being more robust and ultimately more maintainable and user-friendly. You will find that taking time to test your code makes you a better programmer in the long run. Your boss, and your end-users, will appreciate the extra effort.

Problems with the Develop/Test Cycle

There are a lot of disconnects between the development of the code and testing of code. In many cases there is too much code embedded in the user interface (UI). Too much code in the UI makes testing hard because the tools for testing user interfaces aren’t very robust. It is also hard to determine if all of the code in the UI has actually been tested. A tester has to know all of the inputs to give the UI to have it run all of the code.

This leads to yet another disconnect; there is too much communication required between a developer and the QA person. Sometimes a developer will forget to tell the QA person about a “special” case. In other cases, a QA person forgets to tell the developer about something that failed, so it does not get caught and ends up as another bug that, hopefully, will be found later.

Another problem is when a developer thinks they have fixed a bug, only to find out that the fix caused a bug in another part of the program. The QA department may not know to test that other part of the program which could mean a bug gets shipped to a customer. Or, the QA department thinks it affects other areas, so they end up doing a lot more regression testing than maybe they need to.

How to Test Your Code

There are many different methods used to test code. Here are some different methods you can use to ensure you are writing quality code.

  • Use a Quality Assurance (QA) person or company
  • Have your end-user test
  • Have a co-worker test
  • Write code to test your code

Of the above listed methods of testing, the first three involve humans, while the last one is a more automated approach. Let’s look at these different methods of testing code.

The Human Approach

Having a human test your code does have a lot of advantages. First off a human is going to be able to click on different buttons and test the UI very well. Having different people test your code can be helpful because each person may think of different things to test. In addition it will take less time up front to develop your software. 

But just as there are advantages to using humans for testing, there are also disadvantages. Testers find bugs, document them and push them back to you to re-code. After this, the tester has to go back and re-test. You will find this takes a lot more time in the long run. Many times prior to testing someone has to create records in a database, and afterwards get rid of tables, records, or files on disk. This is a very time-consuming and error-prone operation. You also find that the burn-out rate for QA people is very high. You frequently have a high turnover rate in this job function. So there are many down-sides to using humans to perform testing.

The Automated Approach

Instead of having a human do all the testing, you should start to use the great testing tools that are available in Visual Studio to create automated tests. Unit testing has become very prevalent in today’s professional software shops. Unit testing simply means you write a program, or most likely a series of programs to test each line of code you write to ensure that it operates properly under all circumstances.

While this sounds like a lot of work, and it can be more work up-front, you will more than make up that time by avoiding multiple regression tests by a human. You can automate the setup and tear down of databases, files, etc. With the correct architecture you can automate almost all the various inputs a human tester would have to enter by hand.

You will also save the time you normally eat up when you do your own testing by pressing F5 to start Visual Studio, wait for the compile process, click through a half dozen menus to finally get to the point where you want to start testing. As you know, this can sometimes take 15 seconds to a minute depending on how large your application is. Instead, you can run one or two tests in just a couple of seconds. This will add up in saving you many hours over the complete development cycle.

As you can see, there are many advantages to an automated approach over a human approach to testing. Automated tests are repeatable as opposed to having a human who might forget to test something. You will end up with more of your code tested because things won’t be forgotten. Because you will be forced to think of how to test your code while you are writing it, you will write better code. You will also save time on the setup and the tear down of the tests since these tasks can also be automated.

Of course, there are disadvantages to the automated approach as well. First of all, it does take more time up-front to develop these tests. Automated tests are only as good as the person that develops the tests. The tools to test user interfaces are not too great at this time without spending a fortune on third party testing tools. Of course, if you are using good N-Tier techniques, MVC, MVP, MVVM or similar design patterns, there should be very little UI for you to test anyway. 

Which Approach Should You Use?

The big question is this: do you use automated unit tests or do use a QA department? I still think you need a little of both. You want to get as many automated tests as you possibly can as this will save a lot of regression testing. Then the QA department can focus more on system testing, workflow and ensuring the correct data is flowing all the way through the application. The QA department can also focus on the UI features that are difficult to automate. A good mix of the two will go a long way toward making your applications much more robust and error free.

Architecting Your Code for Testing

As you are coding your application there are things you can do to prepare to take advantage of unit testing. Correctly architecting an application will do wonders for re-usability, readability, upgradeability, maintainability and testability. Take advantage of the design patterns that exist today such as MVC, MVP, MVVM or derivatives thereof. All of these patterns help you remove code from the user interface layer of your application. Removing code from the UI layer is this is the single best thing you can do to have a well architected, easily testable application.

Your UI code should strive to just call or bind to classes. Each class you write is where all the logic is contained for your application. Moving all application logic into classes, you take advantage of the various unit testing tools in Visual Studio. All of these classes should be combined into assemblies to aid not only in testing, but also in re-usability. 

Other techniques you should employ are to make your methods as small as possible.  A method should do one thing and one thing only. This makes testing that method easy as you most likely will only need to write one method to test that method. It is better to have many smaller methods and smaller tests, than one large method with lots of tests against that one method. One last technique is to use code generation tools for generating your CRUD layer. Create, Read, Update and Delete logic is employed in almost all business applications and is very standard code. There is no reason to hand-write this code with all of the tools available today to generate it. And, generated code is generally code you do not need to test. If the code generator is good, it will generate bullet proof code every time.

Visual Studio Testing Tools

Beginning with Visual Studio 2008, unit testing tools were added to almost all SKUs of Visual Studio. This means you do not need to purchase Team Foundation Server to be able to use unit testing. It also means you do not have to use NUnit or some other third-party application for unit testing. It is available to you right out of the box. Of course, the TFS version of Visual Studio has many more features, but for basic unit testing, you will find everything you need in the normal versions.

Summary

Unit testing is something every developer should employ as a part of their software development life cycle. Not only will help you improve the quality of your code, it will save you time and money in the long run. As you focus on architecting your applications for unit testing, you will find that your code will become re-usable, maintainable and more robust. Take some time to learn about the unit testing tools built-in to the Visual Studio suite of products and you will be on your way to better productivity.


The Importance of a CIO

CIO Services Are you without a CIO in your company? Did you know that a good CIO can save you money and keep your projects on-time and on-budget. What are some of the key duties a CIO performs that helps a company achieve its goals?

IT Assessment

A continuous review of your business and IT organization to determine where they are aligned and where they are mismatched.

IT Roadmap

Lay out the future vision of where your IT organization needs to be in order to be aligned with your company's financial and strategic goals.

IT Executive Mentoring

Be the go-between the executive team and the IT team. Ensure that the projects being worked on are in alignment with what the business needs.

Application Lifecycle Management

Look at IT processes and personnel to identify areas where those processes might need a little more guidance. Provide a comprehensive guide to how all IT projects should be run.

More Information?

If you would like more information on how a CIO can help you visit our page here. Call us for a complimentary assessment and how our Virtual CIO service can assist your company keep your IT projects on-time and on-budget.

Everyone Needs Help Now and Then...

Professional MentoringYes, you can google for answers to tricky programming problems. However, when you get back 5 different answers, how do you know which one is the best one to use? This is where PDSA, Inc. comes in. We have over 270+ man years of development expertise among our developers. We use tried and true techniques every day in our consulting business to solve many of the same business programming problems that you are facing. When you engage with PDSA, you aren't just getting one expert, you are getting a whole company of experts. 

Unlike tech support from a company like Microsoft where you pay for help whether or not they solve your problem, with PDSA you only pay if we solve your problem. We also bill in 15 minute increments instead of for a whole hour. This will save you money, and most importantly, time. We have been successfully mentoring with many of our clients for years. They use us periodically as needed to answer their tough questions, or just to bounce ideas of us. However you choose to use us, know we have your best interests in mind. We have been around for over 25 years and we are proud of the fact that we have so many repeat customers. We are successful because we make you successful.

For more information on our mentoring services, visit our Mentoring page at http://www.pdsa.com/Mentoring.

Call us today at (714) 734-9792 and ask for Michael Krasowski or David Lefort. We will then get you in touch with one of our senior technicians that can assist you with your mentoring questions.

MVC, Web Forms, or Client-Side Technologies?

It seems like everywhere you read, everyone is talking about using Angular, Bootstrap, or MVC to create web applications. But what about programmers still working in Web Forms? You want to continue to use Web Forms and still build mobile web apps, use jQuery, Angular and Bootstrap. Not to fear, Web Forms is not dead, and nearly everything you can do in MVC, you can also do in Web Forms. Web Forms can also use client-side frameworks just as well as MVC.

MVC Advantages

Many programmers feel they have to choose one technology over another. But, there is really no reason you can’t program in both MVC and Web Forms and use each for what they are good at. Many MVC programmers give many reasons why you should use MVC as opposed to Web Forms. The reasons I hear more often are:

  1. Fine control over the HTML generated
  2. Ability to unit test
  3. Can control the "id" attribute generated
  4. Easier to use jQuery and JavaScript because no generated "id" attribute
  5. Ability to use Friendly URLs
  6. No ViewState sent to client

Web Forms Advantages

Of course, programmers that like Web Forms have many reasons why they want to stick with it:

  1. Rapid Application Development
  2. Less code to write because of rich server controls
  3. Lots of server controls to choose from
  4. Great third-party support
  5. Easy to preserve state
  6. They like the event driven model
  7. Hides the complexity of the web

Client-Side Advantages

Of course there are many advantages to using client-side code as well.

  1. Very fast
  2. Greatly reduces the need for post-backs
  3. No hiding of web behind any server-side technologies
  4. Lots of frameworks to help you develop

Which One to Choose?

Each of the technologies above has disadvantages as well. The best part is, you do not need to just choose one. You can have the majority of your web application written in Web Forms and still start using client-side technologies like jQuery and Angular. You can also start adding new pages in MVC and these can integrate with your Web Forms pages with no problems.

Almost all of the advantages outlined above for using MVC can also be accomplished in Web Forms as well. You might have to slightly modify the way you work in Web Forms, but it can be done. Both technologies use ASP.NET, so the engine is the same. If you wish to just stick with Web Forms, then do that. If you want to learn more about having Web Forms take advantage of MVC-like features, read my old blog post called Web Forms is Not Dead located at http://bit.ly/2ehCTP1.

Using Angular

Many Web Forms developers ask about Angular and using it in their Web Forms apps. The great thing about Angular is you can easily add it to your Web Forms or MVC application. You will most typically use Angular for new pages that you wish to create in your existing application, or to replace slow performing pages. This means you will probably start with a plain old HTML page and then add your Angular code to that.

Summary

It is up to you which technologies you are going to use when developing your web applications. Using ASP.NET Web Forms or MVC are both good choices and both can be made to run quickly or slowly depending on how you code it. Taking advantage of client-side technologies such as Angular and jQuery can give you a performance boost. If you need help with any migration or learning any of these technologies, please contact PDSA and we will be glad to help.

More Angular Routing Topics

In the last blog post (Introduction to Angular Routing) you were introduced to routing in Angular (v1.x). You learned the basics of how to route to different HTML fragments using the routing features of Angular. In this blog post you learn more things you can do with routing such as specifying the controller to use, aliasing the controller using “as”, passing parameters to a page and programmatically calling a route.

Set the Controller Name

If the target page for your route has some functionality that needs to be performed, you will have a controller associated with that page. An additional property you can set on the route object when configuring your routes is the controller property. Set this property to the name of the controller function for that page.

.when('/page2/',
{
  templateUrl: 'page2.template.html',
  controller: 'Page2Controller'
})
When using the controller property in your route, you must include the .js file that contains the code for that controller on your main HTML page.
<script src="app.module.js"></script>
<script src="index.controller.js"></script>
<script src="page2.controller.js"></script>
Below is the code for the Page2Controller. This controller is a simple sample that just sets a message property with some hard-coded text using the $scope application object.
(function () {
  'use strict';
  
  angular.module('app')
   .controller('Page2Controller', Page2Controller);
  function Page2Controller($scope) {
    $scope.message = 'Page 2 says \'Hello\'';
  }
})();
Once the message property is set on the $scope object, that value can be displayed on the HTML fragment using the data binding syntax.
<h2>{{message}}</h2>

Alias the Controller

When developing Angular pages, it is always a good idea to alias your controller using the “as” syntax as shown in the following code snippet.
<div ng-app="app"
      ng-controller="IndexController as vm"
However, this syntax is only used when you are setting the ng-controller directive on your main page. On your page fragments you are not using this directive. Not to worry, the route object supports a controllerAs property so you can set this alias name.
.when('/page1',
{
  templateUrl: 'page1.template.html',
  controllerAs: 'page1',
  controller: 'Page1Controller'
})
.when('/page2',
{
  templateUrl: 'page2.template.html',
  controllerAs: 'page2',
  controller: 'Page2Controller'
})
When you use the "as" syntax, the application scope is passed into your controller as ‘this’. Assign 'this' to a local variable in your controller, then create any properties you want on the application scope so you can use those properties in your HTML. In the Page1Controller, shown below, create a property named message and set it to a hard-coded string.
(function () {
  'use strict';
  
  angular.module('app')
   .controller('Page1Controller', Page1Controller);
  function Page1Controller() {
    var vm = this;
    vm.message = 'Hello from Page One!';
  }
})();
To use the message property on your HTML page, prefix the property name with the value you set in the controllerAs property. To display the value in the message property in your page1.template.html page you use the following code.
<p>{{page1.message}}</p>
Again, if you are specifying controllers in your routing, make sure you include the appropriate .js files on your index.html page.
<script src="app.module.js"></script>
<script src="index.controller.js"></script>
<script src="page1.controller.js"></script>
<script src="page2.controller.js"></script>

Pass a Parameter to a Route

Sometimes you need to pass a parameter to a page. You can also pass parameters to a route. In the anchor tag shown below, you are passing a value of 12345 to the route defined by /page2.
<a href="#/page2/12345" 
   class="btn btn-primary">
  Page 2 with parameter
</a>
Keep your original /page2 route, but add an additional route using a when() function. After the /page2 add another forward slash followed by a colon (:) and a variable name such as id.
.when('/page2',
{
  templateUrl: 'page2.template.html',
  controllerAs: 'page2',
  controller: 'Page2Controller'
})
.when('/page2/:id',
{
  templateUrl: 'page2.template.html',
  controllerAs: 'page2',
  controller: 'Page2Controller'
})
In your Page2Controller function, you now need to have the $routeParams injected. Add the $routeParams service as a parameter to your Page2Controller function. Before you use the parameter, test to see if the value was passed in by using an if statement as shown in the following code.
function Page2Controller($routeParams) {
  var vm = this;
  if ($routeParams.id) {
    vm.message = 'The id passed in was: '
                 + $routeParams.id;
  }
  else {
    vm.message = 'Page 2 says \'Hello\'';
  }
}
If you need more than one value passed, just add another route such as the following:
.when('/page2/:id/:extraText',
{
  templateUrl: 'page2.template.html',
  controllerAs: 'page2',
  controller: 'Page2Controller'
})
In your index.html, you call this route using the following:
<a href="#/page2/123/abc" 
   class="btn btn-primary">
  Page 2 with 2 parameters
</a>
In the controller for this page, add another test for this additional parameter.
if ($routeParams.extraText) {
  vm.message = 'extraText=' + $routeParams.extraText;
}

Programmatically Calling a Route

Many times, when running code in one of your controllers, you will have a need to redirect the user to a new route. This is accomplished by calling the path() function on the $location service and then passing in one of your defined routes. The following code shows a couple of functions you may have in a controller. If either of these functions are called, the URL of the browser is set to the new path, and then the user is directed to the appropriate page. Make sure you add the $location service as a parameter to your controller function.
function IndexController($location) {
  function goToPage1() {
    $location.path("/page1");
  }
  function goToPage2() {
    $location.path("/page2");
  }
}

Summary

In this blog post you learned how to route to page fragments, but specify the controller to use with that page. The controller and controllerAs properties of the route object as used to set the information for the controller to be used with a page. You are able to add one or more parameters to a route. The $routeParams service can retrieve as many different parameters passed to a controller as you want. Use the $location service to programmatically direct a user to a route in your Angular application.

Sample Code

You can download the code for this sample at www.pdsa.com/downloads. Choose the category “PDSA Blog”, then locate the sample PDSA Blog Sample: More Angular Routing Topics.

Introduction to Angular Routing

To build a Single-Page Application (SPA) using Angular (v1.x), you typically build a single HTML page and inject HTML fragments within this one page as the user navigates within your application. Navigation in Angular employs a mechanism called routing. This blog post explores how to perform navigation within a SPA using Angular routing.

Server-Side Development

As you make the transition from server-side development to client-side development, you will find many of the same concepts that you employ on the server-side have equivalents on the client-side. Of course, they are done differently, but the concepts are there nonetheless.

When developing server-side web applications with MVC or Web Forms, you use a common layout page for all of the standard “chrome” you want around your content. This chrome is your header, footer and maybe a sidebar. The header consists of a menu system and maybe some graphics. The footer might have a copyright and some additional links. You do not want to duplicate the header and footer on each page in your application as that is a maintenance nightmare. Instead, each MVC or Web Forms application has a special “layout” page where you create the chrome. You create your content pages with the HTML fragments you wish to display to the user, and inject those fragments within the layout page.

MVC has a special page named _Layout.cshtml located under the \Shared folder (Figure 1). This page has a piece of Razor code called @RenderBody() which tells MVC into where to inject your fragments of HTML and Razor code. Web Forms uses a concept called a “Master Page”, shown in Figure 2 as Site.Master, which uses a <asp:ContentPlaceHolder /> control to specify where to inject your content pages.

Both these approaches keep the chrome for your web application in a single location. This makes changes to your website easy to accomplish. When creating a SPA using Angular (or any other client-side framework), you should strive to use this same technique.


Figure 1: MVC uses a shared layout page



Figure 2: Web Forms uses a master page

Angular ng-view Directive

Angular has the same mechanism for defining a HTML page with the chrome, and a directive for specifying where to inject the HTML fragments that make up each content page. You typically create an index.html page with the chrome and a single <div> tag that uses the Angular directive ng-view (Figure 3). This directive is what is used to specify the location in which to inject the content pages.
It is important to note that only one instance of ng-view may be used in your Angular application. In other words, you cannot nest an ng-view within another ng-view. If you are using this approach correctly, you shouldn’t have to nest ng-view anyway.


Figure 3: Angular uses any html page for the chrome

Download Routing JavaScript File

In order to use Angular routing, download the angular-route.js file into your project. If you are using Visual Studio, you may use the NuGet Package Manager to search for and install the AngularJS.Route package. Or, open a browser and navigate to https://code.angularjs.org/1.5.8/ and download the angular.route.js file from there. Either way, once you download this script file you will want to reference it from your main HTML page. Be sure to place it after you have referenced the angular.js file as shown in the following code snippet.
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>

Declare Your Intention to use Routing

The first step in any Angular application is to define a module that is the main entry point for your application. You typically define a module using the following code.
(function () {
  'use strict';
  angular.module('app', []);
})();
As you are going to be using routing in your Angular application, this is now a dependency that you need to tell Angular about. The second parameter to the module() is an array of strings for you to specify the names of any dependencies needed for your application. In the code snippet below you are passing in a single element array with the value being ‘ngRoute’. The ‘ngRoute’ value is defined as a provider in the angular-route.js file you downloaded and included in your project.
(function () {
  'use strict';
  angular.module('app', ['ngRoute']);
})();

The HTML Page

The complete HTML page, index.html, is shown in Listing 1. This page has a couple of anchor tags <a> that are used for our routing sample. In addition the <div ng-view> element is also defined within a Bootstrap row and column. This is where all HTML fragments will be displayed when you route to a new path.
<!doctype html>
<html>
<head>
  <title>Routing Sample</title>
  <link href="Content/bootstrap.min.css" 
        rel="stylesheet" />
</head>
<body>
  <div ng-app="app"
       ng-controller="IndexController as vm"
       class="container">
    <div class="row">
      <div class="col-sm-12">
        <a href="#/page1" 
           class="btn btn-primary">Page 1</a>
        <a href="#/page2" 
           class="btn btn-primary">Page 2</a>
      </div>
    </div>
    <br />
    <div class="row">
      <div class="col-sm-12">
        <div ng-view></div>
      </div>
    </div>
  </div>
  <script src="scripts/angular.js">
  </script>
  <script src="scripts/angular-route.js">
  </script>
  <script src="app.module.js"></script>
  <script src="index.controller.js">
  </script>
</body>
</html>
Listing 1: The HTML page for our routing sample

The index.controller.js file that is referenced in the above web page is an empty function as there is no functionality needed for this sample web page. The contents of the index.controller.js file is shown below just for completeness.
(function () {
  'use strict';
  
  angular.module('app')
   .controller('IndexController', 
               IndexController);
  function IndexController() {    
  }
})();

Define Your Routes

After you have told Angular that you are using routing, it is now time to create some routes. Within the app.module.js file (or create another file called index.route.js) add the code shown in Listing 2.
angular.module('app')
.config(function ($routeProvider) {
  $routeProvider
  .when('/',
  {
    template: ''
  })
  .when('/page1',
  {
    template: '<p>This is some text for Page1</p>'
  })
  .when('/page2',
  {
    template: '<h2>Page 2</h2>'
  });
});
Listing 2: Define routes to your Angular application.

The code in Listing 2 retrieves the module named 'app' from Angular. It then chains the config() function to instantiate the routes for the module. Pass in your custom function to the config() function. This function is passed the $routeProvider provider, which is defined in the angular-route.js file. You use this $routeProvider variable to define the routes you wish to configure using the when() function. Each when() function is passed two parameters. The first parameter is a string that is matched up with the path you define in your web page. For example, <a href="#/page1" …/> matches up with when('/page1'). The # symbol is used so the browser does not try to navigate to a page. Angular looks for anything that starts with “#/” and knows that you are using a route. Figure 4 shows the index.html page and the code in the $routeProvider definition and how they match up.


Figure 4: Use a # symbol to specify a route

The second parameter to the when() function is an Angular route object. This object has several properties that can be set. For this initial sample the template property is set. The template property lets you define any HTML code you wish to display in the ng-view directive when this route is invoked. In Figure 5 and Figure 6 you can see both the final web page and the corresponding code in the $routeProvider which caused that HTML to be displayed.


Figure 5: Page 1 shows some standard text


Figure 6: Page 2 shows some bold text

Handling a Bad Link

If you have a link in your HTML page that does not have a corresponding when() function configured, you should display some error text to your user. After the last when() function is called, add an otherwise() function as shown in the following code snippet.
.otherwise(
{
  template: '<h2>Bad Link!</h2>'
});

Avoid Hard-Coding HTML

The problem with the previous example is you hard-coded some HTML within your JavaScript. It is a best practice to keep all your HTML in .html files in your project. Instead of defining your routes using the template property, use the templateUrl property instead as shown in Listing 3. The templateUrl property must be set with the full path in relation to the index.html page. In this sample, all the .html pages are in the same folder. However, you might need to specify something like the following: templateUrl: 'app/templates/page1.template.html'.
angular.module('app')
.config(function ($routeProvider) {
  $routeProvider
  .when('/',
  {
    template: ''
  })
  .when('/page1',
  {
    templateUrl: 'page1.template.html'
  })
  .when('/page2',
  {
    templateUrl: 'page2.template.html'
  })
  .when('/error',
  {
    templateUrl: 'badlink.template.html'
  })
  .otherwise(
  {
    redirectTo: '/error'
  });
});
Listing 3: Use the templateUrl property to keep HTML code in .html files

In Listing 3 another new property was introduced in the otherwise() function, redirectTo. The redirectTo property allows you to redirect to another route. This property is most typically used in the otherwise() function. In the sample in Listing 3 if you attempted to go to a href such as the one shown in the following code snippet, you would be redirected to the path /error, which would then display the HTML in the badlink.template.html file.
<a href="#/badLink" 
   class="btn btn-primary">
     Bad Link
</a>
Another option for the otherwise() function is to simply specify a string as the first parameter. If a string is specified instead of an object, it interprets the string as a redirect to.
.otherwise('/error')

Summary

In this blog post you learned the basics of routing in Angular. Just like server-side web development, the concept of having a single place for all your chrome is also present client-side. The ng-view directive is used to specify where in your HTML page you wish to display other HTML pages. You will need to download angular-route.js in order to use routing in your Angular web pages.

Sample Code

You can download the code for this sample at www.pdsa.com/downloads. Choose the category “PDSA Blog”, then locate the sample PDSA Blog Sample: Introduction to Angular Routing.

If You Fail to Plan, You Plan to Fail

IT Plan If you do not have a set of guidelines, templates and documents which describe and assist you in the many phases of a software project and the many challenges of running an IT organization then what are you doing in IT management? You must have these items in place in your IT organization in order to run a lean, efficient, on-time and on-budget shop. There are several items you must have in order to have a successful development team.

  • Application Lifecycle Management
  • Architectural Guidance
  • Management and Human Resource Practices

Check out our special report and see the kinds of guidelines, templates and documents you must have for each of the above items.

You Should be Using Bootstrap

Bootstrap Most users are browsing your website using a mobile device. Does your website look good? If not, then you should consider using Bootstrap for your CSS.

What is Bootstrap?

Bootstrap is a set of CSS and jQuery that helps you create responsive web pages. Responsive means that the styles of your website change depending on the device the user is browsing it from. This keeps your website looking good regardless of how the user browses to it.

How Does it Work?

Bootstrap's CSS changes on the fly based on the size of the browser. It uses what are called Media Queries which are a part of the CSS standard. A media query reads meta-data from the browser, then changes the styles to something that works based on the height, width or other browser information. For example, on a large desktop browser, a user might see columns of data across the page. However, on a mobile browsers, the user would see that same data, but going down the page. There is no additional coding your programmer has to do, this is all done just by using the appropriate Bootstrap styles.

How To Get Started

To ensure your website is responsive, you need a programmer or web designer that is familiar with Bootstrap. That person will make appropriate changes to each individual page to ensure it looks good on all types of different browsers. Yes, this will take time, but the end result is well worth the time and expense.

PDSA Can Help

Here at PDSA we have been using Bootstrap since the first version. We have successfully created many responsive websites for our clients. Contact us today for a complimentary analysis and proposal on ensuring your website can be viewed from all of today's mobile devices. Call us at (714) 734-9792 and ask for David Lefort or Michael Krasowski.