Angular面试代码解析求助：恳请资深开发者解读示例代码

核心DOM指令拆解 #

• ng-app 指令：这是AngularJS应用的启动标记，框架会以这个<div>为根节点初始化整个应用。myApp是我们定义的模块名称，Angular会自动关联对应的模块到这个节点上。
• ng-controller 指令：给当前DOM区域绑定控制器myCtrl，这个控制器会全权负责该区域内的数据逻辑和视图交互，是视图和数据模型之间的中间层。
• 双大括号插值 {{}}：这是Angular的模板语法，用来把$scope上的数据渲染到页面上。这里直接做字符串拼接firstName + " " + lastName，Angular会自动监听这两个变量的变化，一旦值改动，视图会实时更新。

脚本部分细节解读 #

首先是模块创建：

var app = angular.module('myApp', []);

这行代码创建了一个名为myApp的Angular模块，第二个空数组表示这个模块不依赖任何其他Angular模块。如果需要用到路由、动画这类功能，就把对应的模块名（比如ngRoute）放进数组里。

然后是控制器定义：

app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});

• $scope是Angular的核心对象，它是控制器和视图之间的桥梁。控制器通过$scope把数据暴露给视图，视图的用户操作也会通过$scope传递给控制器处理。这里我们给$scope添加了两个属性，视图就能通过插值表达式访问到这些值。

面试必知的深层知识点 #

• 作用域继承：每个控制器都会生成独立的$scope对象，它会继承父级作用域的属性（这里父级是ng-app创建的根作用域）。如果控制器嵌套，子作用域能访问父作用域的数据，但父作用域拿不到子作用域的内容。
• 脏检查机制：Angular通过脏检查实现数据双向绑定，在用户输入、定时器触发等事件后，框架会对比$scope变量的新旧值，自动更新视图。比如你在控制器里修改$scope.firstName = "Jane"，页面上的名字会立刻变成Jane Doe。
• 模块与控制器的分工：模块是Angular应用的组织单元，用来管理依赖、划分功能；控制器是模块下的逻辑单元，负责特定视图区域的业务逻辑。一个模块可以有多个控制器，各自负责不同的页面部分。

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