AngularJS ngView

Szerző: Sallai András
Copyright © Sallai András, 2013, 2014, 2015, 2017, 2021
Licenc: GNU Free Documentation License 1.3
Web: https://szit.hu

Példa

Projekt01/
 `-htdocs/
    |-css/
    |  `-style.css
    |-js/
    |  `-app.js
    |-templates/
    |  |-egy.html
    |  |-ketto.html
    |  `-main.html
    `--index.html

Az 1.4.8-s angular változatban még href="#egy" formában kellett írni.

index.html

<!DOCTYPE html>
<html ng-app="egyApp">
<head>
<meta charset="utf-8">
<title>route gyakorlat</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://code.angularjs.org/1.8.2/angular.js"></script>
<script src="https://code.angularjs.org/1.8.2/angular-route.js"></script>
<script src="js/app.js"></script>
 
</head>
<body>
 
<h1>Route gyakorlat</h1>
<div id="menu">
	<ul>
		<li><a href="#!/">Főoldal</a></li>
		<li><a href="#!/egy">Egy</a></li>
		<li><a href="#!/ketto">Kettő</a></li>
	</ul>
</div>
 
<div ng-view></div>
 
</body>
</html>

templates/egy.html

<p>
Első template oldal<br>
{{msg}}
</p>

templates/ketto.html

<p>
Második template oldal<br>
{{msg}}
</p>

templates/main.html

<p>
Főoldal<br>
{{msg}}
</p>

js/app.js

angular.module("egyApp",['ngRoute'])
.config(function($routeProvider) {      
	$routeProvider
		.when('/egy', {
			templateUrl: 'templates/egy.html',
			controller: 'egyCtrl'
		})
		.when('/ketto', {
			templateUrl: 'templates/ketto.html',
			controller: 'kettoCtrl'
		})
		.when('/', {
			templateUrl: 'templates/main.html',
			controller: 'mainCtrl'
		})
})
.controller('egyCtrl', function($scope){
	$scope.msg = "Működik";	
})
.controller('kettoCtrl', function($scope){
	$scope.msg = "Ez is működik";	
})
.controller('mainCtrl', function($scope){
	$scope.msg = "A főoldalon a controll működik";	
})
;