Бұрыштық CLI-мен таныстыру

Бұл жазбада біз Angular CLI туралы білеміз және жаңа бұрыштық жобаны бастау үшін оны қалай пайдалану керектігін көреміз.

Бұрыштық CLI дегеніміз не?

Angular CLI - бұл бұрыштық жобаларды іске қосудың және жұмыс істеудің ресми құралы. Бұл сізді күрделі конфигурациядан сақтайды және TypeScript, Webpack және т.б. сияқты құралдарды жасайды.

Бұрыштық CLI-ді орнатқаннан кейін сізге жобаны құру үшін бір команданы, ал оны қосымшамен ойнау үшін жергілікті дамыту серверін қолдана отырып іске қосу қажет.

Қазіргі кездегі алдыңғы қатарлы құралдар сияқты, Angular CLI Node.js шыңында салынған.

Node.js - бұл серверде JavaScript іске қосуға және веб-қосымшалар жасауға мүмкіндік беретін серверлік технология. Алайда, Angular - бұл алдыңғы технология, сондықтан Node.js-ті өзіңіздің даму машинаңызға орнату қажет болса да, ол тек CLI-ді іске қосуға арналған.

Бағдарламаны өндіріске жасағаннан кейін сізге Node.js қажет болмайды, өйткені соңғы байламдар - бұл кез-келген сервер немесе CDN қызмет көрсететін тұрақты HTML, CSS және JavaScript.

Егер сіз толық мәтінді веб-қосымшаны Angular көмегімен жасасаңыз, алдыңғы және артқы жағы үшін JavaScript қолданғыңыз келсе, артқы шетін құру үшін Node.js қажет болуы мүмкін.

MEAN стекімен танысыңыз - бұл архитектурада MongoDB, Express (Node.js-тің жоғарғы жағында орнатылған веб-сервер және REST API жүйесі) және Angular бар. Егер сіз бастау үшін қадамдық оқулық алғыңыз келсе, сіз осы мақаланы оқи аласыз.

Бұл жағдайда Node.js қолданбаның артқы жағын құру үшін қолданылады және оны PHP, Ruby немесе Python сияқты қалаған кез-келген сервер технологиясымен алмастыруға болады. Бірақ Angular Node.js-қа тәуелді емес, оның CLI құралынан басқа және пакеттерді npm-тен орнатуға болмайды.

NPM Node Package Manager үшін қолданылады. Бұл Node пакеттерін орналастыру регистрі. Соңғы жылдары ол Angular, React, Vue.js және тіпті Bootstrap сияқты алдыңғы бумалар мен кітапханаларды жариялау үшін қолданылады.

Ескерту: біздің бұрыштық кітабымызды жүктеп алуға болады: алғашқы веб-қосымшаларды Angular көмегімен ақысыз құрыңыз.

Бұрыштық CLI орнату

Біріншіден, сізде даму машинасында Node және npm болуы керек. Мұны істеудің көптеген жолдары бар, мысалы:

  • жүйеде түйіннің бірнеше нұсқаларын орнату және олармен жұмыс істеу үшін NVM (Node Version Manager) қолдану
  • операциялық жүйеңіздің ресми пакет менеджері арқылы
  • оны ресми веб-сайттан орнату.

Мұны қарапайым етіп, ресми сайтты қолданайық. Жүктеу бетіне жай кіріп, Windows үшін екілік файлдарды алыңыз, содан кейін орнату шеберін орындаңыз.

Сізде Node орнатылғанын, Node орнатылған нұсқасын көрсететін пәрмен жолында келесі пәрменді іске қосу арқылы жүйеде орнатылғанына көз жеткізе аласыз:

$ түйін -v

Әрі қарай, бұрыштық CLI орнату үшін келесі пәрменді іске қосыңыз:

$ npm орнату @ бұрыштық / клип

Бұл жазу кезінде бұрыштық 8.3 орнатылады.

Егер сіз бұрышты 9 орнатқыңыз келсе, келесі тегті келесідей қосыңыз:

$ npm келесіде @ бұрыштық / cli @ орнатыңыз

Пәрмен сәтті аяқталғаннан кейін сізге бұрыштық CLI орнатылуы керек.

Бұрыштық CLI туралы қысқаша нұсқаулық

Angular CLI-ні орнатқаннан кейін көптеген командаларды орындауға болады. Орнатылған CLI нұсқасын тексеруден бастайық:

$ ng нұсқасы

Екінші пәрмен - толық пайдалану анықтамасын алуға арналған анықтама командасы:

$ ng көмек

CLI келесі командаларды ұсынады:

қосу: сіздің жобаңызға сыртқы кітапхана үшін қолдауды қосады.

build (b): Берілген шығару жолында dist / деп аталатын шығыс каталогқа бұрыштық қосымшаны құрастырады. Жұмыс кеңістігі ішінен орындалуы керек.

config: Бұрыштық конфигурация мәндерін алады немесе орнатады.

doc (d): шолғышта ресми бұрыштық құжаттаманы (angular.io) ашады және берілген кілт сөзді іздейді.

e2e (e): Бұрыштық қосымшаны құрастырады және қызмет етеді, содан кейін Protractor көмегімен сынақтан өткізеді.

generate (g): Схема негізінде файлдарды жасайды және / немесе өзгертеді.

анықтама: Қол жетімді командалар мен олардың қысқаша сипаттамаларын тізімдейді.

lint (l): Берілген жоба қалтасындағы бұрыштық қосымшаның коды бойынша қылау құралдарын іске қосады.

new (n): жаңа жұмыс кеңістігін және бастапқы бұрыштық бағдарламаны жасайды.

іске қосу: сіздің жобаңызда белгіленген жеке мақсатты іске қосады.

