Создание приложения Angular 5 с помощью Angular-cli

Причина, по которой я создал эту серию статей, заключается в том, что я хотел бы иметь эту серию, когда впервые изучал Angular. Я столкнулся с множеством проблем при создании Angular приложений, и мне очень жаль, что у меня раньше не было всех частей из этой серии, которые позволили бы сэкономить много времени, потраченного на решение глупых проблем.

Это первая часть из семи частей серии о JavaScript-фреймворке Angular 5.

Прочтите эту статью о моем новом инструменте Medium Plus, чтобы получить удобное и настраиваемое чтение.

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

Серия статей:

Создание приложения Angular 5 с помощью Angular-cli (Вы здесь)
Использование Angular Material с Angular 5
Разверните приложение Angular 5 в Netlify
Сборка PWA с приложением Angular 5
Создавайте динамические темы для Angular Material
Использование FlexLayout с Angular 5
Создание News приложения с использованием Angular 5

Финал Демо здесь

Я предполагаю, что вы знаете, что такое npm.
Сначала нам нужно установить инструмент командной строки с именем angular-cli. Вы можете сделать это с помощью следующей команды в своем терминале.

npm install -g @angular/cli

Если вы используете Linux, как я, и используете non-root user. Возможно, вам потребуется добавить sudo перед командой. Это будет как

sudo npm install -g @angular/cli

Теперь мы установили angular-cli, поэтому можем использовать его для создания нашего приложения.

На вашем терминале измените каталог, в котором вы хотите создать свое приложение, я назову наше приложение wb-gy своим собственным доменом wb.gy: 3
Before running the next line read the quote after it first.

ng new wb-gy

Если вы предпочитаете использовать sass вместо css
Если вы знаете, что такое routes, и не хотите создавать их самостоятельно
Если вы хотите завершить эту серию статей и построить PWA в конце
Если вы хотите skip test файлов и не хотите, чтобы они были в вашем приложении

Следующая строка сгенерирует ваше приложение со стилем sass вместо css и с routing и service-worker (для нашего PWA), а также пропустит создание test файлов

Кстати, я собираюсь использовать это.

ng new wb-gy --routing --style=scss --skip-tests --service-worker

Вы должны увидеть это сообщение после многих строк установки.

Проект «wb-gy» успешно создан.

Давайте объясним каждую часть:
Я упоминал перед использованием каждой части, но я покажу, что делает каждый аргумент.

--routing: он создаст для вас несколько файлов для построения ваших маршрутов в приложении, так что вам не придется создавать их самостоятельно. Теперь вам нужно только добавить свои маршруты.
--stlye=scss: Он сообщает нашему клиенту изменить стиль с css на sass. Если вы забыли этот аргумент, вам придется изменить расширение каждого файла в самом имени файла и для каждой строки кода, имеющей это имя.
--skip-tests: не нужно объяснять, он пропустит создание тестовых файлов.
--service-worker: Эта часть сэкономит нам время, если вы хотите превратить свое Angular приложение в PWA.

Я знаю, что вы можете бояться использовать предыдущую строку со всеми этими параметрами. Но на самом деле, если бы я был на вашем месте, я бы использовал большинство из них. Кто-то может поспорить со мной по поводу test части. Я знаю, но предпочитаю не использовать их вначале.

Теперь измените каталог на наше приложение

cd wb-gy

и давайте запустим наш сервер

ng serve

и откройте http: // localhost: 4200 в браузере, чтобы увидеть свое приложение.
Но, если вы хотите запустить сервер и открыть приложение в браузере, немедленно запустите:

ng serve --open

Вы должны увидеть следующую страницу в своем браузере

Откройте свое приложение в любом text editor. Кстати, я использую VSCODE, и я его большой поклонник, если вы хотите узнать, как создавать компоненты и службы в своем приложении. Вы можете проверить документацию angualr-cli.

Но я могу дать вам краткое объяснение.
Если вы хотите сгенерировать новые компоненты, вы можете запустить

