使用 API javascript 设置 AngularJS 模板

Setting up AngularJS template with API javascript

本文关键字：AngularJS 模板 设置 javascript API 使用      更新时间：2023-09-26

我是AngularJS的新手，想将我当前的网站转换为AngularJS。下面是我网页的一部分，显示了从 Google 日历中提取的会议。我正在使用 API 来执行此操作。我的问题是如何将HTML/Javascript转换为AngularJS模板？我只是使用控制器并转储其中的所有 javascript 吗？

目前，我的HTML在我的日历列表中显示前两个结果。

这是我的 HTML： 

<section class="sub-box meetings-box">
    <div class="meetings-section">
        <span class="meeting-h1">NEXT MEETING</span>
        <div class="next-meetings-section">
            <div class="meeting-info meeting-time next-meeting-time-start"></div>
            <div class="meeting-info meeting-time next-meeting-time-end"></div>
            <div class="meeting-info next-meeting-title"></div>
            <div class="meeting-info next-meeting-location"></div>
        </div>
        <span class="meeting-h2">UPCOMING MEETINGS</span>
        <div class="upcoming-meetings-section">
        <div class="meeting-info meeting-time second-meeting-time-start"></div> 
        <div class="meeting-info meeting-time second-meeting-time-end"></div>
        <div class="meeting-info second-meeting-title"></div>
        <div class="meeting-info second-meeting-location"></div>
    </div>
</section>

这是我的 Javascript 的一部分，它显示了回调响应 API

    request.then(function(callbackResponse) {
    var entries = callbackResponse.result.items; //returns an array entries
      //get meeting info
      var nextMeeting = entries[0];
      var nextMeetingTimeStart = nextMeeting.start;
      var nextMeetingTimeEnd = nextMeeting.end;
      var nextMeetingTitle = nextMeeting.summary;
      var nextMeetingLocation = nextMeeting.location;
      var secondMeeting = entries[1];
      var secondMeetingTimeStart = secondMeeting.start;
      var secondMeetingTimeEnd = secondMeeting.end;
      var secondMeetingTitle = secondMeeting.summary;
      var secondMeetingLocation = secondMeeting.location;

  //formatting info
  for (var x in nextMeetingTimeStart && nextMeetingTimeEnd &&   
  secondMeetingTimeStart && secondMeetingTimeEnd) {
    var nextMeetingStart = nextMeetingTimeStart[x];
    var nextMeetingEnd = nextMeetingTimeEnd[x];
    var secondMeetingStart = secondMeetingTimeStart[x];
    var secondMeetingEnd = secondMeetingTimeEnd[x];
    var nextMeetingStartFormat = new Date(nextMeetingStart).toString('hh:mm tt');
    var nextMeetingEndFormat = new Date(nextMeetingEnd).toString('hh:mm tt');
    var secondMeetingStartFormat = new Date(secondMeetingStart).toString('hh:mm tt');
    var secondMeetingEndFormat = new Date(secondMeetingEnd).toString('hh:mm tt');
    $('.next-meetings-section').find('.next-meeting-time-start').text(nextMeetingStartFormat+'-');
    $('.next-meetings-section').find('.next-meeting-time-end').text(nextMeetingEndFormat);
    $('.upcoming-meetings-section').find('.second-meeting-time-start').text(secondMeetingStartFormat+'-');
    $('.upcoming-meetings-section').find('.second-meeting-time-end').text(secondMeetingEndFormat);
  }
  $('.next-meetings-section').find('.next-meeting-title').text(nextMeetingTitle);
  $('.next-meetings-section').find('.next-meeting-location').text(nextMeetingLocation);
  $('.upcoming-meetings-section').find('.second-meeting-title').text(secondMeetingTitle);
  $('.upcoming-meetings-section').find('.second-meeting-location').text(secondMeetingLocation);
使用

Angular，您可能希望使用 DOM 操作directive，使用 http 调用和存储数据的factory（还有其他选项，但这是一个很好的起点）。controller应关注为视图提供范围。

角度文档：

控制器

指令

供应商 - 工厂包括在这里。

在重构到 Angular 之前，您可能需要花几个小时浏览一两个教程。代码学校有一个免费的好学校。

编辑-

查看您的代码，您可能希望处理factory内的服务器响应 - 在工厂上创建用于nextMeeting和secondMeeting的属性，并在每次获得服务器响应时将它们设置为服务器响应数据。

将factory注入controller，然后在控制器中，您可以拥有视图将使用的属性，例如：nextMeetingStart、nextMeetingEnd等。这些属性的值可以是使用工厂nextMeeting和secondMeeting属性上的值来设置其相应返回值的函数。

然后，您可以在视图中引用这些属性。每当factory从服务器接收新数据时，视图中显示的值都会更新。

相关文章：