Routing enables the creation of truly massive Single-Page Applications (SPAs).
It allows you to navigate between different views without ever reloading the browser page!
Similar to animations, routing requires an external module named angular-route.js.
You must explicitly inject the ngRoute module into your main application.
Once injected, you gain access to the highly powerful $routeProvider service!
The $routeProvider maps specific URL paths directly to HTML templates and Controllers.
When the user clicks a link, the URL changes, and AngularJS dynamically fetches the assigned template.
It then instantly injects that template into a specialized <div ng-view></div> container.
<body ng-app="myApp"> <a href="#/!">Main</a> <a href="#/!about">About</a> <div ng-view></div> </body><script> var app = angular.module("myApp", ["ngRoute"]);
// Configuring the route provider app.config(function($routeProvider) { $routeProvider .when("/", { template : "<h1>Main Page</h1>" }) .when("/about", { template : "<h1>About Page</h1>" }); }); </script>
SPAs rely heavily on URL hash routing (e.g., # or #!), which can confuse standard search bots.
To ensure maximum SEO visibility, configure AngularJS to use HTML5 Mode ($locationProvider.html5Mode).
This removes the # from URLs, making them perfectly clean and highly readable for Google.
Which AngularJS directive acts as the physical placeholder where dynamic routed templates are rendered?