Iam newbie to Angular and express Frameworks.Iam developing a simple server which responds to the given route and show the value of variable which was declared in the controller.But there was an error such as the controller is not defined.Here the controller is stored in client/js/controllers folder for convenience
The code of the entire project is here
index.html
<!DOCTYPE html>
<html ng-app="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<meta name="description" content="">
<meta name ="viewport" content ="width=device-width ,initial-scale =0">
</head>
<body>
<!-- Meetups View -->
<div ng-controller="meetupsController">
<h1>There are {{meetupsCount}} meetups</h1>
<!-- <ul>
<li ng-repeat="meetup in meetups">
{{meetup.name}}
</li>
</ul> -->
<!-- <form ng-submit="createMeetup()">
<input type="text" placeholder="Meetup Name" ng-model="meetupName"></input>
<button type="submit">Add</button>
</form> -->
</div>
<!-- Hello World -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="/js/controllers/meetups-controller.js"></script>
</body>
</html>
meetups-controller.js
function meetupsController ($scope) {
$scope.meetupsCount = 10;
// $scope.meetups = [
// { name : "Meet 1"},
// { name : "Meet 2"},
// { name : "Meet 3"}
// ]
// $scope.createMeetup = function () {
// $scope.meetups.push({ name : $scope.meetupsName});
// $scope.meetupsName = '';
// }
}
main.js
// console.log("Hello from node");
//Express server
var express = require('express');
app = express();
app.get('/' , function(req ,res) {
res.sendFile(__dirname + '/client/views/index.html');
});
app.use('/js',express.static(__dirname +'/client/js'));
app.listen(3000 ,function () {
console.log('Im Listening .... ');
});
The error log is here
angular.js:12520 Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=meetupsController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:6:416
at qb (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:22:131)
at Qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:22:218)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:80:210
at w (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:177)
at D (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:61:30)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:122)
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:122)
You haven't defined an Angular app (ng-app="") and haven't registered your controller in the angular app.
meetups-controller.js (add at the bottom of the file):
var app = angular.module('myApp', []);
app.controller('meetupsController', meetupsController);
index.html (change):
<html ng-app="myApp">
this works in older versions of angular not the new one
change your angular version to
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js" > </script>
or define a module in js file for working with latest angular versions
var app = angular.module('app', []);
app.controller('meetupsController', meetupsController);
function meetupsController ($scope) {
$scope.meetupsCount = 10;
}
in html
<html ng-app="app">
Related
Hi Im trying to write an angular app from scratch. (New to it) Keep getting an error that secondController is not registered. Why?
These are my three files and for some reason it keeps saying "The controller with the name 'secondController' is not registered."
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./angular.js"></script>
<script src="./secondModule.js"></script>
<script src="./app.js"></script>
</head>
<body>
<div ng-controller="appController">
<p>App text : {{myAppText}}</p>
<p>secondControllerModule: {{ secondControllerText }}</p>
</div>
<div ng-controller="secondController">
Second Module : {{secondControllerText}}
</div>
</body>
</html>
app.js
angular.module("myApp", [])
.controller("appController",["$scope", function($scope){
$scope.myAppText = "Hello, I am appController text"
}])
secondModule.js
angular.module("myApp", [])
.controller("secondController",["$scope", function($scope){
$scope.secondControllerText = "Hello, I am seasdfsdfasdfacond Controller Text"
}])
I think as per your code you should take three files
1. Declare angular module in module.js file
var app = angular.module("myApp", []);
Add the first controller appController.js
app.controller("appController",["$scope", function($scope){
$scope.myAppText = "Hello, I am appController text";
}]);
Add second controller file secondController.js
app.controller("secondController",["$scope", function($scope){
$scope.secondControllerText = "Hello, I am seasdfsdfasdfacond Controller Text";
}]);
now put them in this heirarchy
- Add ref of Angular JS
then
1 module.js
2 appController.js
3 secondController.js
First of all, I would like to clarify that this is incorrect:
<div ng-controller="appController">
<p>App text : {{myAppText}}</p>
<p>secondControllerModule: {{ secondControllerText }}</p>// Defined in the wrong ng-controller,
so move it to the correct one.
</div>
The reason you are getting that error is that you're defining the app module twice in your js files. It's rather simple, all you need to do is take off the second parameter in your secondModule.js
angular.module("myApp")// Needs to be like this
.controller("secondController",["$scope", function($scope){
$scope.secondControllerText = "Hello, I am seasdfsdfasdfacond Controller Text"
}])
Then in your app.js file
angular.module("myApp", [])
.controller("appController",["$scope", function($scope){
$scope.myAppText = "Hello, I am appController text"
}])
Then in your HTML file, you need to fix the order of the script
<script src="./angular.js"></script>
<script src="./app.js"></script> // App module must be first because the module is defined here
<script src="./secondModule.js"></script>
im very new to Angular.js and i cant seem to get my expression to display the values from my controller, it just sees it as a string when i view it. i have no idea why. Am i missing something super obvious?, any help would be appreciated.
Im also using node.js just to set up my local server, but i dont believe this is the problem.
var appdemo = angular.module('appdemo', []);
appdemo.controller('ctrl', function($scope) {
$scope.value1 = 1;
$scope.value2 = 2;
$scope.updateValue = function() {
$scope.x = $scope.value1 + ' x ' + $scope.value2 +
" = " (+$scope.value1 + +$scope.value2)
};
});
<!DOCTYPE html>
<html ng-app="appdemo">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>appdemo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div ng-controller="ctrl">
<span>times</span>
<input type="text" ng-model="value1" />
<input type="text" ng-model="value2" />
<button ng-click="updateValue()">total</button> {{x}} {{ value1 }}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script src="main.js"></script>
</body>
</html>
this is my local server not entirely convinced if done it correctly.
const express = require('express')
const app = express()
app.use(express.static("public"))
app.engine("html", require("ejs").renderFile)
app.set("view engine", "html")
app.set("views", "./views")
app.get("/", (req, res) =>{
res.render("index")
})
app.listen(3000, ()=>{
console.log("Running on port 3000...")
})
file structure:
node_mdodules
public
css
views
index.html
main.js
app.js
package-lock.json
package.json
Let assume you have the next folder structure:
-App name
-public
-html
-index.html
-js
-main.js
-style.css
-server.js //Or any other name for your node js server
In your server js you should use the __dirname property:
app.use(express.static(__dirname + '/public'));
Then in your html replace your import script for this:
<script src="/js/main.js"></script>
While I was experimenting with AngularJs and JavaScript, I have tried to call a $scope from an outside JavaScript function, but I got the following Error:
"Uncaught TypeError: Cannot read property 'message' of undefined" .
Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('app', []);
var msg = "new message"
app.controller('ctrl', ['$scope', function ($scope) {
$scope.message = msg;
}]);
function xfunc(){
var data = angular.
element(document.querySelector('[ng-controller="ctrl"]')).
scope().message;
return data
}
if (typeof 'xfunc()' !== 'undefined') {
console.log(xfunc());
}else{
console.log("the type of is : ", + typeof 'xfunc()')
}
</script>
</head>
<body>
<div ng-app="app" ng-controller="ctrl">
{{message}}
</div>
</body>
</html>
I did call xfunc() from console and it works fine with no errors.
Please, does anyone know the cause of the error? And is it possible to do it with just pure Javascript and AngularJS, with no third party library? (if possible of course)
Thanks in advance!
the problem was that the function being called before AngularJs was bootstrapped , so the solution is that i have added :
document.addEventListener("DOMContentLoaded", function(event) {
});
to load "xfunc()" after the "body" is loaded , so here is my final code :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('app', []);
var msg = "new message"
app.controller('ctrl', ['$scope', function ($scope) {
$scope.message = msg;
}]);
function xfunc(){
var data = angular.
element(document.querySelector('[ng-controller="ctrl"]')).
scope().message;
return data
}
document.addEventListener("DOMContentLoaded", function(event) {
if (typeof 'xfunc()' !== 'undefined') {
console.log(xfunc());
}else{
console.log("the type of is : ", + typeof 'xfunc()')
}
});
</script>
</head>
<body>
<div ng-app="app" ng-controller="ctrl">
{{message}}
</div>
</body>
</html>
I have the below code in a html page, running it though I keep getting an error stating that "angular is not defined" I have included angular in the head so i'm not sure why it can't locate it, the url to angular i'm also able to hit directly.
<!DOCTYPE>
<html ng-app="test">
<head>
<title>
<script src="https://code.angularjs.org/1.2.25/angular.js"></script>
</title>
</head>
<body ng-controller="TestController">
<form name="CopyFile" ng-submit="copy(fileId)">
<input type="text" ng-model="fileId"/>
<input type="submit" value="Copy"/>
</form>
<div>{{ message }}</div>
<div>{{ error }}</div>
<script type="text/javascript">
(function () {
var app = angular.module("test", []);
var testController = function ($scope, $http) {
$scope.copy = function (fileId) {
$http.get("http://localhost/test/copy/prod.aspx/ToProd?fileId=" + fileId)
.then(onComplete, onError);
};
var onComplete = function (response) {
$scope.message = response;
};
var onError = function (reason) {
$scope.error = "File could not be copied " + reason;
};
};
app.controller("TestController", ["$scope", "$http"], testController);
} ());
</script>
</body>
</html>
This may not be the cause but you don't want your angular include inside of your title. It should be something more like this:
<!DOCTYPE>
<html ng-app="test">
<head>
<title>My Page</title>
<script src="https://code.angularjs.org/1.2.25/angular.js"></script>
</head>
.....
You gave <script> inside <title>?
<title>
<script src="https://code.angularjs.org/1.2.25/angular.js"></script>
</title>
Please remove it outside.
Below Is the code that Im getting problem with:
//Main Codes for the Diary App
(function () {
//Create a new diary app
var diary = angular.module('diary', ['ngRoute']);
//Define a Router for the App
diary.config(function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/wall.php',
controller: 'DiaryWallController'
}).
when('/images', {
templateUrl: 'partials/images.html',
controller: 'DiaryImagesController'
}).
when('/audio', {
templateUrl: 'partials/audio.html',
controller: 'DiaryAudioController'
}).
otherwise({
redirectTo: '/'
});
});
//Define Controllers
diary.controller('DiaryWallController', function($scope) {
$scope.message = "Lets do this!! Wall of this site";
});
diary.controller('DiaryImagesController', function($scope) {
$scope.message = "Lets do this!! Images of this site";
});
diary.controller('DiaryAudioController', function($scope) {
$scope.message = "Lets do this!! Audio of this site";
});})();
I am getting this Unknown TypeError: Cannot read property '1' of NuLL.
It successfully fetch the files specified in the route but it doesn't display in the site.. I have checked the console:
XHR finished loading: GET "http://localhost/mobile%20diary/app/partials/images.html".
But the contents of the loaded page is not displayed in the site.
I check in resources and in there the images.html file is loaded and I can see the file preview but it is not shown in the site.
Below is the HTML Shell file:
<!DOCTYPE html>
<html ng-app="diary">
<head lang="en" ng-controller="">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
</head>
<body>
<header>
<nav class="menu-nav">
<ul>
<li class="menu-buttons"><i class="fa fa-newspaper-o"></i></li>
<li class="menu-buttons"><i class="fa fa-file-text-o"></i></li>
<li class="menu-buttons"><i class="fa fa-image"></i></li>
<li class="menu-buttons"><i class="fa fa-microphone"></i></li>
<li class="menu-buttons"><i class="fa fa-navicon"></i></li>
</ul>
</nav>
</header>
<div ng-view>
</div>
<script src="js/angular.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I also had this same error and similar to the comment from #ChanX I had an error in an ng-controller attribute. In my case, I had accidentally added a name of a css class that I had intended to put in the class attribute to the ng-controller attribute by mistake.
My hypothesis is that you might see this error any time there is a problem parsing an ng-controller attribute. Anyway, I sure am glad I found this on SO as it was a real head-scratcher. Would be nice if the error message was more informative.
This seems to be because you have are using localhost url. Likely for debugging or dev environment.
And there is a function on content_script.js that is as following:
function scanLinks() {
var current_domain = document.location.href.match(/^https?:\/\/(?:www\.)?([^\.]+\.[^\/]+)/i);
$("a[href][muse_scanned!=true]").each(function(i) {
this.setAttribute("muse_scanned", true);
var href = this.href;
var domain = href.match(/^http:\/\/(?:(?:www\.)?(?:[^\.]+\.(notlong\.com|qlnk\.net|ni\.to|lu\.to|zzang\.kr)|([^\.]+\.[^\/]+)))/i);
if (domain) {
domain = domain[1] || domain[2] || false;
}
if ((domain != current_domain[1]) && (expandSvcList.indexOf(domain) > -1)) {
this.title = "Expanding URL...";
expandLink(this);
}
});
}
The important part is:
var current_domain = document.location.href.match(/^https?:\/\/(?:www\.)?([^\.]+\.[^\/]+)/i);
That checks your current link, in your case "http://localhost/..." for a valid url like "http://www.localhost/". Because this isn't the case it causes the error when accessing current_domain[1] because current_domain is null.