Урок за контролер на AngularJS с пример

Съдържание:

Anonim

Какво представлява контролерът в AngularJs?

Контролери в AngularJs взема данните от изгледа, обработва данните и след това изпраща тези данни към изгледа, който се показва на крайния потребител. Контролерът ще има вашата основна бизнес логика.

Контролерът ще използва модела на данните, ще извърши необходимата обработка и след това ще предаде изхода на изгледа, който от своя страна се показва на крайния потребител.

В този урок ще научите -

  • Какво прави Controller от гледна точка на Angular
  • Как да изградите основен контролер
  • Как да дефинирам методи в контролера
  • Използване на ng-контролер във външни файлове

    • Какво прави Controller от гледна точка на Angular

    Следва проста дефиниция на работата на Angular JS Controller.

    • Основната отговорност на контролера е да контролира данните, които се предават на изгледа. Обхватът и изгледът имат двупосочна комуникация.
    • Свойствата на изгледа могат да извикват "функции" на обхвата. Освен това събитията в изгледа могат да извикат "методи" за обхвата. По-долу кодов фрагмент дава прост пример за функция.
      • Функцията ($ scope), която се дефинира при дефиниране на контролера и вътрешна функция, която се използва за връщане на конкатенацията на $ scope.firstName и $ scope.lastName.
      • В AngularJS, когато дефинирате функция като променлива, тя е известна като метод.
    • Данните по този начин преминават от контролера към обхвата и след това данните преминават напред и назад от обхвата към изгледа.
    • Обхватът се използва за излагане на модела на изглед. Моделът може да бъде модифициран чрез методи, дефинирани в обхвата, които могат да бъдат задействани чрез събития от изгледа. Можем да дефинираме двупосочно свързване на модела от обхвата към модела.
    • Контролерите не трябва да се използват в идеалния случай за манипулиране на DOM. Това трябва да се направи от директивите, които ще видим по-късно.
    • Най-добрата практика е да имате контролер, базиран на функционалност. Например, ако имате формуляр за въвеждане и имате нужда от контролер за това, създайте контролер, наречен "контролер на формуляри".

    Как да изградите основен контролер

    Преди да започнем със създаването на контролер, първо трябва да разполагаме с основната настройка на HTML страницата.

    По-долу кодов фрагмент е проста HTML страница, която има заглавие "Регистрация на събитие" и има препратки към важни библиотеки като Bootstrap, jquery и Angular.

    1. Добавяме препратки към CSS таблиците на bootstrap CSS, които ще се използват заедно с библиотеките на bootstrap.
    2. Добавяме препратки към библиотеките angularjs. Така че сега всичко, което правим с angular.js напред, ще бъде препращано от тази библиотека.
    3. Ние добавяме препратки към bootstrap библиотеката, за да направим нашата уеб страница по-отзивчива за определени контроли.
    4. Добавихме препратки към библиотеки jquery, които ще се използват за DOM манипулация. Това се изисква от Angular, тъй като част от функционалността в Angular зависи от тази библиотека.

    По подразбиране горният кодов фрагмент ще присъства във всички наши примери, така че можем да покажем само конкретния angularJS код в следващите раздели.

    Второ, нека да разгледаме нашите файлове и файлова структура, с които ще започнем по време на курса.

    1. Първо разделяме файловете си в 2 папки, както се прави с всяко конвенционално уеб приложение. Имаме папката "CSS". Той ще съдържа всички наши каскадни файлове със стилови листове, а след това ще имаме нашата папка "lib", която ще съдържа всичките ни JavaScript файлове.
    2. Файлът bootstrap.css се поставя в папката CSS и се използва за добавяне на добър външен вид и усещане за нашия уебсайт.
    3. Angular.js е нашият основен файл, който беше изтеглен от сайта angularJS и съхраняван в нашата папка lib.
    4. Файлът app.js ще съдържа нашия код за контролерите.
    5. Файлът bootstrap.js се използва за допълване на файла bootstrap.cs, за да добави функционалност bootstrap към нашето уеб приложение.
    6. Файлът jquery ще се използва за добавяне на функционалност за манипулиране на DOM към нашия сайт.

    Нека видим пример за това как да използваме angular.js,

    Това, което искаме да направим тук, е просто да покажем думите „AngularJS“ както в текстов формат, така и в текстово поле, когато страницата се разглежда в браузъра.

    


    Guru99 Global Event
    

    Tutorial Name : 
    This tutorial is {{tutorialName}}

    Обяснение на кода:

    1. Най- нг приложение ключова дума се използва за означаване, че това приложение следва да се разглежда като ъглова приложение. Всичко, което започва с префикса 'ng', е известно като директива. "DemoApp" е името, дадено на нашето приложение Angular.JS.
    2. Създадохме div таг и в този таг добавихме директива ng-контролер заедно с името на нашия контролер "DemoController". Това всъщност прави нашия div таг възможността за достъп до съдържанието на Demo Controller. Трябва да споменете името на контролера съгласно директивата, за да сте сигурни, че имате достъп до функционалността, дефинирана в контролера.
    3. Създаваме обвързване на модел, използвайки директивата ng-model. Това, което прави, е, че обвързва текстовото поле за Име на урок да бъде обвързано с променливата член "tutorialName".
    4. Ние създаваме променлива на член, наречена "tutorialName", която ще се използва за показване на информацията, която потребителят въвежда в текстовото поле за Име на урок.
    5. Създаваме модул, който ще се прикачи към нашето приложение DemoApp. Така че този модул вече става част от нашето приложение.
    6. В модула дефинираме функция, която присвоява стойност по подразбиране на "AngularJS" на нашата променлива tutorialName.

    Ако командата се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.

    Изход:

    Тъй като присвоихме на променливата tutorialName стойност на "Angular JS", това се показва в текстовото поле и в обикновения текстов ред.

    Как да дефинирам методи в контролера

    Обикновено човек би искал да дефинира множество методи в контролера, за да отдели бизнес логиката.

    Например, да предположим, че ако искате контролерът ви да направи 2 основни неща,

    1. Извършете добавянето на 2 числа
    2. Извършете изваждането на 2 числа

    След това в идеалния случай бихте създали 2 метода във вашия контролер, единият за извършване на добавяне, а другият за извършване на изваждането.

    Нека видим прост пример за това как можете да дефинирате персонализирани методи в контролера на Angular.JS. Контролерът просто ще върне низ.

    Event Registration


    Guru99 Global Event
    

    Tutorial Name :

    This tutorial is {{tutorialName}}

    Обяснение на кода:

    1. Тук ние просто дефинираме функция, която връща низ от "AngularJS". Функцията е прикрепена към обекта на обхвата чрез променлива член, наречена tutorialName.
    2. Ако командата се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.

    Изход:

    Използване на ng-контролер във външни файлове

    Нека да разгледаме пример за "HelloWorld", където цялата функционалност е била поставена в един файл. Сега е време да поставите кода за контролера в отделни файлове.

    Нека следваме стъпките по-долу, за да направим това.

    Стъпка 1) Във файла app.js добавете следния код за вашия контролер

    angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});

    Горният код прави следните неща,

    1. Дефинирайте модул, наречен "приложение", който ще държи контролера заедно с функционалността на контролера.
    2. Създайте контролер с името "HelloWorldCtrl". Този контролер ще се използва, за да има функционалност за показване на съобщение "Hello World".
    3. Обектът за обхват се използва за предаване на информация от контролера към изгледа. Така че в нашия случай обектът за обхват ще се използва за задържане на променлива, наречена "съобщение".
    4. Дефинираме съобщението на променливата и му присвояваме стойността "Hello World".

    Стъпка 2) Сега във вашия файл Sample.html добавете div клас, който ще съдържа директивата ng-controller и след това добавете препратка към променливата член "message"

    Също така не забравяйте да добавите препратка към файла на скрипта app.js, който има изходния код за вашия контролер.

    Event Registration


    Guru99 Global Event
    

    {{message}}

    Ако горният код е въведен правилно, след стартиране на вашия код в браузъра ще се покаже следният изход.

    Изход:

    Обобщение

    • Основната отговорност на контролера е да създаде обект на обхват, който от своя страна се предава на изгледа
    • Как да изградим обикновен контролер, използвайки директивите ng-app, ng-controller и ng-model
    • Как да добавите персонализирани методи към контролер, който може да се използва за разделяне на различни функционалности в модула angularjs.
    • Контролерите могат да бъдат дефинирани във външни файлове, за да се отдели този слой от слоя View. Това обикновено е най-добрата практика при създаване на уеб приложения.