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); });