Error : Access to restricted URI denied

**francky74** · 25/12/2016, 19h46

Bonjour,

Je suis en train de m'exercer à développer avec angular-route et, pour ce faire, je n'utilise pas de serveur, mais simplement le navigateur pour lire mes fichier .html dans lesquels j'ai paramétré le différents css et javascripts.

Je rencontre l'erreur suivante que je ne comprend pas et qui me bloque :

Error : Access to restricted URI denied

Voici mon code html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Acceuil</title>
	<!-- load bootstrap and fontawesome via CDN -->
	<link rel="stylesheet" href="../css/vendor/icofont/css/icofont.css" />
	<link rel="stylesheet" href="../css/vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
 
	<script src="../js/vendor/angular.min.1.5.9.js"></script>
    <script src="../js/vendor/angular-route.js"></script>
    <script src="../js/script.js"></script>
 
<script src="https://use.fontawesome.com/f9c3e6c8db.js"></script>
 
</head>
<body ng-controller="mainController">
	<!-- HEADER AND NAVBAR -->
	<header>
		<nav class="navbar navbar-default">
			<div class="container">
				<div class="navbar-header">
					<a class="navbar-brand" href="/">Angular routing example</a>
				</div>
 
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#"><i class="fa fa-home"></i> Home </a></li>
					<li><a href="#about"><i class="fa fa-shield"></i> About </a></li>
					<li><a href="#users"><i class="fa fa-users"></i> Users </a></li>
					<li><a href="#contact"><i class="fa fa-comment"></i> Contact </a></li>
				</ul>
			</div>
		</nav>
	</header>
 
	<!-- MAIN CONTENT AND INJECTED VIEWS -->
	<div class="col-md-1"></div>
	<div id="main" class="col-md-10">
		<div ng-view></div>
	</div>
	<div class="col-md-1"></div>
</body>
</html>

Voici mon code javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/**
 * 
 */
 
var myApp = angular.module("myApp", ["ngRoute"]);
 
myApp.config(function($routeProvider) {
	$routeProvider
 
	// route for the home page
	.when('/', {
		templateUrl : '/vues/home.html',
		controller : 'mainController'
	})
 
	// route for the about page
	.when('/about', {
		templateUrl : '/vues/about.html',
		controller : 'aboutController'
	})
 
	// route for the contact page
	.when('/contact', {
		templateUrl : '/vues/contact.html',
		controller : 'contactController'
	})
 
	// route for the contact page
	.when('/users', {
		templateUrl : '/vues/users.html',
		controller : 'usersController'
	});		
 
});
 
myApp.controller('mainController', function($scope) {
	console.log("mainController");
	$scope.message = 'Bonjour !';
});
 
myApp.controller('aboutController', function($scope, $http) {
	console.log("aboutController");
	$scope.messageList = [];
	/*$http.get('gestMessage').then(function(response) {
		console.log("response : " + response.data.messageList);
		$scope.messageList = response.data.messageList;
	});*/
});
 
myApp.controller('usersController', function($scope, $http) {
	console.log("usersController");
	$scope.users = [];
	/*$http.get('gestUsers').then(function(response) {
		console.log("response : " + response.data.users);
		$scope.users = response.data.users;
	});*/
});
 
myApp.controller('contactController', function($scope) {
	console.log("contact controller");
	$scope.message = 'Contact page';
});

et voici une page html nommée users.html qui devrait normalement afficher un titre :

**francky74** · 25/12/2016, 20h12

Bonjour,

Ca fonctionne !
Par contre j'ai codé trop de trucs différents pour pouvoir dire qu'est-ce qui a permit de faire partir l'erreur. Je pense malgré tout que les 2 points que j'ai mis avant les adresses url dans routeProvider y sont pour quelque chose !

Je met le nouveau code.

