Angular无法正常运行（含GitHub Pages），表达式仅显示花括号求助

刚上手Angular（准确说是AngularJS，因为你用了ng-app指令）就遇到这种问题，确实挺挠头的，咱们从最基础的几个关键点逐一排查，都是新手最容易踩的小坑：

• 第一步：确认AngularJS核心脚本已正确引入
  这是最常见的疏漏！Angular没法凭空解析表达式，你必须在HTML里加载它的核心脚本文件。不管是用本地的angular.min.js还是公共CDN，都要确保脚本在你的自定义代码之前加载，比如放在<head>里或者<body>的末尾。如果是本地文件，一定要检查文件路径是否正确，别把文件放错文件夹了。

• 第二步：确保ng-app对应的模块已定义
  你代码里写了ng-app="myFirstApp"，那必须在脚本里创建这个模块，不然Angular会直接忽略这个指令。比如要写：

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

  注意括号里的空数组是依赖项，即使没有依赖也不能省略。

• 第三步：检查控制器的关联是否正确
  如果你的表达式是在某个控制器作用域里的，那得确保：

  1. HTML里用ng-controller指令绑定了控制器，比如<div ng-controller="myController">
  2. 脚本里已经把控制器注册到之前定义的模块上，并且变量已经放到$scope里：

     app.controller('myController', function($scope) {
         // 这里定义你要显示的变量
         $scope.myText = "我能正常显示啦！";
     });
     

• 第四步：确认表达式写法无错误
  检查{{ }}里的变量名是否和$scope里的完全一致，有没有拼写错误，比如把myText写成mytext这种大小写问题，Angular是区分大小写的。

给你一个完整的最小可运行示例，你可以对比自己的代码看看哪里漏了：

<!DOCTYPE html>
<html ng-app="myFirstApp">
<head>
    <meta charset="UTF-8">
    <title>Angular测试</title>
    <!-- 引入AngularJS核心脚本 -->
    <script src="angular.min.js"></script>
    <script>
        // 定义模块
        var app = angular.module('myFirstApp', []);
        // 定义控制器
        app.controller('myController', function($scope) {
            $scope.greeting = "Hello Angular!";
        });
    </script>
</head>
<body ng-controller="myController">
    <h1>{{ greeting }}</h1>
</body>
</html>

另外关于GitHub Pages的问题：部署的时候要注意资源路径，比如用本地脚本的话，别用绝对路径（比如/angular.min.js），改用相对路径（比如./angular.min.js），确保GitHub Pages能找到你的文件；如果用CDN的话，要确认CDN链接是公开可访问的。

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