使用API​​设置AngularJS模板javascript

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

具有角，你会想用directive的DOM操纵，一个factory（还有其他选项，但这是一个很好的起始地方）的http调用和存储数据。 controller应该关注为视图提供范围。

角文档：

controllers

directives

providers - 工厂都包括在这里。

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

编辑 -

看你的代码，你要照顾一个factory内的服务器响应的 - 对nextMeeting和secondMeeting创建你的工厂的属性，并让他们每次都设置为你的服务器的响应数据您会收到服务器回复的数据。

注入你factory为controller，然后在你的控制器，你可以有你的观点会使用类似的属性：nextMeetingStart，nextMeetingEnd等这些属性的值可以是你的工厂的nextMeeting和secondMeeting属性使用值的函数设置适当的回报值。

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