Few basic questions troubling me related to AngularJS - angularjs

Question

I am developing demo application to learn AngularJS. Few things troubling me.
1 - What is the difference between
<div ng-controller="Page2Ctrl">
</div>
and
when('/page2', {templateUrl: 'views/flow1/page2.html', controller: 'Page2Ctrl'}).
Asking this because either is working fine. Is it necessary to define ng-controller in Html even if controller is defined in Routes?
2 - What is the difference between
function Page4Ctrl($scope){
$scope.pageName = "Page 4 loaded."
}
And
app.controller('Page4Ctrl', function ($scope) {
$scope.pageName = "Page 4 loaded."
});
second is verbose and need extra typing. Any suggestion on using them?
3 - Suppose I am developing a CRUD application for Customer. I make a CustomerController.js file where I want to put all the methods related to Customer (Create, Read, Update, Delete, FindById, FindAll etc). like below. Is this the right approach or controller should be one CustomerController which contains all the methods of CRUD?
app.controller('CustomerCreateController', function ($scope) {});
app.controller('CustomerEditController', function ($scope) {});
app.controller('CustomerDeleteController', function ($scope) {});

Answer 1

1) When typing the ng-controller directly to your view that view has a direct tie to that controller. Defining the controller in the route allows you to reuse the view for other needs.
For example, you have a view that displays a list of names.
<ul ng-controller="ListCtrl">
<li ng-repeat="item in items">{{item.name}}</li>
</ul>
Now someplace else in your application you have the same exact structure that displays a list of names you would need to do the same thing again.
<ul ng-controller="MyOtherListCtrl">
<li ng-repeat="item in items">{{item.name}}</li>
</ul>
If you remove the ng-controller attribute you can reuse this <ul/>
<ul>
<li ng-repeat="item in items">{{item.name}}</li>
</ul>
and
.when('/list1', {templateUrl: 'list.html', controller: 'ListCtrl'})
.when('/list2', {templateUrl: 'list.html', controller: 'MyOtherListCtrl'})
2) app.controller scopes the controller to your module while the other creates the controller on the global scope.
3) I depends how you have your application is structured, but Simply creating a CustomerController that has $scope methods for edit, delete, and create. This controller can take a dependency of a Service or $resoruce
app.controller('CustomerController', function ($scope, customerService) {
$scope.add = function(customer){
//add customer with customerService
};
$scope.edit = function(customer){
//edit customer with customerService
}
$scope.delete = function(customer){
//delete customer with customerService
}
});
If you want separate pages you could still reuse the same controller.
.when('/add', {templateUrl: 'add.html', controller: 'CustomerController'})
.when('/edit', {templateUrl: 'edit.html', controller: 'CustomerController'})
.when('/delete', {templateUrl: 'delete.html', controller: 'CustomerController'})