Дом Программирование Узнайте, как создать свое первое приложение Angular за 20 минут

Узнайте, как создать свое первое приложение Angular за 20 минут

Программирование
uznajte kak sozdat svoe pervoe prilozhenie angular za 20 minut?v=1656663619

Angular – это фреймворк JavaScript, созданный моим Misko Hevery и поддерживаемый Google. Это MVC (Model View Vontroller). Вы можете посетить официальную страницу, чтобы узнать больше об этом.

В настоящее время доступна последняя версия Angular 5.2.10. Есть первое поколение 1.x и второе поколение 2.x, и эти два поколения полностью отличаются по своим структурам и методам. Не волнуйтесь, если вы обеспокоены версией, поскольку в этой статье мы будем использовать второе поколение 2.x

hq0cvYK9ku0jw7BckSTe1bQyVtDh2PVSZeMu

Содержание

  • Добавление элемента (узнайте, как подать форму в Angular)
  • Удаление элемента (узнайте, как добавить событие в Angular)
  • Угловая анимация (узнайте, как анимировать компоненты)

Предпосылки:

Убедитесь, что на компьютере установлен node.js. Подробнее об установке.

npm (менеджер пакетов узлов) устанавливается из Node.js

Проверьте node.js версия:

node -v

npm:

npm -v

Angular-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, но вы можете выбрать любой редактор.

Вот как выглядит структура программы:

ptdxoFrfKYkg1O7Kjzfm2vfQxlsrM5ggfSoR

Не беспокойтесь, если вы запутались относительно файлов. Вся наша работа будет в приложение папку. Он содержит пять файлов:

icEs5nlfczvJiEgX7j4EUCcevZFnKCOXocqD

Примечание. Использование 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/

gwml-v8qHlrNVra-yfJOZH1Kdqx2oRnwrWYF

Все хорошо ?!

Теперь давайте немного структурируем HTML. Мы будем использовать классы Bootstrap для создания простой формы.

ioyTYMvqC7Izykcin7U1OAEE9pIO7Tn9CWGB

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 директива. Вы можете вставить переменную как атрибут во входящий элемент.

9x5e9yWah1OqD5OpVTfMAxz5fzEjn1e3jLjD
<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”.

YiBkAM7A8VteVRe3Ok0KBWaVscJ1QRk9ciL9

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>

После получения данных:

IdbbBDKFN29rGZisR0ygAKwKdTUPexZ7-hYD

Теперь данные будут автоматически получены при нажатии кнопки «Добавить».

Yyeff6WTcxF-b39yi6zMtpe9UWzjZ9NhZBWs

Стилизация программы

Мне нравится использовать 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">

После добавления определенного стиля в нашу программу она будет выглядеть так:

Bb8mPSgYnJuwIEHA3-cRc8yR0q1YId96ppmi

Чтобы использовать значки материалов:

<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")  }

Когда вы нажимаете «Удалить», на консоли должно появиться следующее:

nWS2NAJXn4iaQL6vqGwiaUBVSY64XUxerN4w

Теперь мы должны прокрутить “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)    }   }  }

Результат:

bJVYplDX6DgQ39ZaN3eYhBcenCi86fqxbov0

Прекрасно?!!

Вход для добавления элементов

Мы можем добавить событие в форму:

(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)  }

Проверьте консоль. Он вернет объект значений:

HBlkb6jnVHcHyTGJ1lEff1dcy2ok-T7glk42

Итак, теперь мы должны передать возвращенное значение в “todoArray”:

// submit Form  todoSubmit(value:any){     if(value!==""){    this.todoArray.push(value.todo)     //this.todoForm.reset()    }else{      alert('Field required **')    }      }

Мы здесь ?. Значение вставляется без необходимости нажимать на кнопку добавить, просто нажав «ввести»:

OWpohuUVC7SjOCGfavFkTnoU2D1sR1CgQj8r

Еще одно. Чтобы сбросить форму после отправки, добавьте встроенный метод resetForm() для отправки события.

<form #todoForm= "ngForm" (ngSubmit)="todoSubmit(todoForm.value); todoForm.resetForm()" ></form>

Теперь форма будет сбрасываться после каждой отправки:

0w5t7IIt4Wj4KBolctdZBNFQrwr4ucCLL6or

Добавление анимаций

Мне нравится добавить немного анимации. Чтобы добавить анимацию, импортируйте компоненты анимации в свой 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)"})           ]))])             ])
]})

Теперь элементы обладают хорошим эффектом, когда их вводят и удаляют.

4ugLJyeDD6oGnKg6jc47KqRc692d4H376pqr

Весь код

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 (рекомендовано)

Похожие записи:

  1. Как создать калькулятор подсказок с помощью HTML, CSS и JavaScript
  2. Как создать контактную форму с помощью CSS
  3. Как создать HTML-кнопку, которая действует как ссылка
  4. Изменение цвета элемента H2

Добавить комментарий

Ваш адрес email не будет опубликован.