Статьи

Учебник по AngularJS: начало работы с AngularJS

Апрель 9, 2019

AngularJS — это популярный JavaScript-фреймворк для создания одностраничных приложений (SPA).

AngularJS предоставляет следующие функции, которые облегчают разработку веб-приложений:

  1. Двухстороннее связывание данных
  2. Внедрение зависимости
  3. Пользовательские HTML-директивы
  4. Простая интеграция с веб-сервисами REST с использованием $ http, $ resource, Restangular и т. Д.
  5. Поддержка тестирования

и многое другое …

Хотя возможностей намного больше, чем в приведенном выше списке, это очень часто используемые функции.

Я не буду объяснять, что такое двусторонняя привязка данных, как работает $ scope, потому что в сети уже есть тонны материала.

Как разработчик Java, я буду использовать основанные на SpringBoot фоновые сервисы RESTful. Если вы хотите, вы можете использовать JavaEE / JAX-RS для создания внутренних сервисов REST. Также вам может понравиться использование NetBeans, поскольку он имеет замечательную поддержку автозавершения AngularJS из коробки.

Итак, давайте приступим к написанию приложения AngularJS HelloWorld.

Создайте index.html со следующим содержимым, запустите сервер и укажите в браузере адрес http: // localhost: 8080 / hello-angularjs / index.html.

01
02
03
04
05
06
07
08
09
10
11
<html>
    <head>
        <title>Hello AngularJS</title>
        <meta charset="UTF-8">
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
    <body ng-app>
        <p>Enter Name: <input type="text" ng-model="myname"> </p>
        <p>Hello {{myname}}!!</p>
    </body>
</html>

Теперь начните вводить текст ввода, и ваш Hello {{myname}} немедленно отобразит значение, которое вы вводите в поле ввода текста.

Хорошо, мы закончили церемонию «HelloWorld» и согреваемся!

Мы использовали AngularJS CDN URL для загрузки библиотеки AngularJS. Мы можем скачать AngularJS с https://angularjs.org/ и добавить скрипт angular.min.js .

