Angular – это JavaScript Framework, создала мою Misko Hevery и поддерживаемое Google. Это MVC (контроллер представления модели). Вы можете Посетите официальную страницу чтобы узнать больше об этом.
Прямо сейчас последняя версия угловагона – 5.2.10. Есть Первое поколение 1. x и Второе поколение 2.x И два поколения совершенно отличаются в их структурах и методах. Не волнуйтесь, если вы чувствуете себя смущенным в версии, потому что в этой статье мы будем использовать второе поколение 2.x
Оглавление
- Добавление элемента (узнайте, как отправить форму в угловой форме)
- Удаление предмета (узнайте, как добавить событие в угловой)
- Угловая анимация (узнать, как анимация компонентов)
Предпосылки:
- Node.js.
Проверьте, установлен ли Node.js на вашем компьютере. Узнайте больше о установке Отказ
- NPM
NPM (Узел Package Manager) установлен с Node.js
Проверьте node.js версия:
node -v
NPM:
npm -v
Угловые-CLI
У вас должна быть последняя версия Angular-CLI. Узнайте больше о угловом CLI здесь , и найти инструкцию для установки.
Установите Angular-CLI:
npm install -g @angular/cli
И, наконец, у вас должно быть:
- Основные знания о JavaScript
- Основы HTML и CSS
Вам не нужно знать о угловании.
Теперь, когда у нас есть среда для запуска вашего углового приложения , Давайте начнем!
Создание нашего первого приложения
Мы будем использовать угловую CLI для создания и создания наших компонентов. Он будет генерировать услуги, маршрутизатор, компоненты и директивы.
Создать новый угловой проект с угловой CLI, просто запустите:
ng new my-app
Проект будет сгенерирован автоматически. Давайте создадим наше приложение To-do!
ng new todo-app
Затем откройте файлы в текстовом редакторе. Я использую Sublime Text, но вы можете выбрать любой редактор.
Вот что выглядит структура приложения:
Не волнуйтесь, если вы запутались в файлах. Вся наша работа будет в приложение папка. Он содержит пять файлов:
Чтобы сделать хороший интерфейс для нашего приложения, мы будем использовать Bootstrap 4 Фреймворк.
Включить загрузку CDN в index.html :
Запустите приложение в вашем терминале:
ng serve
Приложение будет работать в http://localhost: 4200/
Все хорошо ?!
Теперь давайте сделаем некоторые HTML структурирование. Мы будем использовать классы Bootstrap для создания простой формы.
app.component.html :
В app.component.css. :
body{ padding: 0; margin: 0;}form{ max-width: 25em; margin: 1em auto;}Чтобы захватить входное значение в угловых 2, мы можем использовать Ngmodel Директива. Вы можете вставить переменную в качестве атрибута внутри входного элемента.
Чтобы создать переменную в качестве атрибута, используйте # сопровождаемый именем переменной.
// get the value of the Variable{{myVariable.value}}
Теперь получите значение переменной «TODO»:
{{todo.value}}
Все хорошо ?!
Теперь мы должны хранить значение, захваченное с ввода. Мы можем создать пустой массив в app.component.ts Внутри класса AppComponent:
export class AppComponent { todoArray=[] }Затем мы должны добавить событие щелчка нашу кнопку, которая нажимает значение, захваченное в « ToDoarray ».
app.component.html :
Add
В app.component.ts :
export class AppComponent { todoArray=[]addTodo(value){ this.todoArray.push(value) console.log(this.todos) } }Получите данные из “todoarray”
Теперь мы должны получить данные, хранящиеся в «Тодосаррай». «Мы будем использовать Directive * NGPOR CHOR CHORFORE CONORT через массив и извлечь данные.
app.component.html:
- {{todo}}
После получения данных:
Данные теперь будут автоматически вытеснены при нажатии кнопки «Добавить».
Стайлинг приложение
Мне нравится использовать Google-fonts. и Материальные иконки , которые могут свободно использовать.
Включите шрифты Google внутри app.component.css. :
/*Google fonts*/@import url('https://fonts.googleapis.com/css?family=Raleway');И материальные иконки внутри index.html :
После добавления некоторого стиля в наше приложение, он будет выглядеть так:
Использовать материальные значки:
// put add icon inside "input-group-text" div
add
// and delete icon inside list item
Для стилей в 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;}Наше приложение почти сделано, но нам нужно добавить некоторые функции. Функциональность удаления должна позволять пользователям щелкнуть значок удаления и удалить элемент. Также было бы здорово иметь возможность ввести новый элемент с ключом возврата вместо нажатия кнопки «Добавить».
Удаление предметов
Чтобы добавить функциональность удаления, мы будем использовать метод массива «SLICE» и LOOP. Мы будем петь через «TodoArray» и извлечь предмет, который мы хотим удалить.
Добавить событие A (Click), чтобы удалить значок и дать ему «TODO» в качестве параметра:
В 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()"
Нам нужно добавить переменную «#тодоформ» в форму и дайте ему «NGForm» в качестве значения. В этом случае у нас просто одно поле, поэтому мы просто получим одно значение. Если у нас есть несколько полей, событие отправки вернет значения всех полей в форме.
app.component.html.
в 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 **') } }Мы здесь ?. Значение вставлено без необходимости нажать кнопку «Добавить», просто нажав «Enter»:
Еще кое-что. Чтобы сбросить форму после отправки, добавьте метод «assefform ()», чтобы отправить событие.
Форма сбросится после каждого отправки сейчас:
Добавление анимации
Мне нравится добавить немного прикосновения анимации. Чтобы добавить анимацию, импортируйте компоненты анимации в ваш app.component.ts :
import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';Затем добавьте свойство анимации в «@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.
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.
Увидеть демонстрацию
Заключение
Угловой легче, чем вы думаете. Угловой является одним из лучших библиотек JavaScript, и она имеет отличную поддержку и хорошее сообщество. Он также имеет инструменты, которые делают работу с угловым и легким, как угловые CLI.
Подписаться на это Mail-list чтобы узнать больше о угловом углу.
Oadhayani @ (@ hayanisaid1995) | Twitter Последние твиты от Shadhayani @ (@ hayanisaid1995). #Web_developer/# frontend/#Back_end (#php & … twitter.com
Вот некоторые из лучших онлайн-курсов для изучения угловых углов:
Угловой 1.x.
Angular 2.x (рекомендуемые)
Оригинал: “https://www.freecodecamp.org/news/learn-how-to-create-your-first-angular-app-in-20-min-146201d9b5a7/”