There are two types of 404 routes that we want to handle.

• Static 404 – the URL the user navigates to doesn’t match any route
• Dynamic 404 – the URL matches a route, but the data associated with that route does not exist. For example, you navigate to a detail page with an ID, but no item exists with that ID.

For this post, I assume that there is a component named NotFoundComponent that is the not found page to show the user. Replace this with whatever component

Static 404 routes

To set up a static 404 page, you need to add two routes to your RoutingModule configuration.

const routes: Routes = [
    // Other routes
    { path: '404', component: NotFoundComponent },
    { path: '**', component: NotFoundComponent }
]

We used a catchall route '**' that matches whatever route didn’t match above, and shows our not found page.

Make sure to keep the catchall route at the end of your routes, otherwise the routes below it will not be accessible.

Another option here would’ve been to redirect the user to the '404' route, but that way you lose the context of the URL. If the user navigates back, he would go to the non-existing route and be redirected to the '404' path again. If this is the behavior you want, switch the last route with { path: '**', redirectTo: '404' }.

Dynamic 404 routes

Now that we have the static 404 route configured, we can use the router to navigate to it whenever we want to show the not found page to the user.

this.router.navigate(['/404'], { skipLocationChange: true });

By using the option skipLocationChange: true, we have the same behavior as mentioned above. Even though the router navigates to the route, the browser URL stays the same, allowing the user to easily go back.

Personalizing the 404 message

You may want to personalize the message shown on the 404 page. One way to do this is using the navigation state.

When navigating to the 404 page, you can include a state in the navigation options.

this.router.navigate(['/404'], { 
    skipLocationChange: true,
    state: {
        // Whatever data you need on the 404 page
    	source: 'article',
        id: 123456
    }
});

On your NotFoundComponent, you can access this object in the constructor using the router’s getCurrentNavigation method.

export class NotFoundComponent {
  constructor(private router: Router) {
    console.log(this.router.getCurrentNavigation().extras.state.source);
  }
}

You must access the state in the constructor, as it is only available while the router is navigating.

Conclusion

In this post, we saw how to implement a 404 route in Angular. We looked at how we can redirect to it dynamically and even how to personalize the 404 page with route dependent data!

Have questions, corrections, or an alternative way of handling this? Leave a comment or reach out to me on Twitter @pedronavelopes and let me know! Thanks for reading!

The post Handling not found routes in Angular appeared first on Blog IT.

• This enables you to have an Angular application alongside your Umbraco website, on a specified route.
• The Angular App can be protected by the Authentication of your website, if you have it. And you can make use of surface controllers for authenticated requests.
• The routing of your app will work as intended, for example, if your Angular app is at /app and you make a request to /app/products, the request will be routed to the angular app products’ page.

What this is not

• A complete front end for a Umbraco website with dynamic routes.
• This doesn’t have dynamic routes, you have to specify them on your code.

Let’s get started!

First, start by creating a controller to handle the Angular App request.

using System.Web.Mvc;

public class AngularAppController : BaseController
{
    public ActionResult AngularAppView()
    {
        return View();
    }
}

Then, you have to decide the route where your Angular app will render. On this example it will be /angularapp.

On your ApplicationStarted method, put this code:

RouteTable.Routes.MapRoute(
  "AngularApp",
  "angularapp/{*.}",
  new { controller = "AngularApp", action = "AngularAppView" });

The {*.} syntax is what makes your angular app routes load and not return the 404 page.

If you don’t have an ApplicationStarted method, find out how you to create it here: https://our.umbraco.org/documentation/reference/events/application-startup

Under your Views folder, create a folder with the same name as the controller you set in MapRoute. In this case it will be “AngularApp”.
Inside it, create a view with the same name as the action set you set in MapRoute.

Inside the view put the contents of the index.html of your angular app.
Then you will need to move your angular app files somewhere like you /Assets folder, and edit their paths on the view.

Almost done!

Now you need to edit the routes of your Angular app.
Simply add the route you chose as a prefix to the routes.

From something like this:

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: '/dashboard', component: DashboardComponent },
  { path: '/detail/:id', component: HeroDetailComponent },
  { path: '/heroes', component: HeroesComponent }
];

To this:

const routes: Routes = [
  { path: 'angularapp', redirectTo: 'angularapp/dashboard', pathMatch: 'full' },
  { path: 'angularapp/dashboard', component: DashboardComponent },
  { path: 'angularapp/detail/:id', component: HeroDetailComponent },
  { path: 'angularapp/heroes', component: HeroesComponent }
];

Thanks for reading!
Mário

The post Adding an Angular app to your Umbraco Website appeared first on Blog IT.

My session was about Working with AngularJS, a fantastic Single Page Application framework in JavaScript. It’s an introductory session, meant to give attendees a basic understanding of the framework and its components. I had a packed room, with around 200 people, and the feedback was great so I felt it might be worth sharing the slides and demos I wrote for the session:

• Slides (on OneDrive)
• Slides (on SlideShare)
• Demos (on OneDrive)

You’re probably wondering why would I, a SharePoint guy, be talking about AngularJS. SharePoint guys are not exactly known for embracing the latest and greatest web technologies, mostly because when a new SharePoint version is released, it’s already one .Net version behind, not to mention all the new JavaScript frameworks. With SharePoint 2013, all that is changed. The new SharePoint App Model allows us to build our apps in any technology we want, and that means we can use all the big boys toys now such as ASP.NET MVC and, of course, AngularJS.

Also presenting a session on WebCamp about KnockoutJS was my good friend and colleague João “Jota” Martins, which is a great JavaScript data-binding library. Although they share some concepts, Knockout and Angular are very different technologies, on very different abstraction levels, so it’s good to know when to use one or the other. Checkout his slides and code samples here.

The post Microsoft WebCamp 2014: Working with AngularJS appeared first on Blog IT.

Earlier, my colleague and friend André “SharePoint God” Vala did a session on AngularJS, so we got to share information on two libraries with very different levels of abstraction for web development. Had about 70-80 people in the room, in what was session with more code samples I’ve done for some time now.

You can download the slides here or check them on Slideshare, and the code samples are here.

The post Microsoft WebCamp 20.05.2014–Databinding with KnockoutJS appeared first on Blog IT.

Well, it’s possible and easy to do.

You just have to add the line

debugger;

where you want the breakpoint to stop and ensure that the “disable javascript” option in your Internet Options is not checked.

The post JavaScript Debugging appeared first on Blog IT.