Что такое шаблоны в AngularJS?

28.12.2019AngularJS, Веб-технологии

Шаблоны в AngularJS — это просто HTML-файл, заполненный или обогащенный AngularJS, например, атрибутами и директивами. Директива — это маркерный элемент, который используется для нацеливания на определенный атрибут или класс для отображения его поведения в соответствии с потребностями. Модель и контроллер в Angular объединяются с шаблонами для управления видом, который пользователь видит в своем браузере. Угловые шаблоны могут также содержать CSS , элементы управления Form , фильтры и выражения .

Существует два типа шаблонов:

Статический шаблон
Динамические шаблоны

Ниже приведены примеры, иллюстрирующие оба шаблона:

Статический шаблон: статический шаблон определяется с помощью тега script. Атрибут id и type со значением text / ng-template должен быть предоставлен ему для работы статического шаблона. Также следует отметить, что статический шаблон будет работать только в том случае, если он находится в области действия ng-app , в противном случае он будет игнорироваться Angular.
Статический шаблон можно отобразить с помощью директивы ng-include . Например:

<div ng-include=”‘geeksforgeeks.html’”></div>

Пример: здесь показан простой шаблон

<!DOCTYPE html>

<html ng-app>

<head>

<title>

Angular Static Template

</title>

<style>

h1{

color:green;

}

</style>

</head>

<! - Тег тела дополнен директивой ngController ->

<body ng-controller="GeekController">

<center>

<h1>GeeksforGeeks</h1>

<h4>Angular Static Template</h4>

<br>

Input Value is :

<input ng-model="geek" value="Your Value Here">

<button ng-click="gfg()">Button</button>

<script src="angular.js"></script>

</center>

</body>

</html>

Выход:

Динамические шаблоны. Как следует из названия, динамические шаблоны используются для работы со средами выполнения. Он компилируется и обрабатывается Angular по требованию пользователя. Динамический шаблон можно отобразить с помощью директивы ng-include . Например:

<div ng-include=”‘templates/geeksforgeeks.html’”></div>

Пример :

<html>

<head>

<script src=

"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

</script>

<script src=

"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js">

</script>

<style>

h1{

color:green;

}

</style>

</head>

<body>

<center>

<h1>GeeksforGeeks</h1>

<h4>Angular Dynamic Template</h4>

<br>

<div ng-app="gfg">

<p><a href="#addCourse">Add Course</a></p>

<p><a href="#viewCourses">View Courses</a></p>

<div ng-view></div>

<script type="text/ng-template" id="addCourse.htm">

<h2> Add Course </h2> {{message}}

</script>

<script type="text/ng-template" id="viewCourses.htm">

<h2> View Courses </h2> {{message}}

</script>

</div>

</center>

<script>

var gfg = angular.module("gfg", ['ngRoute']);

gfg.config(['$routeProvider', function($routeProvider) {

$routeProvider

.when('/addCourse', {

templateUrl: 'addCourse.htm',

controller: 'AddCourseController'

})

.when('/viewCourses', {

templateUrl: 'viewCourses.htm',

controller: 'ViewCoursesController'

})

.otherwise({

redirectTo: '/addCourse'

});

}]);

gfg.controller('AddCourseController', function($scope) {

$scope.message =

"This page will be used to display add Course";

});

gfg.controller('ViewCoursesController', function($scope) {

$scope.message =

"This page will be used to display all the Courses";

});

</script>

</body>

</html>

Выход: