Ionic 3项目与教程差异：找不到Angular控制器及app module编写位置

嘿，我完全懂你的困惑！那些老教程里的Angular控制器（controllers）和作用域（scopes）写法，在Ionic 3里确实找不到踪迹了——这是因为Ionic 3基于Angular 4+，而Angular从版本2开始就彻底重构了架构，抛弃了旧的$scope和控制器模式，改用组件化的方式开发啦！

下面给你拆解下对应的替代方案：

1. 原来的控制器？现在是页面的TypeScript类 #

你打开的每个.ts文件（比如src/pages/home/home.ts）就是原来控制器的“继任者”。它是一个Angular组件类，负责承载页面的所有逻辑：

import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  // 这里定义的属性，就相当于旧写法里挂在$scope上的变量
  userNickname: string = 'Ionic新手';
  clickCount: number = 0;

  // 这里的方法，就是原来控制器里的函数
  addClickCount() {
    this.clickCount++;
  }
}

• 类里的属性会自动和HTML模板绑定，不需要手动挂载到$scope
• 类的方法可以直接在模板里调用，不需要依赖$scope传递

2. 原来的$scope？现在是组件的实例上下文 #

旧的$scope作用域被组件类的实例上下文替代了，在HTML模板里直接用属性名就能访问类里的变量：

<ion-content padding>
  <h2>你好，{{ userNickname }}！</h2>
  <p>已点击次数：{{ clickCount }}</p>
  <button ion-button (click)="addClickCount()">点我加1</button>
</ion-content>

• 插值语法{{ }}、事件绑定(click)都是直接和组件类的属性/方法关联，完全不需要$scope

3. App Module的位置 #

Ionic 3的根模块文件在src/app/app.module.ts，你需要在这里声明所有的页面组件，让Angular能识别它们：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule, IonicApp } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage // 声明你的页面组件
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage // 作为导航跳转的入口组件
  ]
})
export class AppModule {}

快速迁移小技巧 #

• 把旧教程里控制器的变量，直接搬到页面.ts类里作为属性
• 把控制器里的函数，改成类的方法（记得用this.访问类内属性）
• 模板里删掉所有$scope.的前缀，直接用属性名就行

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