使用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從服務器接收到新數據，視圖中顯示的值就會更新。