AngularJS: Представляем Модули, Контроллеры, Сервисы

В моем предыдущем посте AngularJS Tutorial: Начало работы с AngularJS мы видели, как настроить приложение, используя SpringBoot + AngularJS + WebJars. Но это своего рода руководство по быстрому старту, в котором я мало что объяснил о модулях, контроллерах и сервисах AngularJS. Также это одноэкранное приложение (только один маршрут).

В этом уроке части 2 мы рассмотрим, что такое Angular модули, контроллеры и сервисы и как их настраивать и использовать. Также мы рассмотрим, как использовать ngRoute для создания многоэкранного приложения.

Если мы посмотрим на код, который мы разработали в предыдущем посте, особенно в controllers.js , мы объединили клиентскую логику контроллера и бизнес-логику (конечно, у нас нет никакой бизнес-логики здесь :-)) в нашем Контроллеры что не хорошо.

Как Java-разработчики, мы привыкли иметь дюжину слоев, и нам нравится делать вещи сложными и жаловаться, что Java сложна. Но здесь, в AngularJS, все выглядит проще, давайте немного усложним. Я просто шучу 🙂

Даже если вы разместите всю свою логику в одном месте, как мы это делали в
controllers.js , она будет работать и приемлема для простых приложений. Но если вы собираетесь разрабатывать большие корпоративные приложения (кто сказал, что корпоративные приложения должны быть большими … хм … ладно … продолжать …), то все быстро становится грязным. И поверьте мне, работать с большой грязной кодовой базой JavaScript намного сложнее, чем с большой грязной кодовой базой Java. Поэтому неплохо отделить бизнес-логику от логики контроллера.

В AngularJS мы можем организовать логику приложения в модули и заставить их работать вместе, используя внедрение зависимостей. Давайте посмотрим, как создать модуль в AngularJS.

 var myModule = angular.module('moduleName',['dependency1','dependency2']);

Вот как мы можем создать модуль с помощью функции angular.module (), передав имя модуля и указав список зависимостей, если они есть. Как только мы определим модуль, мы можем получить дескриптор модуля следующим образом:

 var myModule = angular.module('moduleName');

Заметьте, что здесь нет второго аргумента, который означает, что мы получаем ссылку на предопределенный угловой модуль. Если вы включите второй аргумент, который является массивом, то это означает, что вы определяете новый модуль.

Как только мы определим новый модуль, мы можем создать контроллеры в этом модуле следующим образом:

module.controller('ControllerName',['dependency1','dependency2', function(dependency1, dependency2){
//logic
}]); - See more at: http://www.sivalabs.in/2014/09/angularjs-introducing-modules.html#sthash.7tyK7ewX.dpuf

myApp.controller('TodoController',function($scope,$http){
//logic
});

myApp.controller('TodoController',function($scope,$http){
//logic
});

myApp.controller('TodoController',function($s,$h){
//logic
});

myApp.controller('TodoController',['$scope','$http',function($s,$h){
//here $s represents $scope and $h represents $http services
}]);

myApp.controller('TodoController',['$scope','$http',function($scope,$http){
var todoCtrl = this;
todoCtrl.todos = [];
todoCtrl.loadTodos = function(){
$http.get('/todos.json').success(function(data){
todoCtrl.todos = data;
}).error(function(){
alert('Error in loading Todos');
});
};
todoCtrl.loadTodos();
}]);

$http.delete('/todos.json/1').success(function(data){
//hurray, deleted
}).error(function(){
alert('Error in deleting Todo');
});
todoCtrl.loadTodos(); 

$http.delete('/todos.json/1').success(function(data){
//hurray, deleted
todoCtrl.loadTodos();
}).error(function(){
alert('Error in deleting Todo');
});

angular.module('myApp')
.factory('UserService', ['$http',function($http) {  
  var service = {
    user: {},
    login: function(email, pwd) { 
  $http.get('/auth',{ username: email, password: pwd}).success(function(data){
service.user = data; 
  });      
    },
    register: function(newuser) {
      return $http.post('/users', newuser);
    }
  };
  return service;
}]);

