AngularJS: директива ng-view не работает - PullRequest
Новая
       27

AngularJS: директива ng-view не работает

0 голосов
/ 27 июня 2018

Я изучаю AngularJS прямо сейчас, и я делаю простое веб-приложение, которое использует директиву ng-view. Но когда я пытаюсь запустить свои коды, в моем браузере Chrome ничего не появляется, как будто ng-view на самом деле не работает. Мой файл index.html показан ниже: 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Route Sample</title>
	<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
	<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
	<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body ng-app="routeApp">
	<h1>Sample Routing | ng-view directive</h1>

	<div class="container">
		<ul>
			<li><a href="#Angular">Angular JS Topics</a></li>
			<li><a href="#Node">Node JS Topics</a></li>
		</ul>
	</div>
	<div class="container-ngView">
		<div ng-view></div>
	</div>

	<script>
		var app=angular.module('routeApp', ['ngRoute']);
		app.config(['$routeProvider', function($routeProvider){
			$routeProvider
			.when('/Angular', {
				templateUrl: 'angular.html',
				controller: 'AngularCtrl',
			})
			.when('/Node', {
				templateUrl: 'node.html',
				controller: 'NodeCtrl',
			});
		}]);

		app.controller('AngularCtrl', function($scope){
			$scope.tutorial = [
			{Name:"Controllers", Description :"Controllers in action"},
            {Name:"Models", Description :"Models and binding data"},
            {Name:"Directives", Description :"Flexibility of Directives"}
			]
		});
		app.controller('NodeCtrl', function($scope){
			$scope.tutorial = [
			{Name:"Promises", Description :"Power of Promises"},
            {Name:"Event", Description :"Event of Node.js"},
            {Name:"Modules", Description :"Modules in Node.js"}
			]
		});
	</script>


</body>
</html>

А это мой файл angular.html 

<h2>Anguler</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

А это мой файл node.html 

<h2>Node</h2>
<ul ng-repeat="ptutor in tutorial">
    <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

Я пытался отделить файл js-скрипта от основного html-файла, но результат остался прежним. Я не знаю, что делать и где найти проблему. Я надеюсь, что вы могли бы помочь мне с этим. Спасибо!

Ответы [ 3 ]

0 голосов
/ 27 июня 2018

Вам необходимо сослаться на скрипт модуля ngRoute после AngularJS. Просто поменяйте их местами.

Кроме того, вы используете AngularJS 1.6.X, который имеет различный хэш-бэнг в URL. Вам нужно изменить href с # на #!.

Вот рабочий пример: 

var app = angular.module('routeApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/Angular', {
      templateUrl: 'angular.html',
      controller: 'AngularCtrl',
    })
    .when('/Node', {
      templateUrl: 'node.html',
      controller: 'NodeCtrl',
    });
}]);

app.controller('AngularCtrl', function($scope) {
  $scope.tutorial = [{
      Name: "Controllers",
      Description: "Controllers in action"
    },
    {
      Name: "Models",
      Description: "Models and binding data"
    },
    {
      Name: "Directives",
      Description: "Flexibility of Directives"
    }
  ]
});
app.controller('NodeCtrl', function($scope) {
  $scope.tutorial = [{
      Name: "Promises",
      Description: "Power of Promises"
    },
    {
      Name: "Event",
      Description: "Event of Node.js"
    },
    {
      Name: "Modules",
      Description: "Modules in Node.js"
    }
  ]
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Route Sample</title>
  <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
</head>

<body ng-app="routeApp">
  <h1>Sample Routing | ng-view directive</h1>

  <div class="container">
    <ul>
      <li><a href="#!Angular">Angular JS Topics</a></li>
      <li><a href="#!Node">Node JS Topics</a></li>
    </ul>
  </div>
  <div class="container-ngView">
    <div ng-view></div>
  </div>

  <script type="text/ng-template" id="angular.html">
    <h2>Angular</h2>
    <ul ng-repeat="ptutor in tutorial">
      <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
    </ul>
    <a href="#!/">Back</a>
  </script>

  <script type="text/ng-template" id="node.html">
    <h2>Node</h2>
    <ul ng-repeat="ptutor in tutorial">
      <li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
    </ul>
    <a href="#!/">Back</a>
  </script>

</body>

</html>
0 голосов
/ 27 июня 2018

Используйте npm (менеджер пакетов узлов) в sublime для установки пакета http-sever. Затем вы можете запустить веб-сервер, который будет запускать ваше приложение

npm install -g http-server

Следующая конфигурация в файле package.json под скриптами: 

"start": "http-server -a localhost -p 8000 -c-1"

Затем запустите следующую команду из корня вашего проекта: 

Command : npm start (from root of project)
0 голосов
/ 27 июня 2018

Вам нужно вызвать ссылку на угловой маршрут после загрузки, измените порядок ссылок на 

<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>

EDIT

Должна быть проблема со ссылками. Проверьте следующее, 

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-
route.js"></script>

DEMO

EDIT:

Мы смогли решить проблему с помощью чата, решение состояло в том, чтобы очистить кэш и запустить приложение через xampp, поскольку оно не может загружать шаблоны при доступе через браузер

...