Как создавать модули Angular для организации кода

В этом руководстве мы увидим, как создавать модули Angular для организации кода. Модули — отличный способ организовать приложение и расширить его возможностями внешних библиотек. Библиотеки Angular — это NgModules, например FormsModule, HttpClientModule и RouterModule. В виде NgModules доступно множество сторонних библиотек, таких как Material Design, Ionic и AngularFire2. Модули Angular также могут добавлять службы в приложение. Такие службы могут разрабатываться внутри компании, как что-то, что вы готовите для своего приложения.

Модули функций

Модули функций — это модули NgModules для организации код. По мере масштабирования приложения вы можете систематизировать код, соответствующий определенной функции. Модули функций помогают нам установить четкие границы для ваших функций. С помощью функциональных модулей вы можете хранить код, связанный с конкретной функциональностью или функцией, отдельно от другого кода.

Различия между функциональными модулями и корневыми модулями

Функциональный модуль — это лучшая организационная практика, в отличие от концепции ядра Angular API. Функциональный модуль предоставляет согласованный набор функций, ориентированных на конкретные потребности приложения, такие как рабочий процесс пользователя, маршрутизация или формы. Хотя вы можете делать все в рамках корневого модуля, функциональные модули помогают разделить приложение на целевые области.

Как создавать угловые модули

Давайте установим новый проект Angular 7, а затем воспользуемся модулями функций для организации нашего проекта.

Шаг 1. Установите Angular 7

Давайте создадим новый проект Angular.

 ng  новые angmodules 

Мы будем использовать угловую маршрутизацию, но не предусмотрена с помощью Angular CLI, потому что он не нужен. Мы будем создавать только один маршрут для этой демонстрации. Теперь войдите в папку и откройте проект в своем редакторе. Я использую VSCode.

 cd angmodules && code. 

Также добавьте Загрузите загрузку с помощью следующей команды.

 npm install bootstrap --save 

Теперь добавьте файл начальной загрузки в angular.json файл.

 "styles": ["src/styles.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css"], 

Теперь мы можем использовать Bootstrap в нашем приложении.

Шаг 2. Создайте новый Angular Module

Предполагая, что у вас уже есть приложение, созданное с помощью Angular CLI, создайте функциональный модуль с помощью Angular CLI, введя следующую команду в корневом каталоге проекта.

 ng g module student 

Он создаст папку внутри каталога app под названием a student, и внутри каталога student вы можете увидеть один файл с именем

//student. module.tsimport {NgModule} из '@ angular/core'; импорт {CommonModule} из '@ angular/common'; @ NgModule ({декларации: [], импорт: [CommonModule]}) экспортный класс StudentModule {} 

Это означает, что если у нас есть какие-либо функции или компоненты, связанные со студентом, они будут импортированы сюда, в этот файл student.module.ts , а не непосредственно внутри app.module.ts , как мы обычно делали.

Следующим шагом является создание трех угловых компонентов, связанных с модулем ученика. Итак, давайте сделаем это.

Шаг 3: Создание угловых компонентов

Теперь мы создадим следующие три связанных угловых компонента в модуль студента.

1. student.component.ts
2. student-list.component.ts
3. student -list-item.component.ts

Итак, введите следующую команду для созданных выше компонентов angular.

 ng gc student/student --spec =  falseng gc student/student-list --spec = falseng gc student/student-list-item --spec = false 

Вы можете видеть, что все компоненты создаются внутри app >> student , и теперь вы можете увидеть файл student.module.ts . Все три компонента автоматически импортируются в файл student.module.ts .

//student.module.tsimport {NgModule} из '@ angular/ core '; импортировать {CommonModule} из' @ angular/common '; импортировать {StudentListComponent} из' ./student-list/student-list.component '; импортировать {StudentListItemComponent} из' ./student-list-item/student-  list-item.component '; import {StudentComponent} из' ./student/student.component '; @ NgModule ({объявления: [StudentComponent, StudentListComponent, StudentListItemComponent], импорт: [CommonModule]}) экспорт класса StudentModule {} 

Импортируйте файл student.module.ts внутри файла app.module.ts .

//app.module.tsimport {BrowserModule} из '@ angular/platform-browser'; импортировать {NgModule} из '@ angular/core'; импортировать {StudentModule} из './student/student.module';import {  AppComponent} из './app.component'; @ NgModule ({объявления: [AppComponent]  , импорт: [BrowserModule, StudentModule], провайдеры: [], bootstrap: [AppComponent]}) класс экспорта AppModule {} 

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

 ng serve 

Шаг 4. Создайте модель и услугу для ученика

Вы можете создать службу, используя следующую команду.

 ng gs student/student --spec = false 

Она создаст такой файл.

//студенческая служба. tsimport {Injectable} из '@ angular/core'; @ Injectable ({providedIn: 'root'}) экспортный класс StudentService {constructor () {}} 

Теперь внутри папки ученика создайте один файл с именем student.model.ts и добавьте следующий код.

//student.model.tsexport class Student {id: Number;  имя: Строка;  enrollno: Number;  колледж: String;  University: String;} 

Итак, это наш модельный класс Student. Мы отображаем такие данные во внешнем интерфейсе.