Но мы будем использовать WebJars ( http://www.webjars.org/ ), который предоставляет популярные библиотеки javascript в качестве модулей maven jar вместе с транзитивными зависимостями. Если мы хотим использовать Twitter Bootstrap, мы должны также включить jQuery. Но при использовании WebJars мне нужно настроить только загрузочную зависимость jar, и она получит для меня зависимость jquery.

Давайте создадим проект SpringBoot, выбрав File -> New -> Spring Starter Project, выберите модули «Web» и «Data JPA» и нажмите «Finish».

Если вы не используете STS, вы можете создать этот стартовый шаблон с http://start.spring.io/ и загрузить его в формате zip.

Мы будем использовать библиотеки Bootstrap и javascript для создания нашего веб-интерфейса. Позволяет сконфигурировать базу данных H2, AngularJS, Bootstrap и библиотеки шрифтов-awesome в качестве зависимостей WebJar maven в pom.xml.

Поскольку это jar-приложение SpringBoot, мы поместим все наши html-страницы в папку src / main / resources / public и все наши javascripts, css, images в папку src / main / resources / static.

  • Теперь измените ссылку на AngularJS CDN на <script src = ”webjars / angularjs / 1.2.19 / angular.js»> </ script> .
  • Давайте включим в наш index.html загрузочный файл и font-awesome css / js. Также мы будем использовать модуль angular-route для навигации по страницам и, следовательно, нам нужно также включить angular-route.js .
  • Давайте создадим файл app.js, который содержит конфигурацию нашего основного модуля angularjs в папке src / main / resources / static / js .
  • Также создайте controllers.js, services.js, filters.js, directives.js в той же папке и включите их в index.html .

SpringBoot будет обслуживать статический контент из папки src / main / resources / static .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>DashBoard</title>
  <link rel="stylesheet" href="webjars/bootstrap/3.2.0/css/bootstrap.css"/>
  <link rel="stylesheet" href="webjars/font-awesome/4.1.0/css/font-awesome.css"/>
  <link rel="stylesheet" href="css/styles.css"/>
 
</head>
<body ng-app>
        <p>Enter Name: <input type="text" ng-model="myname"> </p>
        <p>Hello {{myname}}!!</p>
     
    <script src="webjars/jquery/1.11.1/jquery.js"></script>
    <script src="webjars/bootstrap/3.2.0/js/bootstrap.js"></script>
    <script src="webjars/angularjs/1.2.19/angular.js"></script>
    <script src="webjars/angularjs/1.2.19/angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
 
</body>
</html>

В файле Application.java добавьте следующее RequestMapping для сопоставления корневого контекста с index.html .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package com.sivalabs.app;
 
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Configuration
@ComponentScan
@EnableAutoConfiguration
public class Application {
 
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}
 
@Controller
class HomeController
{
    @RequestMapping("/")
    public String home() {
        return "index.html";
    }
}

Теперь запустите этот Application.java как отдельный класс и перейдите по адресу http: // localhost: 8080 / . Это должно работать так же, как и раньше.

Теперь у нас есть базовая настройка готова. Давайте создадим очень простое приложение Todo.

Создайте JPA-объект Todo.java, его интерфейс репозитория Spring Data JPA и TodoController для выполнения операций чтения / создания / удаления.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
package com.sivalabs.app.entities;
@Entity
public class Todo {
    @Id @GeneratedValue(strategy=GenerationType.AUTO)
    private Integer id;
    private String description;
    @Temporal(TemporalType.TIMESTAMP)
    private Date createdOn = new Date();
     
    //setters and getters
}
 
package com.sivalabs.app.repos;
public interface TodoRepository extends JpaRepository<Todo, Integer>{
}
 
package com.sivalabs.app.controllers;
 
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import com.sivalabs.app.entities.Todo;
import com.sivalabs.app.repos.TodoRepository;
 
@RestController
@RequestMapping("/todos")
public class TodoController {
 
    @Autowired
    private TodoRepository todoRepository;
 
    @RequestMapping(value="", method=RequestMethod.GET)
    public List<Todo> persons() {
        return todoRepository.findAll();
    }   
    @RequestMapping(value="", method=RequestMethod.POST)
    public Todo create(@RequestBody Todo todo) {
        return todoRepository.save(todo);
    }
     
    @RequestMapping(value="/{id}", method=RequestMethod.DELETE)
    public void delete(@PathVariable("id") Integer id) {
        todoRepository.delete(id);
    }
}

Создайте DatabasePopulator для настройки некоторых начальных данных.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package com.sivalabs.app;
 
import java.util.Arrays;
import java.util.Date;
import javax.annotation.PostConstruct;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import com.sivalabs.app.entities.Todo;
import com.sivalabs.app.repos.TodoRepository;
 
@Component
public class DatabasePopulator
{
    @Autowired
    private TodoRepository todoRepository;
     
    @PostConstruct
    void init()
    {
        try {          
            Todo t1 = new Todo(null, "Task 1", new Date());
            Todo t2 = new Todo(null, "Task 2", new Date());
            Todo t3 = new Todo(null, "Task 3", new Date());
            this.todoRepository.save(Arrays.asList(t1,t2,t3));
             
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

Теперь наши серверные веб-службы RESTful готовы по следующим адресам.
GET — http: // localhost: 8080 / todos для получения списка Todos
POST — http: // localhost: 8080 / todos для создания нового Todo
УДАЛИТЬ — http: // localhost: 8080 / todos / 1 для удаления Todo (id: 1)

Давайте создадим наш основной модуль angularjs ‘ myApp ‘ и сконфигурируем маршруты нашего приложения в файле app.js.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
var myApp = angular.module('myApp',['ngRoute']);
 
myApp.config(['$routeProvider','$locationProvider',
        function($routeProvider, $locationProvider) {
          $routeProvider
            .when('/home', {
              templateUrl: 'templates/home.html',
              controller: 'TodoController'
            })
            .otherwise({
                redirectTo: 'home'
            });
           
}]);

Теперь обновите index.html, чтобы подключить модуль myApp в корне страницы с помощью и использовать для загрузки текущего шаблона маршрута.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8"/>
  <title>DashBoard</title>
  <link rel="stylesheet" href="webjars/bootstrap/3.2.0/css/bootstrap.css"/>
  <link rel="stylesheet" href="webjars/font-awesome/4.1.0/css/font-awesome.css"/>
  <link rel="stylesheet" href="css/styles.css"/> 
 
</head>
<body>
     
    <div class="container">   
          <div ng-view></div>
    </div>
 
    <script src="webjars/jquery/1.11.1/jquery.js"></script>
    <script src="webjars/bootstrap/3.2.0/js/bootstrap.js"></script>
    <script src="webjars/angularjs/1.2.19/angular.js"></script>
    <script src="webjars/angularjs/1.2.19/angular-route.js"></script>
     
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
     
</body>
</html>

Создайте шаблон home.html в папке src / main / resources / public / templates .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="col-md-8 col-md-offset-2">
 
<form class="form-horizontal" role="form">
    <div class="form-group form-group-md">
        <div class="col-md-10">
            <input type="text" class="form-control" ng-model="newTodo.description"> 
        </div>
        <button class="btn btn-primary" ng-click="addTodo(newTodo)">Add</button>
    </div>
</form>
 
 
<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th width="70%">Item</th>
            <th>Date</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="todo in todos">
            <td>{{todo.description}}</td>
            <td>{{todo.createdOn | date}}</td>
            <td><button class="btn btn-danger" ng-click="deleteTodo(todo)">Delete</button></td>
        </tr>
    </tbody>
</table>
<br/>
</div>

Это очень простая html-страница с некоторыми стилями начальной загрузки, и мы используем некоторые функции angularjs.

Мы используем директиву ng-repeat для перебора массива объектов Todo JSON, директиву ng-click для привязки функции обратного вызова к нажатию кнопки.

Для вызова сервисов REST мы будем использовать встроенный сервис angularjs $ http . Сервис $ http находится в angular-route.js , не забудьте включить его в index.html .

1
2
3
4
5
6
7
$http.verb('URI')
.success(success_callback_function(data, status, headers, config){
 //use data
 })
.error(error_callback_function(data, status, headers, config) {
   alert('Error loading data');
});

Например: чтобы сделать вызов GET / todos REST:

1
2
3
4
5
6
7
$http.get('todos')
.success(function(data, status, headers, config) {
 //use data
 })
.error(function(data, status, headers, config) {
   alert('Error loading data');
});

Создайте TodoController в файле controllers.js . В TodoController мы создадим функции для загрузки / создания / удаления Todos.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
angular.module('myApp')
.controller('TodoController', [ '$scope', '$http', function ($scope, $http) {
     
    $scope.newTodo = {};
     
    $scope.loadTodos = function(){
        $http.get('todos')
        .success(function(data, status, headers, config) {
            $scope.todos = data;
         })
        .error(function(data, status, headers, config) {
              alert('Error loading Todos');
        });
    };
     
    $scope.addTodo = function(){
        $http.post('todos',$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){
        $http.delete('todos/'+todo.id)
        .success(function(data, status, headers, config) {
            $scope.loadTodos();
         })
        .error(function(data, status, headers, config) {
              alert('Error deleting Todo');
        });
    };
     
    $scope.loadTodos();
}]);

Теперь укажите вашему браузеру http: // localhost: 8080 / . Вы должны увидеть список форм Todos и New Todo Entry и опцию Delete для каждого элемента Todo.

К настоящему времени мы познакомились с основными функциями AngularJS.
В следующем посте я объясню использование нескольких маршрутов, нескольких контроллеров и сервисов. Будьте на связи!

Ссылка: Учебник по AngularJS: начало работы с AngularJS от нашего партнера по JCG Сивы Редди в блоге « Мои эксперименты по технологии» .
51
Share: