I have a controller defined in script.js called HelloController which was working before i added the ngRoute and made to route. The error that shows is
Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.9/$controller/ctrlreg?p0=HelloController
I have checked the documentations about this error, but i couldn't get what is the problem actually with the code. the following is the code
script.js
// Code goes herE
(function(){
angular.module('myapp',[])
.controller(['$scope','$http',
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;
}
})
});
}
}
]);
})();
configuaration.js
angular.module('myapp',['ngRoute'])
.config(['$routeProvider',function configu($routeProvider) {
// $urlRouterProvider.otherwise("/view1");
console.log("HERE")
$routeProvider.when('/',{
templateUrl:'view1.html',
controller:"HelloController"
});
}
]);
index file header is as follows
<head>
<link rel="stylesheet"
href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<link rel = "stylesheet"
href =
"https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-
material.min.css">
<script src =
"https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-
material.min.js"></script>
<!-- <script src="bower_components/angular-ui-router/release/angular-
ui-router.min.js"></script> -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-
route.min.js.map"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-
route.js">
</script>
<script src="script.js"></script>
<script src="configuration.js"></script>
</head>
would be nice if someone could help because i'm new to angular
The error http://errors.angularjs.org/1.6.9/$controller/ctrlreg?p0=HelloController is because the order of load the files in your index.html is incorrect. I'll mention this in my full explanation...
Have so many things that i'll must do. Some things is required in order to work, and another is my personal recommendation. Follow:
Required Things:
You must use ng-app inside your index.html to define where will render the content of your $scope. Your code doesn't had this tag;
To use 'ngRoute' you must add the element ng-view inside your index.html. Is in it that when will be render the 'templateUrl' which you define in your routes. According you change your uri, the ng-route will render the templates inside it. The usual is put this inside your body inside a div tag. i.g.: <div ng-view></div>;
angular.module('app'), but this call can't be equal in the main call that is done to our configuration.js (angular.module('app', ['ngRoute']);). You doesn't use block quotes after 'app', because this represent that you are declaring again the app; To use 'ngRoute' you must use <base href="/"/>. This tag will define how will be you initial URI value to your routes. Usual this value is defined to href match the first routes; https://docs.angularjs.org/error/$location/nobase
Inside your index.html you are loading firstly the script.js, where is defined the controller and after your are loading the configuration.js, where is declared the ng-app. The main file in your AngularApp. To load this resource, you need pay attention in the order of the load. With time you will be able to recognize this in your first look, but for while save this order to load your resources inside index.html;
1° - Dependencies (angular, angular-route, jQuery, etc);
2° - The file where is defined the angular.module('myApp',[]). In your case, the configuration.js;
3° - Controllers, Services, Configuration, Filters, Modules, etc;
configu(function()...;Recommendation for your app AngularJS:
<!-- 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>
Use var app = angular.module("myapp");
app.$inject = ['$scope', '$http'];
app.controller('HelloController', function HelloController(...
instead angular.module('myapp', ['$scope', '$http']).controller(...';
Use service to make request. The angular have the services. The recommendation is use $http in this component https://docs.angularjs.org/api/ng/service;
This is implementaion work as a charm :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;
}
})
});
};
});
})();