Angular 1.6组件路由完整示例求助：含语法及导入文件说明

Hey there! I totally get how frustrating it is when you're new to Angular 1.6 and can't find a complete, clear component routing example—let me walk you through a fully working setup step by step, covering everything from file imports to component definitions.

1. Required File Imports #

First, you need to include these scripts in your HTML (stick to this exact order, since dependencies load sequentially):

<!-- Angular 1.6 core library -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<!-- Angular's official routing module (separate from core) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular-route.min.js"></script>

Note: You can download these files locally instead of using CDNs if that fits your workflow better.

2. Create Your App Module & Configure Routing #

Next, set up your main app module, inject the ngRoute dependency, and define your routes. We'll use the component property in the route config—this is the Angular 1.5+ way to bind components directly to routes, no need to mess with separate templates/controllers for routing.

// Define your main app module with the ngRoute dependency
var app = angular.module('myApp', ['ngRoute']);

// Configure routing using $routeProvider
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  // Angular 1.6 uses '!' as the default hash prefix, but we'll set it explicitly for clarity
  $locationProvider.hashPrefix('!');

  $routeProvider
    // Home route: binds directly to our homeComponent
    .when('/home', {
      component: 'homeComponent'
    })
    // About route: binds directly to our aboutComponent
    .when('/about', {
      component: 'aboutComponent'
    })
    // Default fallback: redirect to home if no matching route is found
    .otherwise({
      redirectTo: '/home'
    });
}]);

3. Define Your Route Components #

Now create the components that will render when each route is accessed. Components in Angular 1.6 have a clean, self-contained structure with a template and optional controller:

Home Component #

app.component('homeComponent', {
  template: `
    <h1>Welcome to the Home Page!</h1>
    <p>This is the home component, loaded via Angular's component routing.</p>
    <p>You can add dynamic content here using the component's controller.</p>
  `,
  // Optional controller for component logic
  controller: function() {
    var $ctrl = this;
    // Example: add a dynamic greeting
    $ctrl.greeting = "Hey there, Angular newbie! 😊";
  }
});

About Component #

app.component('aboutComponent', {
  template: `
    <h1>About This App</h1>
    <p>This is the about component, triggered when you navigate to /about.</p>
    <p>Components keep your code modular and easy to maintain!</p>
  `
});

4. Set Up Your Main HTML Template #

Finally, create the main page with navigation links and the ng-view directive—this is where your routed components will be inserted dynamically:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>Angular 1.6 Component Routing Demo</title>
</head>
<body>
  <!-- Navigation links using ng-href (avoids broken links if JS is disabled) -->
  <nav>
    <a ng-href="#!/home">Home</a> | 
    <a ng-href="#!/about">About</a>
  </nav>

  <!-- This div will render the active route's component -->
  <div ng-view></div>

  <!-- Include your scripts here -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular-route.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

Key Things to Keep in Mind #

• Component Naming: Angular automatically converts kebab-case (like home-component) to camelCase (homeComponent) when matching components to routes.
• Hash Prefix: Angular 1.6 changed the default hash prefix from empty to !, so your links need to use #!/route instead of just #/route.
• Isolated Scopes: Each component has its own isolated scope, so if you need to share data between components, use bindings or Angular services.

If you want to use the more powerful ui-router library instead of the official ngRoute, the setup is similar but uses $stateProvider—just let me know if you'd like an example for that!

内容的提问来源于stack exchange，提问作者user2849331