AngularJS控制器与服务注册及动态加载问题咨询

我来帮你一步步拆解AngularJS路由配置和组件注册的问题，这部分确实容易踩坑，咱们从核心要点逐个解决：

首先，你得确保appConfig的配置结构和依赖是对的——很多新手会漏掉ngRoute模块的依赖，这是路由生效的前提。

正确的路由配置示例 #

// appConfig.js
// 先确保你的主模块已经声明，比如在app.js里：angular.module('yourApp', ['ngRoute']);
angular.module('yourApp')
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      // 配置首页路由
      .when('/home', {
        templateUrl: 'views/home.html', // 对应页面模板路径
        controller: 'HomeController',   // 绑定的控制器名称
        controllerAs: 'vm'              // 推荐用controllerAs语法，避免$scope混淆
      })
      // 配置其他页面路由
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutController',
        controllerAs: 'vm'
      })
      // 默认跳转路由
      .otherwise({ redirectTo: '/home' });
  }]);

关键注意点：主模块声明时必须加入ngRoute依赖，比如angular.module('yourApp', ['ngRoute'])，同时要在HTML里引入angular-route.min.js脚本（和AngularJS主脚本一起）。

控制器的正确注册方式 #

推荐用模块注册（而非全局注册），这样更符合AngularJS的模块化规范：

// controllers/HomeController.js
angular.module('yourApp')
  .controller('HomeController', ['$scope', 'YourService', function($scope, YourService) {
    // 控制器业务逻辑，比如调用服务获取数据
    this.greeting = YourService.getGreeting();
  }]);

HTML何时识别并调用控制器？ #

当路由匹配成功后，AngularJS会自动完成两件事：

1. 把templateUrl对应的模板加载到主页面的<ng-view></ng-view>容器中；
2. 将指定的控制器绑定到这个模板的作用域上。

所以你需要在主页面（比如index.html）里添加路由视图挂载点，示例结构：

<!DOCTYPE html>
<html ng-app="yourApp">
<head>
  <!-- 必须引入的脚本顺序 -->
  <script src="angular.min.js"></script>
  <script src="angular-route.min.js"></script>
  <!-- 你的业务脚本 -->
  <script src="app.js"></script>
  <script src="appConfig.js"></script>
  <script src="controllers/HomeController.js"></script>
  <script src="services/YourService.js"></script>
</head>
<body>
  <!-- 导航链接用ng-href避免页面刷新 -->
  <nav>
    <a ng-href="#/home">首页</a>
    <a ng-href="#/about">关于我们</a>
  </nav>
  <!-- 路由视图容器，控制器会绑定到这里加载的模板上 -->
  <ng-view></ng-view>
</body>
</html>

在模板（比如home.html）里，用controllerAs定义的别名（比如vm）访问控制器属性：

<h1>{{ vm.greeting }}</h1>

AngularJS常用的服务注册方式有service和factory，新手从这两种入手即可：

方式一：用service注册（适合构造函数风格） #

// services/YourService.js
angular.module('yourApp')
  .service('YourService', function() {
    // 定义服务方法
    this.getGreeting = function() {
      return 'Hello from YourService!';
    };
  });

方式二：用factory注册（更灵活，返回自定义对象） #

angular.module('yourApp')
  .factory('YourService', function() {
    var privateGreeting = 'Hello from Factory!';
    // 返回对外暴露的方法/属性
    return {
      getGreeting: function() {
        return privateGreeting;
      }
    };
  });

注册好的服务，直接在控制器里通过依赖注入使用——就像前面HomeController里的例子，把服务名称作为参数传入即可。

• 忘记引入angular-route.min.js：路由模块是独立的，必须单独引入；
• 脚本加载顺序错误：要先加载AngularJS主脚本，再ngRoute，最后是你的业务脚本；
• 路由路径拼写错误：when里的路径、控制器名称要和实际注册的完全一致（大小写敏感）；
• 没加<ng-view>标签：这是路由模板的唯一挂载点，没有它页面不会加载任何路由内容。

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