service (s): файлдарды өзгерту кезінде қалпына келтіріп, қолданбаңызды жасайды және қызмет етеді.

test (t): жобада блок сынақтарын жүргізеді.

жаңарту: қолданбаны және оның тәуелділіктерін жаңартады. Https://update.angular.io/ қараңыз

нұсқа (v): бұрыштық CLI нұсқасын шығарады.

xi18n: i18n хабарларын бастапқы кодтан алады.

Жобаны құру

Сіз өзіңіздің бұрыштық жобаңызды командалық жол интерфейсінде келесі пәрменді іске қосу арқылы тез құру үшін Angular CLI-ді қолдана аласыз:

$ ng жаңа алдыңғы бет

Ескерту: frontend - бұл жоба атауы. Сіз, әрине, сіздің жобаңыз үшін кез-келген жарамды атауды таңдай аласыз. Біз толық стендтік қосымшаны жасаймыз, өйткені мен frontend-ді алдыңғы қосымшаның атауы ретінде қолданамын.

Жоғарыда айтылғандай, CLI сізден бұрыштық бағыттауды қосқыңыз келе ме? және ә (ә) немесе n (жоқ) енгізу арқылы жауап беруге болады, бұл әдепкі опция. Сондай-ақ, ол сіз қолданғыңыз келетін кесте пішімі туралы сұрайды (мысалы, CSS). Параметрлерді таңдаңыз және жалғастыру үшін Enter пернесін басыңыз.

Осыдан кейін сіздің жобаңызды каталог құрылымымен және бірнеше конфигурациялар мен кодтық файлдармен жасай аласыз. Ол көбінесе TypeScript және JSON форматтарында болады. Әр файлдың рөлін көрейік:

  • / e2e /: веб-сайттың ақырына дейін (пайдаланушының мінез-құлқын модельдейтін) сынақтардан тұрады
  • / node_modules /: npm орнатуды қолдана отырып, барлық үшінші тарап кітапханалары осы қалтаға орнатылды
  • / src /: бағдарламаның бастапқы коды бар. Мұнда көп жұмыс жасалады
  • / app /: құрамында модульдер мен компоненттер бар
  • / активтер /: құрамында кескіндер, белгішелер мен стильдер сияқты тұрақты активтер бар
  • / орталар /: қоршаған ортаға (өндіріс және өңдеу) арнайы конфигурация файлдары кіреді
  • шолушылар тізімі: CSS-ті қолдау үшін авто-түзеткіш қажет
  • favicon.ico: favicon
  • index.html: негізгі HTML-файл
  • karma.conf.js: Карма үшін конфигурациялық файл (тест құралы)
  • main.ts: AppModule іске қосылатын негізгі файл
  • polyfills.ts: Angular қажет полифилдер
  • styles.css: жобаға арналған ғаламдық кесте файлы
  • test.ts: бұл Карма үшін конфигурациялық файл
  • tsconfig. *. json: TypeScript теңшелім файлдары
  • angular.json: CLI конфигурациялары бар
  • pack.json: жобаның негізгі ақпаратын қамтиды (атауы, сипаттамасы және тәуелділіктері)
  • README.md: жоба сипаттамасын қамтитын бөлу файлы
  • tsconfig.json: TypeScript теңшелім файлы
  • tslint.json: TSlint үшін конфигурациялық файл (статикалық талдау құралы)

Сіздің жобаңызға қызмет көрсету

Бұрыштық CLI жергілікті машинада алдыңғы қосымшаларды жасауға арналған құралдар тізбегін ұсынады. Сонымен, сіздің жобаңызға қызмет ету үшін жергілікті серверді орнатудың қажеті жоқ - сіз өзіңіздің жобаңызға жергілікті қызмет көрсету үшін терминалдан алынған ng service пәрменін қолдана аласыз.

Алдымен жобаның қалтасында жылжып, келесі командаларды орындаңыз:

$ cd маңдайша $ ng қызмет етеді

Енді сіз өзіңіздің алдыңғы бағдарламаңызбен ойнауды бастау үшін http: // localhost: 4200 / мекен-жайына өтуіңізге болады. Егер сіз кез-келген бастапқы файлды өзгертсеңіз, бет автоматты түрде қайта жүктеледі.

Бұрыштық артефактілерді құру

Бұрыштық CLI ng генерациялау командасын береді, бұл жасаушыларға модульдер, компоненттер, директивалар, құбырлар және қызметтер сияқты негізгі бұрыштық артефактілерді жасауға көмектеседі:

$ ng менің компонентімді құра

my-компонент - компоненттің атауы. Бұрыштық CLI автоматты түрде src / app.module.ts файлында компоненттерге, директиваларға және құбырларға сілтеме қосады.

Егер сіз компонентті, директиваны немесе құбырды басқа модульге қосқыңыз келсе (негізгі қолданбалы модульден басқа, app.module.ts), сіз модуль атауымен және қиғаш сызықпен компоненттің атауын жай ғана алдын-ала ала аласыз:

$ ng g компоненті my-модуль / my-компоненті

my-модуль дегеніміз - қолданыстағы модульдің атауы.

Қорытынды

Бұл жазбада біз Angular CLI-ді өз даму машинамызға қалай орнатуға болатынын көрдік және оны жаңа бұрыштық жобаны нөлден бастау үшін қолдандық.

Сондай-ақ, модульдер, компоненттер және қызметтер сияқты бұрыштық артефактілерді құру үшін жобаңызды әзірлеу кезінде қолдануға болатын әртүрлі командаларды көрдік.

Сіз оның жеке веб-сайты, Twitter, LinkedIn және Github арқылы автормен байланысуға немесе оған ілесуге болады.