Все ленты — последние статьи

AngularJS — что это

AngularJS — JavaScript-фреймворк с открытым исходным кодом. Предназначен для разработки одностраничных приложений. Его цель — расширение браузерных приложений на основе MVC шаблона, а также упрощение тестирования и разработки.

Фреймворк работает с HTML, содержащим дополнительные пользовательские атрибуты, которые описываются директивами, и связывает ввод или вывод области страницы с моделью, представляющей собой обычные переменные JavaScript. Значения этих переменных задаются вручную или извлекаются из статических или динамических JSON-данных.

Популярные Angular-директивы

С помощью директив AngularJS можно создавать пользовательские HTML-теги и атрибуты, чтобы добавить поведение некоторым элементам.

ng-app
Объявляет элемент корневым для приложения.
ng-bind
Автоматически заменяет текст HTML-элемента на значение переданного выражения.
ng-model
То же что и ng-bind, только обеспечивает двустороннее связывание данных. Изменится содержимое элемента, ангуляр изменит и значение модели. Изменится значение модели, ангуляр изменит текст внутри элемента.
ng-class
Определяет классы для динамической загрузки.
ng-controller
Определяет JavaScript-контроллер для вычисления HTML-выражений.
ng-repeat
Создает экземпляр для каждого элемента из коллекции.
ng-show и ng-hide
Показывает или скрывает элемент в зависимости от значения логического выражения.
ng-switch
Создает экземпляр шаблона из множества вариантов, в зависимости от значения выражения.
ng-view
базовая директива, отвечает за обработку маршрутов, которые принимают JSON перед отображением шаблонов, управляемых указанными контроллерами.

Двустороннее связывание данных

Двустороннее связывание данных в AngularJS является наиболее примечательной особенностью и уменьшает количество кода, освобождая сервер от работы с шаблонами. Вместо этого, шаблоны отображаются как обычный HTML, наполненный данными, содержащимися в области видимости, определенной в модели. Сервис $scope в Angular следит за изменениями в модели и изменяет раздел HTML-выражения в представлении через контроллер. Кроме того, любые изменения в представлении отражаются в модели. Это позволяет обойти необходимость манипулирования DOM и облегчает инициализацию и прототипирование веб-приложений[2].

 

Ссылки

 

  1. <!doctype html>
  2. <htmlng-app>
  3. <head>
  4. <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
  5. </head>
  6. <body>
  7. <div>
  8. <label>Имя:</label>
  9. <inputtype="text"ng-model="yourName"placeholder="Введите свое имя">
  10. <hr>
  11. <h1>Привет {{yourName}}!</h1>
  12. </div>
  13. </body>
  14. </html>

Скрыть блок тэга div HTML, CSS

1. <div id="block" style="background:#000;width:100px;height:100px">&nbsp;</div> <button onclick="document.getElementById('block').style.display='none'">Click</button>

2.  А в чём проблема? Проверьте условием: скрыт ли блок.

<div id="block" style="background:#000;width:100px;height:100px">&nbsp;</div>
<button onclick="
var a =document.getElementById('block');
if(a.style.display=='none')
a.style.display='block'
else
a.style.display='none'">Click</button>

Таблицы html в примерах

2001 г

Таблицы в примерах

Перевод Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра.
Центр Информационных Технологий, НГТУ

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

ОБЫЧНАЯ ТАБЛИЦА 3X2

A B C
D E F
<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

ДВА ПРИМЕРА С ROWSPAN

Подробнее: Таблицы html в примерах

Краткий курс HTML 5 / Элементы ввода данных

 

Наиболее используемым элементом форм несомненно является <input />. С его помощью создаются поля для ввода текста, паролей и выбора файлов, а также кнопки, флажки и переключатели. В HTML 5 он еще и приспособлен для ввода всевозможных дат, числовых значений, телефонов, адресов и даже выбора цвета. Все это многообразие определяется атрибутом type, все допустимые значения которого перечислены в таблице ниже. Вы уже знаете, что данные из формы передаются на сервер в виде пар «поле=значение». Название поля, определяемого элементом <input /> задается атрибутом name, а его значение по умолчанию можно указать в value.

Подробнее: Краткий курс HTML 5 / Элементы ввода данных

Простой, блочный набросок (шаблон) сайта div — чистый

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Крутой сайт</title>
        <link rel="stylesheet" href="/css/css_reset.css">
        <link rel="stylesheet" href="/css/style.css">
    </head>
    <body>
        <div id="main">
            <div id="header"></div>
            <div id="left"></div>
            <div class="right"></div>
            <div class="right"></div>
            <div id="content"></div>
            <div id="footer"></div>
        </div>
    </body>
</html>

 

style.css

 

div{
    border: 1px solid black;
}

#main{
    width: 80%;
    margin: 0 auto;
}

#header{
    height: 110px;
}

#left{
    height: 500px;
    width: 20%;
    float: left;
}

#content{
    height: 500px;
    overflow: hidden;
}

.right{
    height: 500px;
    width: 20%;
    float: right;
}

#footer{
    height: 70px;
    clear: both;
}