Узнайте, как создать свое первое приложение 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 (рекомендовано)

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

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