Ошибка http://errors.angularjs.org/1.6.9/$controller/ctrlreg?p0=HelloController из-за неправильного порядка загрузки файлов в ваш index.html.Я упомяну это в своем полном объяснении ...
Есть так много вещей, которые я должен сделать.Некоторые вещи необходимы для того, чтобы работать, а другая - моя личная рекомендация.Следуйте:
Необходимые вещи:
Вы должны использовать ng-app внутри вашего index.html, чтобы определить, где будет отображаться содержимое вашего $объем.Ваш код не имеет этого тега;
Чтобы использовать 'ngRoute', вы должны добавить элемент ng-view в ваш index.html.Есть в нем то, когда будет рендерит 'templateUrl', который вы определяете в ваших маршрутах.Если вы измените свой URI, ng-route будет отображать шаблоны внутри него.Обычно это помещается внутри вашего тела внутри тега div.ig: <div ng-view></div>;
- Когда вы объявите контроллер, вы должны сделать вызов
angular.module('app'), но этот вызов не может быть равен основному вызову, который выполняется для нашей конфигурации.JS (angular.module('app', ['ngRoute']);).Вы не используете блочные кавычки после «app», потому что это означает, что вы снова объявляете приложение; Чтобы использовать 'ngRoute', вы должны использовать <base href="/"/>.Этот тег будет определять, каким будет ваше начальное значение URI для ваших маршрутов.Обычно это значение определяется как href совпадение с первыми маршрутами;https://docs.angularjs.org/error/$location/nobase
Внутри вашего index.html вы загружаете сначала скрипт.js, где определяется контроллер, а после загрузки - файл configuration.js, где объявляется ng-приложение.Основной файл в вашем AngularApp.Чтобы загрузить этот ресурс, нужно обратить внимание на порядок загрузки.Со временем вы сможете распознать это на первый взгляд, но пока сохраните этот порядок, чтобы загрузить свои ресурсы в index.html;
1 ° - Зависимости (angular, angular-route, jQuery и т. Д.);
2 ° - Файл, в котором определен angular.module('myApp',[]).В вашем случае, configuration.js;
3 ° - Контроллеры, Сервисы, Конфигурация, Фильтры, Модули и т.д .;
- Внутри вашей конфигурации есть синтаксическая ошибка:
configu(function()...;
Рекомендация для вашего приложения AngularJS:
- Используйте комментарии внутри вашего index.html, чтобы определить, где находится область загрузки для каждого файла.Пример:
<!-- Dependencies files -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script> `` <!-- App, Routes-->
<script src="configuration.js"></script>
<script src="script.js"></script>
<!-- Controllers -->
<script src="example.controller.js"></script>
<!-- Services -->
<script src="example.services.js"></script>
- Я предпочитаю объявлять свои маршруты в другом файле, но этовозможно в том же файле, который объявлен как app.main;
- Не объявляйте контроллеры, службы, маршруты и т. д., используя вложенные коды.Например, в вашем файле configuration.js:
Используйте var app = angular.module("myapp");
app.$inject = ['$scope', '$http'];
app.controller('HelloController', function HelloController(...
вместо
angular.module('myapp', ['$scope', '$http']).controller(...';
Воспользуйтесь услугой, чтобы сделать запрос.Угловой сервис.Рекомендуется использовать $ http в этом компоненте https://docs.angularjs.org/api/ng/service;
Это реализация работы в качестве очарования: D: index.html
`
<html ng-app="myapp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="configuration.js"></script>
<script src="script.js"></script>
</head>
<body>
<base href="/" />
<div ng-view></div>
</body>
</html>
`
configuration.js
angular.module('myapp', ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/view1.html',
controller: 'HelloController'
})
.otherwise({ redirectTo: '/' });
});
script.js
(function () {
var app = angular.module('myapp');
app.$inject = ['$scope', '$http'];
app.controller('HelloController', function HelloController($scope, $http) {
$scope.helloTo = "angular";
$scope.hide = true;
$scope.search = (NameToSearch) => {
$http.get("https://api.github.com/users/" + NameToSearch).then((response) => {
console.log(response);
$scope.data = response.data;
console.log($scope.data.repos_url);
$http.get($scope.data.repos_url).then((resp) => {
//console.log(resp);
$scope.repos = resp.data;
if (resp.data) {
console.log("hide scope")
$scope.hide = false;
}
console.log(resp);
}).then(() => {
if ($scope.repos) {
$scope.hide = false;
}
})
});
};
});
})();