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.
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
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