acceuil.html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Acceuil</title>
	<!-- load bootstrap and fontawesome via CDN -->
	<link rel="stylesheet" href="../css/vendor/icofont/css/icofont.css" />
	<link rel="stylesheet" href="../css/vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
 
	<script src="../js/vendor/angular.min.1.5.9.js"></script>
    <script src="../js/vendor/angular-route.js"></script>
    <script src="../js/script.js"></script>
 
<script src="https://use.fontawesome.com/f9c3e6c8db.js"></script>
 
</head>
<body ng-controller="mainController" style="background:#01ad5c">
	<!-- HEADER AND NAVBAR -->
	<header>
		<nav class="navbar navbar-default">
			<div class="container">
				<div class="navbar-header">
					<a class="navbar-brand" href="/">Angular routing example</a>
				</div>
 
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#"><i class="fa fa-home"></i> Home </a></li>
					<li><a href="#/about"><i class="fa fa-shield"></i> About </a></li>
					<li><a href="#/users"><i class="fa fa-users"></i> Users </a></li>
					<li><a href="#/contact"><i class="fa fa-comment"></i> Contact </a></li>
				</ul>
			</div>
		</nav>
	</header>
 
	<!-- MAIN CONTENT AND INJECTED VIEWS -->
	<div class="col-md-1"></div>
	<div id="main" class="col-md-10">
		<div ng-view></div>
	</div>
	<div class="col-md-1"></div>
</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/**
 * 
 */
 
var myApp = angular.module("myApp", ["ngRoute"]);
 
myApp.config(function($routeProvider) {
	$routeProvider
 
	// route for the home page
	.when('/', {
		templateUrl : '../vues/home.html',
		controller : 'mainController'
	})
 
	// route for the about page
	.when('/about', {
		templateUrl : '../vues/about.html',
		controller : 'aboutController'
	})
 
	// route for the contact page
	.when('/contact', {
		templateUrl : '../vues/contact.html',
		controller : 'contactController'
	})
 
	// route for the contact page
	.when('/users', {
		templateUrl : '../vues/users.html',
		controller : 'usersController'
	});		
 
});
 
myApp.controller('mainController', function($scope) {
	console.log("mainController");
	$scope.message = 'Bonjour !';
});
 
myApp.controller('aboutController', function($scope, $http) {
	console.log("aboutController");
	$scope.messageList = [];
	$http.get('gestMessage').then(function(response) {
		console.log("response : " + response.data.messageList);
		$scope.messageList = response.data.messageList;
	});
});
 
myApp.controller('usersController', function($scope, $http) {
	console.log("usersController");
	$scope.users = [];
	$http.get('gestUsers').then(function(response) {
		console.log("response : " + response.data.users);
		$scope.users = response.data.users;
	});
});
 
myApp.controller('contactController', function($scope) {
	console.log("contact controller");
	$scope.message = 'Contact page';
});

users.html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div>
	<h1>User's page</h1>
	<table class="table table-stripped" ng-controller="usersController">
		<thead>
			<tr>
				<td>Name</td>
				<td>Email</td>
				<td>Country</td>
				<td>Language</td>
				<td>Password</td>
				<td>RegId</td>
				<td>Actions</td>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="user in users">
				<td>{{user.name}}</td>
				<td>{{user.email}}</td>
				<td>{{user.country}}</td>
				<td>{{user.language}}</td>
				<td>{{user.password}}</td>
				<td>{{user.regId}}</td>
				<td>
					<button class="btn btn-default"
						ng-click="modif_user()">Modify</button>
					<button class="btn btn-danger"
						ng-click="suppr_user()">Suppr</button>
				</td>
			</tr>
		</tbody>
	</table>*/
</div>

Invité · 25/12/2016, 21h50

Squelette d’une application Mvc AngularJs avec Routing de Vue

