Angular – это фреймворк JavaScript, созданный моим Misko Hevery и поддерживаемый Google. Это MVC (Model View Vontroller). Вы можете посетить официальную страницу, чтобы узнать больше об этом.
В настоящее время доступна последняя версия Angular 5.2.10. Есть первое поколение 1.x и второе поколение 2.x, и эти два поколения полностью отличаются по своим структурам и методам. Не волнуйтесь, если вы обеспокоены версией, поскольку в этой статье мы будем использовать второе поколение 2.x
Содержание
- Добавление элемента (узнайте, как подать форму в Angular)
- Удаление элемента (узнайте, как добавить событие в Angular)
- Угловая анимация (узнайте, как анимировать компоненты)
Предпосылки:
Убедитесь, что на компьютере установлен node.js. Подробнее об установке.
npm (менеджер пакетов узлов) устанавливается из Node.js
Проверьте node.js версия:
node -vnpm:
npm -vAngular-CLI
Вы должны иметь последнюю версию Angular-CLI. Узнайте больше о Angular CLI здесь, и найдите инструкции по установке.
Установить Angular-cli:
npm install -g @angular/cliИ, наконец, вы должны иметь:
- Базовые знания JavaScript
- Основы HTML и CSS
Вам не нужно знать Angular.
Теперь, когда у нас есть среда для запуска нашей программы Angular, давайте начнем!
Создание нашей первой программы
Мы будем использовать angular-cli для создания и создания наших компонентов. Он будет генерировать службы, маршрутизаторы, компоненты и директивы.
Чтобы создать новый проект Angular с помощью Angular-cli, просто запустите:
ng new my-appПроект будет создан автоматически. Давайте создадим наше приложение для дел!
ng new todo-appЗатем откройте файлы в текстовом редакторе. Я использую Sublime text, но вы можете выбрать любой редактор.
Вот как выглядит структура программы:
Не беспокойтесь, если вы запутались относительно файлов. Вся наша работа будет в приложение папку. Он содержит пять файлов:
Примечание. Использование Angular 2 TypeScriptв котором файлы заканчиваются на «.ts”расширение.
Чтобы создать хороший интерфейс для нашего приложения, мы будем использовать Bootstrap 4 Framework.
Включить загрузчик cdn в index.html:
<link rel="stylesheet" href=" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">Запустите программу в терминале:
ng serveПрограмма будет работать в http://localhost:4200/
Все хорошо ?!
Теперь давайте немного структурируем HTML. Мы будем использовать классы Bootstrap для создания простой формы.
app.component.html:
<div class="container"> <form> <div class="form-group"> <h1 class="text-center text-primary">Todo App</h1> <div class="input-group-prepend"> <input type="text" class="form-control" placeholder="Add Todo" name="todo"> <span class="input-group-text">Add</span> </div> </div> </form></div>в app.component.css:
body{ padding: 0; margin: 0;}form{ max-width: 25em; margin: 1em auto;}Чтобы получить входное значение в Angular 2, мы можем использовать ngModel директива. Вы можете вставить переменную как атрибут во входящий элемент.
<input type="text" #todo class="form-control" placeholder="Add Todo" name="todo" ngModel>Чтобы создать переменную в качестве атрибута, используйте # а затем имя переменной.
<input #myVariable type="text" name="text" ngModel>// get the value of the Variable<p>{{myVariable.value}}</p>Теперь получите значение переменной «todo»:
<p>{{todo.value}}</p>Все хорошо ?!
Теперь мы должны сохранить значение, полученное из входящих данных. Мы можем создать пустой массив app.component.ts внутри класса AppComponent:
export class AppComponent { todoArray=[] }Затем мы должны добавить событие щелчок к нашей кнопке, которая перемещает полученное значение в «todoArray”.
app.component.html:
<span class="input-group-text" (click)="addTodo(todo.value)">Add</span>в app.component.ts:
export class AppComponent { todoArray=[]addTodo(value){ this.todoArray.push(value) console.log(this.todos) } }Используйте console.log(this.todoArray), чтобы увидеть значение массива
Получить данные из “todoArray”
Теперь нам нужно получить данные, хранящиеся в “todosArray”. Мы будем использовать *директива ngFor чтобы прокрутить массив и извлечь данные.
app.component.html:
<div class="data"> <ul class="list-instyled"> <li *ngFor="let todo of todoArray">{{todo}}</li> </ul> </div>После получения данных:
Теперь данные будут автоматически получены при нажатии кнопки «Добавить».
Стилизация программы
Мне нравится использовать Google-fonts и Material-icons, которыми можно пользоваться бесплатно.
Добавить внутрь шрифты Google app.component.css:
/*Google fonts*/@import url('https://fonts.googleapis.com/css?family=Raleway');И материальные иконки внутри index.html:
<link href=" rel="stylesheet">После добавления определенного стиля в нашу программу она будет выглядеть так:
Чтобы использовать значки материалов:
<i class="material-icons>iconName</i>Добавьте значки удалить и добавить. app.component.html:
// put add icon inside "input-group-text" div<span class="input-group-text" (click)="addTodo(todo.value)"><i class="material-icons">add</i></span>// and delete icon inside list item <li *ngFor="let todo of todoArray">{{todo}}<i class="material-icons">delete</i></li>Для стилей в app.component.css:
/*Google fonts*/@import url('https://fonts.googleapis.com/css?family=Raleway');body{ padding: 0; margin: 0;}form{ max-width: 30em; margin: 4em auto; position: relative; background: #f4f4f4; padding: 2em 3em;}form h1{ font-family: "Raleway"; color:#F97300; }form input[type=text]::placeholder{ font-family: "Raleway"; color:#666; }form .data{ margin-top: 1em;}form .data li{ background: #fff; border-left: 4px solid #F97300; padding: 1em; margin: 1em auto; color: #666; font-family: "Raleway";}form .data li i{ float: right; color: #888; cursor: pointer;}form .input-group-text{ background: #F97300; border-radius: 50%; width: 5em; height: 5em; padding: 1em 23px; color: #fff; position: absolute; right: 13px; top: 68px; cursor: pointer;}form .input-group-text i{ font-size: 2em;}form .form-control{ height: 3em; font-family: "Raleway";}form .form-control:focus{ box-shadow: 0;}Наше приложение почти готово, но нам нужно добавить некоторые функции. Функция удаления должна разрешать пользователям щелкнуть значок удаления и удалять элемент. Также было бы здорово иметь возможность вводить новый элемент с помощью ключа возврата вместо нажатия кнопки «Добавить».
Удаление элементов
Чтобы добавить функцию удаления, мы используем метод массива splice и цикл for. Мы прокрутим «todoarray» и вытащим элемент, который мы хотим удалить.
Добавьте событие (щелкните) для удаления значка и укажите его «todo» как параметр:
<li *ngFor="let todo of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li>в app.component.ts:
/*delete item*/ deleteItem(){ console.log("delete item") }Когда вы нажимаете «Удалить», на консоли должно появиться следующее:
Теперь мы должны прокрутить “todoArray” и соединить элемент, который мы щелкнули.
в app.component.ts:
/*delete item*/ deleteItem(todo){ for(let i=0 ;i<= this.todoArray.length ;i++){ if(todo== this.todoArray[i]){ this.todoArray.splice(i,1) } } }Результат:
Прекрасно?!!
Вход для добавления элементов
Мы можем добавить событие в форму:
(ngSubmit)="TodoSubmit()"Нам нужно добавить переменную «#todoForm» в форму и придать ей «ngForm» как значение. В этом случае у нас есть только одно поле, поэтому мы получим только одно значение. Если у нас есть несколько полей, событие submit вернет значение всех полей в форме.
app.component.html
<form #todoForm= "ngForm" (ngSubmit)="todoSubmit(todoForm.value)"></form>в app.component.ts
// submit Form todoSubmit(value:any){ console.log(value) }Проверьте консоль. Он вернет объект значений:
Итак, теперь мы должны передать возвращенное значение в “todoArray”:
// submit Form todoSubmit(value:any){ if(value!==""){ this.todoArray.push(value.todo) //this.todoForm.reset() }else{ alert('Field required **') } }Мы здесь ?. Значение вставляется без необходимости нажимать на кнопку добавить, просто нажав «ввести»:
Еще одно. Чтобы сбросить форму после отправки, добавьте встроенный метод resetForm() для отправки события.
<form #todoForm= "ngForm" (ngSubmit)="todoSubmit(todoForm.value); todoForm.resetForm()" ></form>Теперь форма будет сбрасываться после каждой отправки:
Добавление анимаций
Мне нравится добавить немного анимации. Чтобы добавить анимацию, импортируйте компоненты анимации в свой app.component.ts:
import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';Затем добавьте свойство animations к декоратору @component:
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], animations:[ trigger("moveInLeft",[ transition("void=> *",[style({transform:"translateX(300px)"}), animate(200,keyframes([ style({transform:"translateX(300px)"}), style({transform:"translateX(0)"}) ]))]),transition("*=>void",[style({transform:"translateX(0px)"}), animate(100,keyframes([ style({transform:"translateX(0px)"}), style({transform:"translateX(300px)"}) ]))]) ])]})Теперь элементы обладают хорошим эффектом, когда их вводят и удаляют.
Весь код
app.component.ts
import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], animations:[ trigger("moveInLeft",[ transition("void=> *",[style({transform:"translateX(300px)"}), animate(200,keyframes([ style({transform:"translateX(300px)"}), style({transform:"translateX(0)"}) ]))]),transition("*=>void",[style({transform:"translateX(0px)"}), animate(100,keyframes([ style({transform:"translateX(0px)"}), style({transform:"translateX(300px)"}) ]))]) ])]})export class AppComponent { todoArray=[]; todo; //todoForm: new FormGroup()addTodo(value){ if(value!==""){ this.todoArray.push(value) //console.log(this.todos) }else{ alert('Field required **') } }/*delete item*/ deleteItem(todo){ for(let i=0 ;i<= this.todoArray.length ;i++){ if(todo== this.todoArray[i]){ this.todoArray.splice(i,1) } } }// submit Form todoSubmit(value:any){ if(value!==""){ this.todoArray.push(value.todo) //this.todoForm.reset() }else{ alert('Field required **') } } }app.component.html
<div class="container"> <form #todoForm= "ngForm"(submit)="todoSubmit(todoForm.value); todoForm.resetForm()" > <div class="form-group"> <h1 class="text-center ">Todo App</h1> <div class="input-group-prepend"> <input type="text" #todo class="form-control" placeholder="Add Todo" name="todo" ngModel> <span class="input-group-text" (click)="addTodo(todo.value)"> <i class="material-icons">add</i></span> </div> </div> <div class="data"> <ul class="list-unstyled"> <li [@moveInLeft] *ngFor="let todo of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li> </ul> </div> </form></div>app.component.css
/*Google fonts*/@import url('https://fonts.googleapis.com/css?family=Raleway');body{ padding: 0; margin: 0;}form{ max-width: 30em; margin: 4em auto; position: relative; background: #f4f4f4; padding: 2em 3em; overflow: hidden;}form h1{ font-family: "Raleway"; color:#F97300; }form input[type=text]::placeholder{ font-family: "Raleway"; color:#666; }form .data{ margin-top: 1em;}form .data li{ background: #fff; border-left: 4px solid #F97300; padding: 1em; margin: 1em auto; color: #666; font-family: "Raleway";}form .data li i{ float: right; color: #888; cursor: pointer;}form .input-group-text{ background: #F97300; border-radius: 50%; width: 5em; height: 5em; padding: 1em 23px; color: #fff; position: absolute; right: 13px; top: 68px; cursor: pointer;}form .input-group-text i{ font-size: 2em;}form .form-control{ height: 3em; font-family: "Raleway";}form .form-control:focus{ box-shadow: 0;}Мы закончили? Вы можете найти файлы и код Github.
Просмотрите демонстрацию
Вывод
Angular легче, чем вы думаете. Angular – одна из лучших библиотек JavaScript, она имеет отличную поддержку и приятное сообщество. Он также имеет инструменты, которые делают работу с Angular быстрой и легкой, например, Angular-cli.
Подпишитесь на этот список рассылки, чтобы узнать больше о Angular.
Саид Хаяни@ (@hayanisaid1995) | Twitter
Последние твиты от SaidHayani@ (@hayanisaid1995). #Web_Developer /#Frontend / #Back_end(#PHP &…twitter.com
Вот некоторые из лучших онлайн-курсов для бесплатного изучения Angular:
Угловой 1.x
Angular 2.x (рекомендовано)