复制JSFiddle的AngularJS代码到Notepad++运行后显示插值语法，求助原因

嘿，我来帮你捋捋为啥会出现这个情况～

你看到页面直接显示{{result.id}}这类双花括号内容，核心原因很简单：你的本地HTML文件没有加载Angular框架，浏览器根本不认识Angular的模板语法。JSFiddle里的代码能正常运行，是因为它默认帮你配置了Angular的依赖环境，但你复制到Notepad++里的只是纯HTML和可能的部分JS，缺少了关键的框架引入和应用初始化步骤。

具体解决步骤： #

• 首先，在你的HTML文件头部引入Angular的CDN资源（以AngularJS 1.x为例，因为你提供的JSFiddle链接看起来用的是这个版本）：

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  

• 然后，给页面的根元素添加ng-app指令，标记Angular应用的作用范围，同时用ng-controller绑定对应的控制器：

  <div ng-app="myApp" ng-controller="myCtrl">
    Id: {{result.id}}<br>
    Product: {{result.name}}<br>
    Price: {{result.price | currency}}<br>
    Added: {{result.added | date:'dd/MM/yyyy'}}
  </div>
  

• 最后，编写Angular的模块和控制器代码，定义result变量（把数据传给模板）：

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.result = {
        id: 1,
        name: "Sample Product",
        price: 49.99,
        added: new Date()
      };
    });
  </script>
  

完整示例代码： #

<!DOCTYPE html>
<html>
<head>
    <title>Angular Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        Id: {{result.id}}<br>
        Product: {{result.name}}<br>
        Price: {{result.price | currency}}<br>
        Added: {{result.added | date:'dd/MM/yyyy'}}
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.result = {
                id: 1,
                name: "Sample Product",
                price: 49.99,
                added: new Date()
            };
        });
    </script>
</body>
</html>

把上面的代码复制到Notepad++里，保存为.html文件后再用浏览器打开，就能正常解析双花括号和过滤器（比如currency、date）啦～

内容的提问来源于stack exchange，提问作者FP Jones TheThird