ng g component posts

В результате будет сгенерирован компонент с именем posts
, и вы обнаружите, что в вашем приложении создан новый каталог с именем posts.
Он содержит 3 файла (posts.component.html, posts.component.scss, posts.component.ts)

Мы будем использовать его позже, чтобы отображать некоторые сообщения с любым api.

Маршруты

Теперь мы можем добавить этот компонент в наши маршруты
Открыть app-routing.module.ts
Вы найдете его как

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Мы должны добавить код в этот файл:
Сначала мы должны добавить сам компонент, поэтому я импортирую posts component.
Во-вторых, мы должны добавить этот компонент в маршруты. и выберите путь.
Код должен быть таким

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PostsComponent } from './posts/posts.component';
const routes: Routes = [
  {
    path: "posts",
    component: PostsComponent
  },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Теперь как заставить наши маршруты работать!

Откройте src/app/app.component.html, удалите весь код и добавьте этот простой код.

<ul>
  <li>
    <a routerLink="/">Home</a>
    <a routerLink="/posts">Posts</a>
  </li>
</ul>
<router-outlet></router-outlet>

Давайте объясним каждую часть нашего кода:
Сначала в теге a есть атрибут, routerLink этот атрибут используется вместо href в угловых маршрутах, он сообщает нашему приложению, что этот URL-адрес является маршрутом.
Во-вторых, html тег <router-outlet></router-outlet> отображает вид компонента.

Теперь проверьте изменения в своем браузере, вы найдете список, попробуйте щелкнуть любую ссылку, чтобы проверить, работают ли наши маршруты или нет!

Я знаю, что это очень простой код, но я просто хочу, чтобы вы поняли его концепцию, и мы сделаем его более сложным позже в следующих статьях этой серии 😉.

Угловые директивы

Я не буду объяснять, что такое директивы, я оставлю эту часть для вас, чтобы вы проверили документацию.
Мы можем протестировать некоторые директивы, такие как ng-for, создав массив элементов и отобразив их в нашем представлении.

Показать список предметов

В компоненте posts:
Откройте src/app/posts/posts.component.ts. Добавим любой массив постов, вот результат:

import { Component, OnInit } from "@angular/core";
@Component({
  selector: "app-posts",
  templateUrl: "./posts.component.html",
  styleUrls: ["./posts.component.scss"]
})
export class PostsComponent implements OnInit {
  posts = [
    {
      title: "Hello world",
      details: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,"
    },
    {
      title: "Second post",
      details: "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    },
  ];
  constructor() {}
  ngOnInit() {}
}

чтобы отобразить эти сообщения, откройте src/posts/posts.component.html и замените в нем код на

<div *ngFor="let post of posts">
  <h2>{{post.title}}</h2>
  <p>{{post.details}}</p>
  <hr>
</div>

Давайте объясним код: я только что добавил ngFor директиву, которая действует как for loop.
Сохраните изменения, проверьте свой браузер и перейдите по posts маршруту, чтобы увидеть результат.

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

В следующей статье мы поднимем наше приложение на более продвинутый уровень и используем angular material, чтобы придать нашему приложению нотку стиля.
Посетите его сейчас Использование Angular Material с Angular 5

Если у вас есть какие-либо вопросы, прокомментируйте их ниже или вы можете найти меня в Twitter @geeksamu

Перед тем как уйти, ознакомьтесь со следующими полезными ссылками: 👀

👨️ Мой сайт / портфолио

🔥 Получите $ 50 БЕСПЛАТНОГО кредита на хостинг ЗДЕСЬ

⚡ Лучший веб-браузер на 2019 год | Конфиденциальность прежде всего и на основе Chromium

🤑️ Нет полосы? Как получить оплату с помощью Payoneer ⇒ $ 25 + $ 10 бонус за регистрацию

Создание приложения Angular 5 с помощью Angular-cli

Маршруты

Угловые директивы

Показать список предметов

Похожие вопросы