AngularJS数据绑定失效求助：外部JS数据无法在HTML页面渲染

看你的代码应该是在用AngularJS（1.x版本），但你提到用Angular5，这俩是完全不同的框架哦～先针对你给出的AngularJS代码排查问题，数据放外部JS不生效大概率是这几个原因：

1. 模块定义有误 #

你在productlist.js里的模块写法是尝试获取已存在的模块，但如果是第一次创建新模块，必须加上依赖数组[]，不然AngularJS找不到对应模块，控制器就绑定失败了。

修改后的productlist.js：

angular.module('myShoppingList', []) // 加上[]表示创建新模块
.controller('myCtrl', function ($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
});

2. 脚本引用顺序错了 #

浏览器是按顺序加载脚本的，如果先加载你的productlist.js，此时AngularJS核心库还没加载，angular对象根本不存在，直接就报错了。必须先引入AngularJS库，再引入你的自定义脚本。

修改后的Sample.html：

<!-- 先引入AngularJS核心库 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!-- 再引入你的productlist.js -->
<script src="productlist.js"></script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <!-- 补全ng-repeat语法，加上插值表达式显示数据 -->
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
</div>

3. ng-repeat语法不完整 #

你原来的代码里ng-repeat="x in products...没写完，缺少闭合和显示数据的{{x}}，这也会导致渲染失败。

另外提醒下：如果真的在用Angular5（属于Angular 2+系列），那这套AngularJS代码完全不适用，Angular 2+用组件和TypeScript开发，写法完全不同。举个简单的Angular5写法示例：

（可选）Angular5正确写法参考 #

组件文件（product-list.component.ts）

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

@Component({
  selector: 'app-product-list',
  template: `<ul><li *ngFor="let item of products">{{item}}</li></ul>`
})
export class ProductListComponent {
  products = ["Milk", "Bread", "Cheese"];
}

之后在模块中声明这个组件，页面里用<app-product-list></app-product-list>标签就能渲染数据了。

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