(Sans arborescence):

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html ng-app="monApp">
  <head>
   <meta charset="utf8" >
    <title>Squelette de base d application MVC Angular</title>
        <!-- CHARGEMENT DES LIBRAIRIES -->
        <!-- APPEL LIB ANGULAR -->
        <script type="text/javascript" src="angular-1.3.13/angular.min.js"></script>
        <script src="angular-route.min.js"></script>
        <script src="librairies/angular-locale_fr-fr.js"></script>
         <!-- CSS DE L APPLICATION -->
        <link href="app10.css" media="screen" rel="stylesheet" type="text/css" />
        <script>
 
        <!-- Déclaration des modules utilisés par l application MVC Angular, ngRoute est obligatoire pour router les vues : Les modules sont spécifiés entre Crochets, on en trouve des centaines sur internet, ils extendent les capacités d Angular, ce sont des librairies -->
         var monApp = angular.module('monApp',['ngRoute'])
 
        <!-- Configuration des vues et de leurs controleurs affiliés, avec ng-route . Note : Les vues peuvent partager le même controleur-->
        .config(function ($routeProvider, $locationProvider){
          $routeProvider
            .when('/accueil', {
              templateUrl: 'defaut.html',
              controller: 'accueilCtrl'
            })
            .when('/liste', {
              templateUrl: 'liste.html',
              controller: 'listeCtrl'
            })
            .when('/detail', {
              templateUrl: 'detail.html',
              controller: 'editDetailsCtrl'
            })
            .when('/statistiques', {
              templateUrl: 'stats.html',
              controller: 'stats'
            })
            .otherwise({redirectTo: '/accueil'});
        })
 
        <!-- Ci-dessous, les différents controleurs qui opèrent sur les vues, ils peuvent partager le modèle de data à l'aide d'une factory, à ce moment là, il faut inclure la factory dans les options du controleur.. Généralement, les controleurs sont dans un répertoire séparé appellé "controllers" pour être à la norma bower Grunt -->
 
        <!-- LE CONTROLEUR DE L ACCUEIL -->
        .controller("accueilCtrl", function($scope) {
            $scope.bonjour = "Mr Durand";
        <!-- FIN DU CONTROLEUR -->
        })
 
        <!-- LE CONTROLEUR DE LA LISTE -->
        .controller("listeCtrl", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })
 
        <!-- LE CONTROLEUR D UN OBJET A EDITER -->
        .controller("editDetailsCtrl", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })
 
        <!-- LE CONTROLEUR DES STATISTIQUES -->
        .controller("stats", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })
 
    </script>
 </head>
 
 <!-- La page HTML générale -->
<body ng-controller="accueilCtrl" >
 
    <!-- Le menu, qui appelle,grâce à HREF, les différentes vues HTML situées plus bas, puis les affiche dans la balise ng-view -->
    <div class="container ">
        <div class="menu designDiv">
            <a href="#/accueil" class="">Accueil</a>
            <a href="#/liste" class="">Liste  </a>
            <a href="#/detail" class="">Details</a>
            <a href="#/statistiques" class="">Stats</a>
        </div>
        <!-- Cette balise NG-View va afficher les différentes vues -->
        <div id="main" class="designDiv">
            <div ng-view></div>
        </div>
    </div>
</body>
 
<!-- Voici maintenant la liste des vues qui s affichent dans la balise ng-view(voir plus haut), qui doivent généralement être dans un fichier séparé, normalement dans un réperoire "views", pour être à la norme BOWER -->
<!-- VUE HTML : DEFAUT-->
    <script type="text/ng-template" id="defaut.html">
        Bonjour {{bonjour}} je suis la vue de l accueil.
    </script>
 
<!-- VUE HTML : LISTE -->
    <script type="text/ng-template" id="liste.html">
        Bonjour, je suis la vue qui présente une liste d objets.
    </script>
 
<!-- VUE HTML : LISTE -->
    <script type="text/ng-template" id="detail.html">
        Bonjour, je suis la vue qui présente le detail d un objet.
    </script> 
 
<!-- VUE HTML : STATS -->
    <script type="text/ng-template" id="stats.html">
        Bonjour, je suis la vue qui présente des statistiques.
    </script>

Error : Access to restricted URI denied

AngularJS

Discussions similaires

Partager

Partager