Рубрики

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

Шаблоны в 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>

    Выход:

    • При нажатии Добавить курс:
    • При нажатии Просмотр курсов:
  • Рекомендуемые посты:

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

    0.00 (0%) 0 votes