Routing in angularjs

Home » Tutorials » JavaScript » Routing in angularjs
In this lesson we will finish to learn angular basics. Today we will consider routing.
Routing in angular lets your to create “effect multi-page app” in single page web app.
For providing routing in your app you need to include angular-route module.. Don’t forget add it to dependency while app init. Also in view you need to add element with ng-view directive. Views will be rendered inside this directive bases on some conditions.
What are the conditions? I talk about routes, which will be available in your app after routes settings. For this purpose angular provides $routeProvider object, which has different properties and methods.
We will consider two important methods:
.when(url, object) – first parameter is url, second parameter is route object. In our tuts we add two properties: view template and controller (this parameter is not required).
.otherwise(url) – it shows default view (if routeProvider hasn’t route among the described).
In players list view I added link with format

{{player.name}}

.
I notice, view is single html code fragments.

Code lesson (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>

Code lesson (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>

Code lesson (neymar.html)

<h1>Неймар</h1>
<p>{{info}}</p>

Code lesson (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 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

Pin It on Pinterest

Share This