Windows Universal Apps: “The page name does not have an associated type in namespace, Parameter name: pageToken”


When building Universal Windows Apps, and using Prism to compose the application, you would have changed your App.xaml.cs class to something like this:

public sealed partial class App : MvvmAppBase
    {
        #region Private fields

        private readonly IUnityContainer container;

        #endregion

        #region Constructors

        public App()
        {
            this.InitializeComponent();
            container = new UnityContainer();
        }

        #endregion

        #region Overrides of MvvmAppBase class

        protected override Task OnLaunchApplicationAsync(LaunchActivatedEventArgs args)
        {
            NavigationService.Navigate("Main", null);
            return Task.FromResult<object>(null);
        }

        #endregion

        #region Unity Container methods

        protected override Task OnInitializeAsync(IActivatedEventArgs args)
        {
            container.RegisterInstance<INavigationService>(NavigationService);
            ViewModelLocationProvider.SetDefaultViewModelFactory((viewModelType) => container.Resolve(viewModelType));
            return base.OnInitializeAsync(args);
        }

        #endregion
    }

But when you try to run your application you would get the error The page name does not have an associated type in namespace, Parameter name: pageToken

The reason is simple :). Your MainPage (and all views for that matter) needs to be inside the Views folder inside your project and not in the root. This applies to both Windows and Windows Phone app projects.

Advertisements

Angularjs: Simple minimalistic HTML 5 application fetching data from REST API


Some of my friends have been asking me lately how to go about building a bare minimum HTML client that talks to a service and displays data on a view using Angular without using all those fancy MVC templates in Visual Studio. So I thought I’d write a simplistic application that goes about and fetches some sample data from a remote service and display in on a view.

The application uses the “Empty Project” template from Visual Studio Asp.Net web application project type and shows just the bare minumum libraries needed to build an angular app while integrating with some more libraries like Twitter bootstrap and toaster, that oe might end up using anyways when building a rich UI application.

I have tried to demonstrate the following concepts:

  • Project layout and architecture (just one of the many ideal ways)
  • Angular routing using the built-in $routeProvider service
  • Angular directives (Attribute directives)
  • Toaster notifications
  • Fetching server data using the angular built-in $http service
  • Twitter bootstrap for creating a responsive layout

So, here is how the project is organized

Project Structure

Project Structure

app.js:
Angular application configuration. This file also defines the route configuration

controllers:
Contains the controllers that defines the behaviours for the views. Controllers talk to the services

directives:
Contains the attribute directives

services:
Defines the service factor that fetches data from the remote service and returns it back to the controllers

templates:
Partial templates for the directives that will be injected into the views

views:
Html files defining the UI elements and layouts

The application uses a simple fake online REST API for testing and prototyping at http://jsonplaceholder.typicode.com/ for fetching a list of todo items.

In a real scenario, it  could be any service, ideally built using MVC Web API (REST API) to fetch real time data and performing real operations. For the sake of simplicity the application just fetches the todo items and displays them in a view.

Later I might update the solution to atleast implement the basic CRUD operations but for this post i just wanted to keep it simple and primarily demonstrate how to go about organizing and structuring the project and making it all work.

You can find the full working source code for the article on my github at: https://github.com/JinishBhardwaj/AngularDemo

Watch this space for further updates. Happy coding in the meantime 🙂