Статьи

Угловой контроллер JS

Август 17, 2017

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

  • Как настроить Angular JS и контроллер?
  • Важные угловые JS специфические атрибуты (директивы)
  • Важные угловые специфические объекты, например: — $ scope, angular

Настроить Angular JS

Для работы с базовой функцией угловых js необходимо включить только угловые js (jsp, html….)

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script>

Можно загрузить угловой JS и загрузить локально, а не загружать его из CDN

Настроить контроллер

Определить модуль в JS

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

Подключите контроллер к модулю

//Define MyController and attaching it to the module named myfirstAgnularModule
myfirstAgnularModule.controller(‘MyController’,function($scope){
$scope.message=”Hello Angular”;
});

В вышеприведенном случае $ scope является специфическим угловым объектом. Любой параметр, который начинается с $, управляется угловым js.

Здесь мы прикрепляем сообщение к объекту $ scope. Все, что мы прикрепляем к объекту $ scope, будет действовать как модель.

Рассматривая этот пример, мы можем сказать, что контроллер не напрямую связывается с представлением (html), а через модель.

На макроскопическом уровне контроллер отвечает за

  • Организация данных.
  • Управляйте данными, чтобы видеть / скрывать при просмотре
  • Связь с удаленным сервером для получения данных.

Настроить вид для модуля и контроллера

<! — загрузить угловой js из CDN ->

<script src = «https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js»> </ script>

<body ng-app = «myfirstAgnularModule» ng-controller = «MyController»>

{{сообщение}}

</ Body>

Angular JS конкретные атрибуты / директивы и выражение привязки

Эти атрибуты известны как директивы

  • нг-приложение

    • Только один атрибут должен присутствовать во всем HTML
    • Всякий раз, когда угловые JS найти этот атрибут. Он загрузится сам.
  • нг-контроллер

    • Одна страница может иметь несколько директив ng-controller
    • Он должен быть определен на том же уровне или на дочернем уровне ng-app
  • Обязательное выражение

    • В вышеуказанном случае {{message}} действует как выражение привязки
    • Привязка выражений помогает отображать данные модели для просмотра.

Вывод

Название изображения

Полный пример

myFirstAngularExample.js

(function () {
    var myfirstAgnularModule = angular.module (‘myfirstAgnularModule’, []);
    myfirstAgnularModule.controller (‘MyController’, function ($ scope) {
        $ scope.message = «Hello Angular»;
    });
} () );

myFirstAngularExample.htm

<html>
<head>
<script src = «https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js»> </ script>
<script src = «myFirstAngularExample.js «> </ script>
</ head>
<body ng-app =» myfirstAgnularModule «ng-controller =» MyController «> {{message}} </ body> </ html>
    

29
Share: