Маршрутизация в Angularjs

Главная » Видеоуроки » JavaScript » Маршрутизация в Angularjs
В этому уроке мы закончим изучение базовых принципов фреймворка angular. Сегодня мы разберем маршрутизацию.
Маршрутизация в angular позволяет создавать «эффект многостраничного приложения» в single page angular приложениях.
Для органзации маршрутизации вам нужно подключить модуль angular-route.js. Не забудьте добавить его в заивисомости при инициализации приложения.
Также в представлении вам нужно добавить элемент с директивой ng-view, внутри которой будут отрисовываться представления, исходя из условий.
О каких условиях идет речь? Речь идет о маршрутах, которые будут доступны в приложении после их конфигурации. Для конфигурации angular предоставляет объект $routeProvder, у которого есть различные свойства и и методы.
Мы рассмотрим самые важные из них:
.when(url, object) — первым параметром является сам урл, вторым объект. В примере у этих объектов мы отмечаем два свойства — адрес шаблона представления и контроллер (этот параметр необязателен).
.otherwise(url) — представление по умолчанию (если маршрута нет среди описанных в объекте $routeProvider, будет показано отображение по умолчанию).
В представлении списка игроков я добавил ссылку формата

{{player.name}}

.
Замечу еще раз, что представления — это обычные фрагменты html кода.

Код урока (index.html)
<!DOCTYPE html>
<html ng-app="playersApp">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <style>
            /*input.ng-invalid-required {
                border: 1px solid red;
            }*/
        </style>
    </head>
    <body>

        <div class="container" ng-controller="playerCtrl">
            <div ng-view></div>
        </div>


        <script src="angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
        <script>
            var app = angular.module("playersApp", ["ngRoute"]);

            app.config(function($routeProvider){
                $routeProvider.when(
                    "/neymar",
                    {
                        templateUrl: "neymar.html",
                        controller: "NeymarController"
                    }
                )
                .when(
                    "/mbappe",
                    {
                        templateUrl: "mbappe.html",
                        controller: "MbappeController"
                    }
                )
                .otherwise(
                    {templateUrl: "form.html"}
                )
            });

            var model = [];


            app.controller("playerCtrl", function($scope, $http){
                $scope.players = model;
                $scope.orderByFunction = function(player){
                    return parseInt(player.goals);
                };
                $scope.addPlayer = function(playerName, playerTeam, playerCountry, playerGoals) {
                    $scope.players.push({name: playerName, team: playerTeam, country: playerCountry, goals: playerGoals});
                };

                $scope.sortByName = function(p) {
                    $scope.nameSorting = p;
                };

                $http.get("players.json").then(
                    function successResp(response) {
                        $scope.players = response.data.players;
                        console.log($scope.players);
                    }
                )

            });

            app.controller("NeymarController", function($scope){
                $scope.info = "Вы находитесь на странице Неймара";
            })

        </script>

    </body>
</html>
Код урока (form.html)
<div class="row">
    <div class="col-md-12">
        <form class="form-horizontal" name="addPlayerForm" novalidate>
            <legend>Список футболистов</legend>
              <div class="form-group" ng-class="{'has-error': addPlayerForm.pName.$error.required && addPlayerForm.pName.$dirty}">
                <label for="playerName" class="col-sm-4 control-label">Имя игрока</label>
                <div class="col-sm-8">
                  <input type="text" required name="pName" ng-model="playerName" class="form-control" id="playerName" placeholder="Имя игрока">
                  <span class="error" ng-show="addPlayerForm.pName.$dirty && addPlayerForm.pName.$error.required">Введите имя игрока!</span>
                </div>
              </div>
              <div class="form-group">
                <label for="playerTeam" class="col-sm-4 control-label">В какой команде играет</label>
                <div class="col-sm-8">
                  <input type="text" name="pTeam" ng-model="playerTeam" class="form-control" id="playerTeam" placeholder="В какой команде играет">
                </div>
              </div>
              <div class="form-group" ng-class="{'has-error': addPlayerForm.pCountry.$error.required && addPlayerForm.pCountry.$dirty}">
                <label for="playerCountry" class="col-sm-4 control-label">Гражданство</label>
                <div class="col-sm-8">
                    <input type="text" required name="pCountry" ng-model="playerCountry" class="form-control" id="playerCountry" placeholder="Гражданство">
                    <span class="error" ng-show="addPlayerForm.pCountry.$dirty && addPlayerForm.pCountry.$error.required">Игрок не может быть без гражданства!</span>
                </div>
              </div>
              <div class="form-group">
                <label for="playerGoals" class="col-sm-4 control-label">Сколько голов забил</label>
                <div class="col-sm-8">
                  <input type="text" name="pGoals" ng-model="playerGoals" class="form-control" id="playerGoals" placeholder="Сколько голов забил">
                </div>
              </div>
              <div class="form-group">
                  <div class="col-sm-8 col-sm-offset-4">
                      <button ng-disabled="addPlayerForm.pName.$invalid || addPlayerForm.pCountry.$invalid" ng-click="addPlayer(playerName, playerTeam, playerCountry, playerGoals)" class="btn btn-default">Добавить</button>
                  </div>
              </div>
        </form>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <input type="text" name="pSelect" ng-model="selectPlayers" class="form-control">
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th ng-click="sortByName('name')">Игрок</th>
                    <th>Команда</th>
                    <th>Национальность</th>
                    <th>Сколько голов забил</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="player in players | filter:selectPlayers">
                    <td><a href="#/{{player.id}}" style="display:block;">{{player.name}}</a></td>
                    <td>{{player.team}}</td>
                    <td>{{player.country}}</td>
                    <td>{{player.goals}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
Код урока (neymar.html)
<h1>Неймар</h1>
<p>{{info}}</p>
Код урока (players.json)
{
    "players":
    [
            {
                "id": "neymar",
                "name": "Неймар",
                "team": "ПСЖ",
                "country": "Бразилия",
                "goals": 12
            },

            {
                "id": "mbappe",
                "name": "Килиан Мбаппе",
                "team": "ПСЖ",
                "country": "Франция",
                "goals": 7
            },

            {
                "id": "messi",
                "name": "Лионель Месси",
                "team": "Барселона",
                "country": "Аргентина",
                "goals": 11
            },

            {
                "id": "ronaldo",
                "name": "Криштиану Роналду",
                "team": "Реал Мадрид",
                "country": "Португалия",
                "goals": 14
            },

            {
                "id": "suarez",
                "name": "Луис Суарес",
                "team": "Барселона",
                "country": "Уругвай",
                "goals": 8
            }
    ]
}

0 Комментариев

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This