Loading partial view using AngularJS in asp.net MVC application

Question

I am creating an ASP.net MVC application.

I am loading a partial view in a div using jQuery and AngularJS as following:

I am doing an ajax call using AngularJS and storing the result as the content in div "courseList" using jQuery. This happens when the user clicks on links.

  angular.module('Domain', []).controller('DomainCtrl', function (
    $http, $scope, $window) {
    $scope.GetCourseList = function (domain) {
      $http({
        method: 'GET',
        url: '/Showcase/CourseList',
        params: {
          domain: domain
        }
      }).then(function (obj) {
        $('#courseList').html(obj.data);    //jQuery code to load the content
      });
    };
  });

Html:

<nav ng-app="Domain">
  <h2>Domains</h2>
  <ul ng-controller="DomainCtrl" ng-init="domain=''">
    @foreach (var item in (List<string>)ViewBag.domains)
    {
      <li><a href="#" ng-click="GetCourseList('@item.ToString()')">@item.ToString() </a></li>
    }
  </ul>
</nav>

<div id="courseList">    </div>

The above code works fine. But I am using jQuery to populate the <div ID="courseList">.

How can I achieve this with AngularJS and no jQuery?

Answer 1

You can replace calls to jQuery $ dollar e.g.

$('#courseList').html(obj.data);

with Angular's equivalent which is angular.element

angular.element('#courseList').html(obj.data);

Under the hood though, Angular will use jQuery if it's available i.e. you are including a version of jQuery in a <script> tag somewhere. Otherwise Angular will use jqLite, which is internally available as part of Angular itself.

Answer 2

To do this in Angular way. You should declare expression in the controller scope.

HTML:

<div id="courseList">{{ courseData }}</div>

And in your then callback, replace jQuery code with this:

$scope.courseData = obj.data;

Also set the initial state of courseData before $scope.GetCourseList method.

$scope.courseData = "";

Answer 3

<div id="courseList" ng-bind-html="courseListHtml"></div>

And in your controller:

$http(...).then(function (obj) {
    $scope.courseListHtml = $sce.trustAsHtml(obj.data);
});