在AngularJS中，视图和DOM的操作是通过数据绑定来实现的。以下是使用AngularJS与Leaflet和ag-grid库进行视图和DOM操作的示例：

1. 使用Leaflet库进行地图视图操作：

首先，在HTML模板中引入Leaflet库和相关的CSS文件：

然后，在AngularJS的控制器中，定义地图的初始化函数和相应的数据：

angular.module('myApp', [])
  .controller('mapController', function($scope) {
    $scope.initMap = function() {
      var map = L.map('map').setView([51.505, -0.09], 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data © OpenStreetMap contributors',
        maxZoom: 18
      }).addTo(map);
    };
  });

在HTML模板中，使用ng-init指令调用初始化函数，并在合适的位置添加一个div元素来显示地图：

2. 使用ag-grid库进行表格视图操作：

首先，在HTML模板中引入ag-grid库和相关的CSS文件：

然后，在AngularJS的控制器中，定义表格的列和数据：

angular.module('myApp', [])
  .controller('gridController', function($scope) {
    $scope.columnDefs = [
      { headerName: "Make", field: "make" },
      { headerName: "Model", field: "model" },
      { headerName: "Price", field: "price" }
    ];

    $scope.rowData = [
      { make: "Toyota", model: "Celica", price: 35000 },
      { make: "Ford", model: "Mondeo", price: 32000 },
      { make: "Porsche", model: "Boxster", price: 72000 }
    ];
  });

在HTML模板中，使用ag-grid指令和相应的配置来显示表格：

注意，这里使用了gridOptions配置对象来定义表格的行和列：

$scope.gridOptions = {
  columnDefs: $scope.columnDefs,
  rowData: $scope.rowData
};

以上是使用AngularJS与Leaflet和ag-grid库进行视图和DOM操作的示例。你可以根据自己的需求进行修改和扩展。