使用API​​ javascript设置AngularJS模板

Question

我是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);

Answer 1

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

Angular文档：

controllers

directives

providers - 这里包括工厂。

在重构为Angular之前，您可能需要花费几个小时来完成一两个教程。 Code School has a good one for free.

编辑 -

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

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

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