Alright, let’s dive into the world of advanced routing techniques! If you’ve been working with single-page applications, you know how crucial routing is for creating a smooth user experience. Today, we’re going to explore some cool tricks using ui-router that’ll take your routing game to the next level.

First up, nested views. These are super handy when you want to create complex layouts with multiple levels of content. Imagine you’re building a dashboard for a social media app. You might have a main view for the user’s profile, and within that, nested views for their posts, friends, and photos. Here’s how you could set that up:

$stateProvider
  .state('profile', {
    url: '/profile',
    templateUrl: 'profile.html',
    controller: 'ProfileCtrl'
  })
  .state('profile.posts', {
    url: '/posts',
    templateUrl: 'posts.html',
    controller: 'PostsCtrl'
  })
  .state('profile.friends', {
    url: '/friends',
    templateUrl: 'friends.html',
    controller: 'FriendsCtrl'
  })
  .state('profile.photos', {
    url: '/photos',
    templateUrl: 'photos.html',
    controller: 'PhotosCtrl'
  });

In your profile.html, you’d have a ui-view for the nested content:

<div class="profile">
  <h1>User Profile</h1>
  <div ui-view></div>
</div>

This setup allows users to navigate between posts, friends, and photos without reloading the entire profile page. Pretty neat, right?

Now, let’s talk about named views. These are perfect when you want to load multiple views in different parts of your page simultaneously. Let’s say you’re building an email client. You might want to show the inbox, a selected email, and a sidebar all at once. Here’s how you could do that:

$stateProvider
  .state('email', {
    url: '/email',
    views: {
      'inbox': {
        templateUrl: 'inbox.html',
        controller: 'InboxCtrl'
      },
      'email': {
        templateUrl: 'email.html',
        controller: 'EmailCtrl'
      },
      'sidebar': {
        templateUrl: 'sidebar.html',
        controller: 'SidebarCtrl'
      }
    }
  });

In your main template, you’d use named ui-view directives:

<div class="email-client">
  <div ui-view="inbox"></div>
  <div ui-view="email"></div>
  <div ui-view="sidebar"></div>
</div>

This setup gives you a lot of flexibility in how you structure your app’s layout.

Now, onto something really important: route guards. These are like bouncers at a club, making sure only the right people get in. In our case, we’re making sure only authorized users can access certain parts of our app. Let’s set up a simple auth service first:

app.service('AuthService', function() {
  this.isAuthenticated = function() {
    // Check if user is logged in
    return localStorage.getItem('token') !== null;
  };
});

Now, we can use this service in our route configuration:

$stateProvider
  .state('dashboard', {
    url: '/dashboard',
    templateUrl: 'dashboard.html',
    controller: 'DashboardCtrl',
    resolve: {
      auth: function(AuthService, $state) {
        if (!AuthService.isAuthenticated()) {
          $state.go('login');
          return false;
        }
        return true;
      }
    }
  });

In this example, if the user isn’t authenticated, they’ll be redirected to the login page. This keeps your sensitive data safe and sound.

But what if we want to get even fancier and load routes dynamically based on user permissions? Let’s say we have different types of users: admins, managers, and regular users. We could set up a service to fetch user roles:

app.service('UserService', function($http) {
  this.getUserRole = function() {
    return $http.get('/api/user/role').then(function(response) {
      return response.data.role;
    });
  };
});

Then, we can use this in our routing:

$stateProvider
  .state('dashboard', {
    url: '/dashboard',
    templateUrl: 'dashboard.html',
    controller: 'DashboardCtrl',
    resolve: {
      userRole: function(UserService) {
        return UserService.getUserRole();
      },
      availableRoutes: function(userRole, $http) {
        return $http.get('/api/routes/' + userRole);
      }
    }
  });

In your DashboardCtrl, you can then use the availableRoutes to dynamically generate menu items or buttons:

app.controller('DashboardCtrl', function($scope, availableRoutes) {
  $scope.menuItems = availableRoutes.data.map(function(route) {
    return {
      name: route.name,
      url: route.url
    };
  });
});

This approach gives you a ton of flexibility. You can easily add or remove routes for different user types without changing your front-end code.

One thing I’ve learned from working on large-scale apps is that it’s crucial to keep your routing logic clean and organized. It’s tempting to stuff everything into one big config file, but trust me, future you will thank present you for breaking things up into smaller, more manageable pieces.

For example, you could have separate route files for different sections of your app:

// userRoutes.js
export default function($stateProvider) {
  $stateProvider
    .state('profile', { /* ... */ })
    .state('settings', { /* ... */ });
}

// adminRoutes.js
export default function($stateProvider) {
  $stateProvider
    .state('userManagement', { /* ... */ })
    .state('siteSettings', { /* ... */ });
}

// main app.js
import userRoutes from './userRoutes';
import adminRoutes from './adminRoutes';

app.config(function($stateProvider) {
  userRoutes($stateProvider);
  adminRoutes($stateProvider);
});

This approach makes it much easier to maintain your routing as your app grows.

Another cool trick I’ve found useful is lazy loading. If your app has grown to a significant size, you might not want to load everything upfront. You can use ui-router’s lazy loading feature to load modules only when they’re needed:

$stateProvider.state('admin', {
  url: '/admin',
  lazyLoad: function($transition$) {
    return $transition$.injector().get('$ocLazyLoad').load('admin.module.js');
  }
});

This can significantly improve your app’s initial load time, especially for users who might not need access to all areas of your app.

When it comes to handling errors in routing, it’s always a good idea to have a catch-all route. This way, if a user tries to access a non-existent page, you can gracefully redirect them:

$urlRouterProvider.otherwise('/404');

$stateProvider
  .state('404', {
    url: '/404',
    templateUrl: '404.html'
  });

This little addition can make your app feel much more polished and user-friendly.

One last tip: don’t forget about SEO! Even though you’re building a single-page app, you still want search engines to be able to crawl your content. You can use the ui-router-metatags plugin to dynamically update your page’s meta tags based on the current route:

$stateProvider
  .state('product', {
    url: '/product/:id',
    templateUrl: 'product.html',
    controller: 'ProductCtrl',
    meta: {
      title: 'Product Details',
      description: 'View details for this amazing product!'
    }
  });

This ensures that even as users navigate through your app, each “page” has appropriate meta information for search engines.

In conclusion, mastering these advanced routing techniques can really level up your Angular apps. From nested views to dynamic route loading, these tools give you the power to create complex, responsive, and secure applications. Remember, the key is to keep your code organized, think about performance, and always keep the user experience in mind. Happy coding!

---