Преобразование из jQuery в угловой

Question

Я не знаю, как это сделать в AngularJS и какие контроллеры должны быть запутаны, и я смущен.

Где, как я включил библиотеку AngularJS в _layout, а также инициализируется в HTML тег

и сделал контроллер с именем IndexController теперь я хочу, чтобы переместить Js к IndexController и принести

все данные от контроллера для просмотра? ????????

сделать только один Ajax для меня другое я буду делать моим сам

Вот мое мнение:

<div data-alert class="alert-box success radius"> 
    <h3>Your Remain Time</h3> 
    <div data-alert class="alert-box info tip-right tiny"> 
     <input type="hidden" id="starttime" value="@ViewBag.StartTime" /> 
    </div> 
</div> 
<div class="nav-bar right"> 
    <ul class="button info" id="hint">Click to See Hint</ul> 

    <div id="hintvalue"> 
    </div> 

</div> 

<div id="qajax"> 
    @Html.Partial("_Quest") 
</div> 

<div class="nav-bar right"> 
    <ul class="button radius" id="myButton">Next</ul> 
</div> 

<input type="hidden" id="questionNumber" value="0" /> 
<input type="hidden" id="userName" value="@Model.UserName" /> 
<input type="hidden" id="clevel1" value="1" /> 
<input type="hidden" id="clevel2" value="0" /> 
<input type="hidden" id="clevel3" value="0" /> 
<input type="hidden" id="link" value="" /> 

<div> 

</div> 

<div></div> 

и здесь Js

@section Scripts{ 
    <script src="~/Scripts/jquery-2.1.1.min.js"></script> 
    <script src="~/Scripts/jquery.signalR-2.1.2.min.js"></script> 
    <!--Reference the autogenerated SignalR hub script. --> 
    <script src="/signalr/hubs"></script> 


    <script type="text/javascript"> 
    var qId = 0; 
    var selectedVal = ""; 
    var j = 1; 
    var k = 0; 
    var l = 0; 
    var inProgress = false; 
    var bool = false; 
    var id; 

    var qlist = @Html.Raw(Json.Encode(@Model.ComplexLevQidsLists)) 
$(document).ready(function() { 

    $('#hint').click(function() { 
     $('#hint').disabled = true; 
     var hintvalue = "" 
     if ($('#hint').click = true) { 
      bool = true; 
      $('#hint').click = false; 
     } 
     var questionid = $("#qid").val(); 
     var complevel = $("#complevel").val(); 
     $.ajax({ 
      type: "GET", 
      traditional: true, 
      url: '/Testing/Partial/', 
      data: { sendhint: hintvalue, quid: questionid } 
     }) 
     .success(function (html) { 
      $('#hintvalue').empty().html(html); 
      $('#hint').disabled = false; 
     }) 
     .error(function() { 
      $('#myButton').hide(); 
      $('#hint').hide(); 
     }); 
     return false; 

    }); 
}); 

     $(window).on("blur", function() { 
      if (!inProgress) { 
       inProgress = true; 
       // Trigger your AJAX call to change your question here 
       ajaxRoutine(); 
      } 
      }); 

$('#myButton').click(function() { 
    if (!inProgress) { 
     inProgress = true; 
     ajaxRoutine(); 
     $(function() { 

      var liveView = $.connection.liveViewHub; 

      $.connection.hub.start().done(function() { 

       liveView.server.send($('#qid').val(), $('#userName').val()); 

      }); 
     }); 

     function htmlEncode(value) { 
      var encodedValue = $('<div />').text(value).html(); 
      return encodedValue; 
     } 

    } 
}); 
function ajaxRoutine() { 
    inProgress = true; 
    var qlist1 = qlist[0] 
    var qlist2 = qlist[1] 
    var qlist3 = qlist[2] 
    var questionid = $("#qid").val(); 
    var complevel = $("#complevel").val(); 

    var selected = $('input[name=selectedvalue]:checked').val(); 
    if (selected != null) { 
     selectedVal = selected; 
    } 
    $.ajax({ 
     type: "POST", 
     traditional: true, 
     url: '/Testing/Partial/', 
     data: { 
      getoption: selectedVal, quid: questionid, flag: qId, chk: bool, complevel: complevel, j: j, k: k, l: l, 
      qlist1: qlist1, qlist2: qlist2, qlist3: qlist3 
     } 
    }) 
    .success(function (html) { 
     $('#hintvalue').empty(); 
     UpdateQuestion(html); 
    }) 
    .error(function() { 
     inProgress = false; 

    }); 
    return false; 
} 


function UpdateQuestion(html) { 
    if (qId <= 8) { 
     $('#qajax').empty().html(html); 

    } 
    else { 

     $('#qajax').replaceWith("Congratulations"); 
     $('#myButton').onclick = (location.href = '@Url.Action("TestCompleted", "Testing",new { id = @Model.sessionid , 
                     showquestion = @Model.Questions.AddQuestionID})'); 

     $('#hint').hide(); 
    } 
    var inccomplevel = $('#servcomplvl').val(); 
    qId = $("#questionNumber").val(); 
    qId = parseInt(qId) 
    qId = qId + 1; 

    $("#questionNumber").val(qId); 
    if (inccomplevel == 1) { 
     j = $("#clevel1").val(); 
     j = parseInt(j) 
     j = j + 1; 
     $("#clevel1").val(j); 
    } 
    if (inccomplevel == 2) { 
     k = $("#clevel2").val(); 
     k = parseInt(k) 
     k = k + 1; 
     $("#clevel2").val(k); 
    } 
    if (inccomplevel == 3) { 
     l = $("#clevel3").val(); 
     l = parseInt(l) 
     l = l + 1; 
     $("#clevel3").val(l); 

    } 
    bool = false; 
    inProgress = false; 
} 
    </script> 
} 

здесь угловая

var UtsystemApp = angular.module('Utangularscript', []); 

AwesomeAngularMVCApp.controller('IndexController', IndexController); 

и это противоречие Мюллером

var IndexController = function ($scope) { 
    $scope.models = { 
    }; 
} 

Answer 1

HTML:

<div ng-app="mainModule"> 
<div ng-controller="MainController"> 
    ..... 
    <ul class="button info" id="hint" ng-click="hintClick()">Click to See Hint</ul> 
</div> 
</div> 

Модуль:

var mainMddule = angular.module("mainModule", []); 

Услуги:

mainMddule.service("MainService", function($http){ 

    this.getData = function(){ 
    var data = null; 

    var promise = $http.get(url); 
    promise.then(function(response) { 
     data = response; 
    }, function(response) { 
     data = response; 
    }); 
    return data; 

    } 

}); 

Контроллер:

mainMddule.controller("MainController", ["$scope", "MainService", function($scope, MainService){ 

    $scope.hintClick = function(){ 
    // write the code here to handle hint click 
    // for example var data = MainService.getData(); 

    }] 
);