Теперь напишите следующий код внутри файла student.service.ts .

//student.service.tsimport {Injectable} из '@ angular/core'; импортировать {Observable} из 'rxjs'; импортировать {Student} из './student.model'; @ Injectable ({providedIn: '  root '}) экспортный класс StudentService {студенты: Студент [] = [{id: 1, имя:' Krunal ', регистрационный номер: 110470116021, колледж:' VVP Engineering College ', университет:' GTU '}, {id: 2,  имя: 'Rushabh', регистрационный номер: 110470116023, колледж: 'VVP Engineering College', университет: 'GTU'}, {id: 3, name: 'Ankit', регистрационный номер: 110470116022, колледж: 'VVP Engineering College', университет:  'GTU'}];  constructor () {} public getStudents (): любой {const studentObservable = новый наблюдаемый (наблюдатель => {setTimeout (() => {наблюдатель.next (this.students);}, 1000);});  return studentObservable;  }} 

Итак, в этом файле мы определили функцию getStudents, которая будет возвращать Observables. Поэтому, когда подписчик хочет получить данные от издателя, он подписывается на этот studentObservable , и издатель начинает публиковать значения, и, в конце концов, подписчик получает данные. Если вы не знакомы с Observables, ознакомьтесь с моим руководством по Angular Observables с примерами.

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

Шаг 5. Настройте маршрутизацию.

Добавьте следующий код в app.module.ts

//app.module.tsimport {BrowserModule} из '@ angular/platform-browser'; импортировать {NgModule} из '@ angular/core'; импортировать {Маршруты,  RouterModule} из '@ angular/router'; импортировать {StudentModule} из './student/student.module'; импортировать {AppComponent} из './app.component'; импортировать {StudentComponent} из './student/student/ student.component '; const routes: Routes = [{path:' ', component: StudentComponent}]; @ NgModule ({объявления: [AppComponent], импорт: [BrowserModule, StudentModule, RouterModule. forRoot (routes),], provider: [], bootstrap: [AppComponent]}) класс экспорта AppModule {} 

Здесь я импортировал Routes и RouterModule , а затем создайте массив маршрутов и зарегистрируйтесь в нашем приложении angular.

Теперь нам нужно отобразить компонент с помощью router- розетка внутри файла app.component.html .

Итак, до сих пор мы делали следующее: если пользователь переходит на http://localhost: 4200 , мы отображаем student.component.html . Итак, наш следующий шаг — добавить HTML-код для просмотра.

Шаг 6. Отображение данных

Первое, что нужно сделать. чтобы написать следующий код внутри файла student.component.html .

Итак, это наш самый внешний компонент, а внутри этого компонента находится компонент student-list.component.html .

Теперь напишите следующий код внутри файла student-list.component.ts .

//student-list.component.tsimport {  Компонент, OnInit} из '@ angular/core'; импортировать {StudentService} из '../student.service'; импортировать {Student} из '../student.model'; @ Component ({selector: 'app-student  -list ', templateUrl:' ./student-list.component.html ', styleUrls: [' ./student-list.component.css'ght})export class StudentListComponent реализует OnInit {студенты: Student [] = [];  конструктор (частный студенческий сервис: StudentService) {} ngOnInit () {const studentObservable = this.studentservice.getStudents ();  studentObservable.subscribe ((studentData: Student []) => {this.students = studentData;});  }} 

Также напишите следующий HTML-код в файле student-list.component.html .

 
 
  student-list-item> 
 

Итак, мы передаем данные от родителя к дочернему компоненту. Итак, компонент app-student-list-component будет ожидать одно входное значение, называемое

Теперь напишите следующий код внутри student -list-item.component.ts файл.

//student-list-item.component.tsimport {Component, OnInit, Input} from '@ angular/core'; @  Компонент ({селектор: 'app-student-list-item', templateUrl: './student-list-item.component.html', styleUrls: ['./student-list-item.component. css ']}) класс экспорта StudentListItemComponent реализует OnInit {@Input () student: any;  constructor () {} ngOnInit () {}} 

Добавьте HTML-код в файл student-list-item.component.html .

 
 
 
 {{student.name}} 
 
 {{student.enrollmentno}} 
 
 {{student.college}} 
 
 {{студент.  университет}} 
  Пойдите куда-нибудь  
 

Сохраните файл и перейдите к http://localhost: 4200/ и через 1 секунду вы увидите что-то подобное.

Заключение

Итак, здесь мы взяли весь наш проект по модулям для учащегося, создав файл с именем

Все функции и код, относящиеся к учащемуся будет находиться в папке app >> student , и вы можете создать столько модулей, сколько захотите. b y разделяя их по каждой из уважаемых папок.

Модули функций — лучший способ организовать масштабируемый код; вам не нужно регистрировать все свои компоненты в файле app.module.ts , вы создадите один файл модуля, соответствующий вашей функциональности, и добавите в него свои компоненты.

Наконец, вы можете добавить модуль в файл app.module.ts , и все готово. Это один из лучших способов организовать ваш проект.

Наконец, мы закончили «Как создавать угловые модули для организации кода».