Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:angularjs:angularjs_ngview

< AngularJS

AngularJS ngView

Példa

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

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="http://code.angularjs.org/1.4.8/angular.min.js"></script>
<script src="http://code.angularjs.org/1.4.8/angular-route.min.js"></script>
<script src="js/services/routes.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>
egy.html
<p>
Első template oldal<br>
{{msg}}
</p>
ketto.html
<p>
Második template oldal<br>
{{msg}}
</p>
main.html
<p>
Főoldal<br>
{{msg}}
</p>
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";	
})
;
oktatas/web/angularjs/angularjs_ngview.txt · Utolsó módosítás: 2019/08/22 20:26 szerkesztette: admin