I get this error - Error: $controller:ctrlreg A controller with this name is not registered. All of my scripts are loaded, and I added them all in index.html.
All scripts are loaded
My controller:
(function() {
angular.module("nsoftModule").controller("nsoftController", ["nsoftService", function(nsoftService) {
var self = this;
self.service = nsoftService;
}])
})();
My directive:
(function() {
var weatherMod = angular.module("nsoftModule", []);
weatherMod.directive("nsoftDirective", function() {
return {
templateUrl: "Template/weatherTemplate.html",
controller: "nsoftController as nsoftCtrl"
}
});
})();
My service:
(function() {
var weatherMod = angular.module("nsoftModule", []);
weatherMod.service("nsoftService", ["http", function(http) {
var service = this;
}]);
})();
My module:
(function() {
var weatherMod = angular.module("nsoftModule", []);
})();
My template:
<div class="container">
<div ng-controller="nsoftController">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</div>
My app.js:
(function() {
angular.module("nsoftApp", ["nsoftModule"]);
})();
And my index.html:
<!DOCTYPE html>
<html ng-app="nsoftApp">
<head>
<title>Nsoft App</title>
</head>
<body>
<nsoft-directive></nsoft-directive>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="weatherModule.js"></script>
<script src="Service/weatherService.js"></script>
<script src="Controller/weatherController.js"></script>
<script src="Directive/weatherDirective.js"></script>
<script src="app.js"></script>
</body>
</html>
just remove the global variable because in you are using anonymous self invoking function variable is only limited to one anonymous function. use like his
(function() {
angular.module("nsoftModule").controller("nsoftController", ["nsoftService", function(nsoftService) {
var self = this;
self.service = nsoftService;
}])
})();
(function() {
angular.module("nsoftModule").directive("nsoftDirective", function() {
return {
templateUrl: "Template/weatherTemplate.html",
controller: "nsoftController as nsoftCtrl"
}
});
})();
//change http to $http
(function() {
angular.module("nsoftModule").service("nsoftService", ["$http", function($http) {
var service = this;
}]);
})();
(function() {
angular.module("nsoftModule", []);
})();
since controller assign from the directive no need to declare it in the html also
<div class="container">
<div >
<p>Name : <input type="text" ng-model="nsoftCtrl.name"></p>
<h1>Hello {{nsoftCtrl.name}}</h1>
</div>
(function() {
angular.module("nsoftApp", ["nsoftModule"]);
})();
Related
I have implemented a form with a particular controller and then after it is storing in a scope object and then after I assigned that scope object to a service property to share n number of controllers. After assignment the data to service property I am redirecting to another page where a form is their and it have some fields but I am unable to show the form in the web page.
Example: index.html:
<body ng-app="app" ng-controller="ctrl_1"> ... ..... </body>
main.js:
var app = angular.module("app",[]);
app.service("myService",function(){
this.Details = "";
this.setDetails = function(details){
this.Details = details;
};
this.getDetails = function(){
return this.Details;
} });
app.controller("ctrl_1",function($scope,myService){ after passing the data in service I redirect to index2.html window.location("index2.html"); });
app.controller("ctrl_2",function($scope,myService){ });
index2.html:
<body ng-app="app" controller="ctrl_2"> ..`enter code here` ....enter code here </body>
In this way I define, but I am unable to run the index2.html page.
You need a routing module such as ngRoute or ui.router. They will help you with redirection to other pages. Here is a quick demo for your scenario:
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "index.html"
})
.when("/page2", {
templateUrl: "index2.html"
});
});
app.service("myService", function() {
this.Details = "";
this.setDetails = function(details) {
this.Details = details;
};
this.getDetails = function() {
return this.Details;
}
});
app.controller("ctrl_1", function($scope, myService, $location) {
$scope.redirect = function(path) {
$location.url(path);
}
});
app.controller("ctrl_2", function($scope, myService, $location) {
$scope.redirect = function(path) {
$location.url(path);
}
});
<!DOCTYPE html>
<html ng-app="app">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.js"></script>
<body>
<div ng-view></div>
<script type="text/ng-template" id="index.html">
<div ng-controller="ctrl_1">
Page 1 (index.html)
<br>
<button ng-click="redirect('/page2')">Redirect</button>
</div>
</script>
<script type="text/ng-template" id="index2.html">
<div ng-controller="ctrl_2">
Page 2 (index2.html)
<br>
<button ng-click="redirect('/')">Go back</button>
</div>
</script>
</body>
</html>
Below is my index.html page which has two buttons which links to 2 different views which i intend to show using angular routing.
Below is my
HTML
<!DOCTYPE html>
<html>
<head>
<title>PR_APP</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.js"></script>
<script src="js/main.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="new_pr_app">
<h2>Please select an option</h2><br>
<div ng-controller="view_controller">
<button id="view_details" ng-click="view()">View Details</button>
</div>
<div ng-controller="update_controller">
<button id="update_details" ng-click="update()">Update Details</button>
</div>
<div ng-view>
</div>
</body>
Below is my main.js file which houses both above mentioned controller and logic for angular routing.
main.js
var app = angular.module('new_pr_app', ['ngRoute']);
app.config('$routeProvider','$locationProvider', function($routeProvider,$locationProvider){
$routeProvider.when("/update",
{
templateUrl:"update.html",
controller: "update_controller"
})
.when("/view",
{
templateUrl: "view.html",
controller: "view_controller"
});
});
app.controller("view_controller",function($scope, $location, http_factory){
$scope.view = function(){
$location.path("/view");
}
$scope.result =[];
http_factory.get_request().then(function(response){
$scope.result = response.data;
});
});
app.controller("update_controller",function($scope, $location, http_factory){
$scope.update_details = function(){
$location.path("/update");
}
$scope.names = [];
http_factory.get_request().then(function(response){
$scope.names = response.data;
});
});
I have another file called services.js which has a service factory to get details from a json file using an http get.
My only problem seems to be in the above main.js which gives the error below everytime index.html loads
angular.js:88 Uncaught Error: [$injector:modulerr]
Your config is wrong. You pass in a string as the first (and second argument), while the .config(..) function, expects a function to be passed in (or an array).
In your code, you simply forgot to wrap the arguments in an array. Here's how it should look:
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider){
$routeProvider.when("/update",
{
templateUrl:"update.html",
controller: "update_controller"
})
.when("/view",
{
templateUrl: "view.html",
controller: "view_controller"
});
}]);
Note the [ and ] wrapping the content
You can check with below code.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.js"></script>
<body ng-app="new_pr_app">
<h2>Please select an option</h2><br>
<div ng-controller="view_controller">
<button id="view_details" ng-click="view()">View Details</button>
</div>
<div ng-controller="update_controller">
<button id="update_details" ng-click="update_details()">Update Details</button>
</div>
<div ng-view>
</div>
<script>
var app = angular.module('new_pr_app', ['ngRoute']);
app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider){
$routeProvider.when("/update",
{
template:"update template"
// controller: "update_controller"
})
.when("/view",
{
template: "view template"
// controller: "view_controller"
});
}]);
app.controller("view_controller",function($scope, $location){
$scope.view = function(){
$location.path("/view");
}
});
app.controller("update_controller",function($scope, $location){
$scope.update_details = function(){
$location.path("/update");
}
});
</script>
</body>
</html>
My code:
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="js/components/appComponent.js"></script>
</head>
<body>
<foo callback="$ctrl.myCallback()"></foo>
</body>
</html>
appComponent.js
(function(){
'use strict';
var app = angular.module('myApp',[]);
app.component('foo', {
bindings: {
callback: '&'
},
templateUrl: '/js/components/appComponent.html',
controller: function () {
this.callback=function(){
console.log('Hello!');
}
}
});
})();
appComponent.html
<div ng-click="$ctrl.myCallback()">
Press me!
</div>
Why ng-click does not trigger $ctrl.callback()? Moreover, what callback="$ctrl.myCallback()" is supposed to do? I am afraid I have misunderstood its concept.
How to use window.onload function inside a controller.
window.onload= function() {
console.log("Hi Page loaded")
};
The controller is not applicable for the full page.
I want to execute a function after my controller loads at-least.
You can use ng-init and invoke your necessary function using the same directive
var app = angular.module('DemoApp', [])
app.controller('akuaController', function($scope) {
$scope.load = function() {
alert("Window is loaded");
}
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="DemoApp" ng-controller="akuaController">
<div ng-init="load()">
</div>
</body>
</html>
Changing the example from Angular $window
Your Controller
angular.module('windowExample', [])
.controller('ExampleController', ['$scope', '$window', function($scope, $window) {
$scope.greeting = 'Hello, World!';
$scope.doGreeting = function(greeting) {
// This would be a starting point
$window.onload(greeting);
};
}]);
Your markup
<div ng-controller="ExampleController" ng-init="ExampleController.doGreeting()">
</div>
//inside your controller
$scope.$on('$viewContentLoaded', function() {
// write here
// either methods or variables
});
I am learning AngularJs now a days and stuck in the error and couldn't resolve it for the last two days. First let's look at my code first:
MainPage.html
<!DOCTYPE html>
<html>
<head>
<title>Learn Angular Js - Scott Allen</title>
<meta charset="utf-8" />
</head>
<body ng-app="LearnAngular">
<h1>Git Hub Viwer</h1>
<div ng-view></div>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="App.js"></script>
<script src="MainController.js"></script>
</body>
</html>
App.js
(function () {
var app = angular.module("LearnAngular", ["ngRoute"]);
app.config(function routeConfig($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: function () {
debugger;
return "Main.html";
},
controller: "MainController"
})
.otherwise({ redirectTo: "/mian" });
});
}());
MainController.js
(function () {
var MainController = function ($scope, $interval, $location) {
alert("var MainController = function ($scope, $interval, $location) {};");
var decrementCountdown = function () {
$scope.countdown -= 1;
if ($scope.countdown < 1) {
$scope.search($scope.username);
}
};
var countDownPromise = null;
var startCountdown = function () {
countDownPromise = $interval(decrementCountdown, 1000, $scope.countdown);
};
$scope.search = function (username) {
if (countDownPromise) {
$interval.cancel(countDownPromise);
$scope.countdown = null;
}
// redirect to the url.
};
$scope.username = "angular";
$scope.countdown = 5;
startCountdown();
};
var app = angular.module("LearnAngular");
app.controller("MainController", MainController);
}());
Main.html
<div>
<h1>{{countdown}}</h1>
<form name="searchUser" ng-submit="search(username)">
<input type="search" required placeholder="Enter username to search" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
When I run the application, i see this url:
http://localhost:52108/HomePage.html#/mian
which shows that I successfully redirect to the main route but Main.html is not being shown on the HomePage.html page and browser is not requesting for the Main.html when I examine the network of browser.
Here is the screen shot of my application:
I searched on the internet and tried many solutions but none of them solves my problem. I don't what is wrong with the code. I am developing in VisualStudio
Thanks in advance for your help and time.
You had typo in URL there in otherwise's redirectTo value, it should be /main
.otherwise({ redirectTo: "/main" });