AngularJS使用moment.js显示日期时出现moment未定义引用错误

1. 校验moment.js的加载配置 #

• 确认页面中moment.js的引入顺序：必须先引入angular.js，再引入moment.js，最后引入你的业务代码Bookshow.js
• 打开浏览器开发者工具的「网络」面板，过滤JS请求，确认moment.js的请求状态为200，没有出现404路径错误，路径不对的话修正script标签的src属性，示例引入写法：

<script src="/scripts/moment.min.js"></script>
<script src="/resource/Bookshow.js"></script>

2. 修正现有代码的语法错误 #

你当前的代码存在两个错误，也会导致运行异常：

• AngularJS的service中不能注入$scope，$scope仅可在控制器中注入使用
• 你将moment()赋值给了$scope.today，后续调用format方法时未加$scope前缀，会额外触发today未定义的报错
  修正后的参考代码：

// Bookshow.js
book.service('ApplDate', ['$http', '$filter', function($http, $filter) {
  // 直接定义局部变量存储moment实例即可
  const today = moment();
  console.log("today date " + today.format('MM/DD/YYYY'));
  // 服务对外暴露的属性挂载到this上
  this.applDate = today.format('MM/DD/YYYY');
  this.today = today;
}]);

3. 可选优化方案（避免全局依赖问题） #

如果不想依赖全局挂载的moment变量，可以引入angular-moment适配库，在业务模块中注入依赖后直接将moment作为服务注入使用，无需担心加载顺序问题：

// 模块定义时引入angularMoment依赖
const book = angular.module('yourBookModule', ['angularMoment']);

// 服务中直接注入moment服务使用
book.service('ApplDate', ['$http', '$filter', 'moment', function($http, $filter, moment) {
  const today = moment();
  console.log("today date " + today.format('MM/DD/YYYY'));
  this.applDate = today.format('MM/DD/YYYY');
}]);

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