angular.module('myApp')
.service('UserService', ['$http',function($http) {
    var service = this;
this.user = {};
    this.login = function(email, pwd) {
  $http.get('/auth',{ username: email, password: pwd}).success(function(data){
service.user = data; 
  });      
    };
    this.register = function(newuser) {
      return $http.post('/users', newuser);
    };

}]);

angular.module('myApp')
.provider('UserService', function() {
  return {
  this.$get = function($http) {
var service = this;
this.user = {};
this.login = function(email, pwd) {
  $http.get('/auth',{ username: email, password: pwd}).success(function(data){
service.user = data; 
  });      
};
this.register = function(newuser) {
  return $http.post('/users', newuser);
};
  }
  }
});

var myApp = angular.module('myApp');

myApp.factory('TodoService', function($http){
return {
loadTodos : function(){
return $http.get('todos');
},
createTodo: function(todo){
return $http.post('todos',todo);
},
deleteTodo: function(id){
return $http.delete('todos/'+id);
}
}
});

myApp.controller('TodoController', [ '$scope', 'TodoService', function ($scope, TodoService) {

$scope.newTodo = {};

$scope.loadTodos = function(){
TodoService.loadTodos().
success(function(data, status, headers, config) {
$scope.todos = data;
 })
.error(function(data, status, headers, config) {
      alert('Error loading Todos');
});
};

$scope.addTodo = function(){
TodoService.createTodo($scope.newTodo).
success(function(data, status, headers, config) {
$scope.newTodo = {};
$scope.loadTodos();
 })
.error(function(data, status, headers, config) {
      alert('Error saving Todo');
});
};

$scope.deleteTodo = function(todo){
TodoService.deleteTodo(todo.id).
success(function(data, status, headers, config) {
$scope.loadTodos();
 })
.error(function(data, status, headers, config) {
      alert('Error deleting Todo');
});
};

$scope.loadTodos();
}]);

@Entity
public class Person implements Serializable
{
private static final long serialVersionUID = 1L;
@Id @GeneratedValue(strategy=GenerationType.AUTO)
private Integer id;
private String email;
private String password;
private String firstname;
private String lastname;
@Temporal(TemporalType.DATE)
private Date dob;

//setters and getters
}

public interface PersonRepository extends JpaRepository<Person, Integer>{

}

@RestController
@RequestMapping("/contacts")
public class ContactController {
@Autowired
private PersonRepository personRepository;
@RequestMapping("")
public List<Person> persons() {
return personRepository.findAll();
}
}

myApp.service('ContactService', ['$http',function($http){

this.getContacts = function(){
var promise = $http.get('contacts')
.then(function(response){
return response.data;
},function(response){
alert('error');
});
return promise;
}
}
}]);

myApp.controller('ContactController', [ '$scope', 'ContactService', function ($scope, ContactService) {
ContactService.getContacts().then(function(data) {
$scope.contacts = data;
});
}
]);

var myApp = angular.module('myApp',['ngRoute']);

myApp.config(['$routeProvider','$locationProvider',
        function($routeProvider, $locationProvider) {
          $routeProvider
          .when('/home', {
              templateUrl: 'templates/home.html',
              controller: 'HomeController'
          })
            .when('/contacts', {
              templateUrl: 'templates/contacts.html',
              controller: 'ContactController'
            })
            .when('/todos', {
            templateUrl: 'templates/todos.html',
                controller: 'TodoController'
            })           
            .otherwise({
            redirectTo: 'home'
            });
}]);

<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{contact.firstname + ' '+ (contact.lastname || '')}}</td>
<td>{{contact.email}}</td>
</tr>
</tbody>
</table>

<div class="container">                 
  <div class="row">
<div class="col-md-3 sidebar">
<div class="list-group">
  <a href="#home" class="list-group-item">
<i class="fa fa-home fa-lg"></i> Home
  </a>         
  <a href="#contacts" class="list-group-item">
<i class="fa fa-user fa-lg"></i> Contacts
  </a>
  <a href="#todos" class="list-group-item">
<i class="fa fa-indent fa-lg"></i> ToDos
  </a>  
</div>
 </div>
 <div class="col-md-9 col-md-offset-3">
<div ng-view></div>
 </div>
  </div>
</div>