I am using MVC+Angular. In MVC, I created partial views for search, listing, etc. I show them using:
@Html.Partial("_Search")
@Html.Partial("_Featured")
@Html.Partial("_Listing")
Previously each partial view had an ng-app
and ng-controller
.
Now I combined them all into one ng-app. I added ng-app to master page, and I just used the ng-controller in every partial view.
<div ng-controller="Search" class="slide">
some ng-repeat goes here
</div>
Angular code:
angular.module("ProductListing", [])
.controller("Search", function ($scope,$templateCache, $http) {
$(document).on("keyup", ".txtTempleSearch", function () {
var searchTerm=$(this).val();
$.get(configUrl + "SearchGrouped/" + searchTerm, function (data) {
$scope.Results = JSON.parse(data)[0].result;
$scope.$apply();
});
});
})
.controller('featured', function ($scope) {
$.get(configUrl + 'Featured', function (data) {
$scope.featuredTemples = data;
$scope.$apply();
});
})
Is this approach correct or is it better in terms of maintainability/performance/best practice to have a different ng-app for different partial views and use angular.bootstrap
?