I just saw a video of introduction to AngularJS and use the following example
The html:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-controller="MainContrl">
<h2>{{message}}</h2>
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/test.js"></script>
</body>
</html>
The js:
var MainContrl = function($scope){
$scope.message = "Hello friend";
};
In the example I've seen this structure works, but when I test it does not work.
The console gives me this error:
Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=MainContrl&p1=not%20a%20function%2C%20got%20undefined
Can be used in this way the controller?
Or is it a bad practice
Example in Plunker:
Code example
I think, it's a bad practice
You better use:
var myApp = angular.module('myApp', []);
myApp.controller('MainContrl', ['$scope', function ($scope) {
// any code here
]);
And use this in HTML:
<html ng-app="myApp">
<body ng-controller="MainContrl">
// any code here
</body>
</html>
You may need to define your angular App first :
var myApp = angular.module('myApp', []);
myApp.controller('MainContrl', function ($scope) {
$scope.message = "Hello friend";
});
here is a working example on Plunkr
I think you have to have a main app.
In myapp.js
var yourApp = angular.module('myApp',[]);
In mainController.js (it should not be called test.js)
yourApp.controller('MainController',['$scope',function($scope){
$scope.message = "Hello world";
}]);
In your index.html
<html ng-app="myApp">
<body ng-controller="MainController">
{{message}}
</body>'
<script src="bower_components/angular/angular.min.js"></script>
<script src="js/myapp.js"></script>
<script src="js/mainController.js"></script>
</html>
Change Your script.js to
var app=angular.module('myapp',[]);
app.controller('MainContrl', ['$scope', function($scope){
$scope.message = "Hello friend";
}]);
and in html page put ng-app in body tag and remove ng-app from html
<body ng-app="myapp" ng-controller="MainContrl">
First declare your app in your html:
<html ng-app="myApp">
Second define your app in your js:
var app = angular.module('myApp', []);
Then definewhatever controller in whatever js file (best practice sugests that every controller has its own file):
var MainContrl = function($scope){
$scope.message = "Hello friend";
};
Then declare your controller and variables in your html:
<body ng-controller="MainContrl">
<h2>{{message}}</h2>
</body>
Don't forget to bind your controller with your app:
app.controller('MainContrl',MainContrl);
I also can see that you're using bower, so I suggest you read this:
http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
Related
The index.html page looks like this.
<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="/js/script.js"/>
<script data-require="angular.js#*" data-semver="1.3.0-beta.14" src="http://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
<meta charset="UTF-8">
<title>Test Page</title>
</head>
<body ng-controller="MainController">
<div>
<h1>{{message}}</h1>
<div>
{{person.firstName}}
</div>
</div>
</body>
</html>
The script.js file looks like this:
var MainController = function($scope) {
var person = {
firstName : "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
};
But when I boot up the application my page shows :
{{message}}
{{person.firstName}}
and not the values that it should. Am I missing something here? I am using spring boot.
I have debugged the chrome and have seen the js file loading properly, it even hits the debugger point in the js file,hence the file loading is not the problem i suppose.
UPDATE- THIS WORKED
var MainController = function($scope) {
var person = {
firstName: "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
};
angular.module('mainApp', [])
.controller('MainController', MainController);
index.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.14" src="http://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<meta charset="UTF-8">
<title>Test Page</title>
</head>
<body ng-controller="MainController">
<div>
<h1>{{message}}</h1>
<div>
{{person.firstName}}
</div>
</div>
</body>
</html>
Since angular 1.3+ global function declaration of controller haven't been supported. So you have first create an angular module and then bind all of its angular component to it.
Also move /js/script.js right after angular.js reference with closing </script> tag.
Code
angular.module('mainApp', [])
.controller('MainController', MainController)
function MainController($scope) {
var person = {
firstName: "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
};
Then do add mainApp module inside ng-app directive like ng-app="mainApp" on html tag.
Demo Here
You need to define the module and the controller,
HTML:
<body ng-app="DemoApp" ng-controller="DemoController">
{{message}} {{person.firstName}}
</body>
Controller:
var app = angular.module('DemoApp', ['angular.filter'])
app.controller('DemoController', function($scope) {
var person = {
firstName : "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
});
DEMO
I'm trying to learn Angular.js. I set up a simple page, in which I want to display a message from my script file. Here's the HTML structure:
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#*" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/2.0.0-alpha.31/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
And this is my script.js:
var MainController = function($scope){
$scope.message = "my message";
};
I'm supposed to see the words my message on the page, but instead I'm seeing literally {{message}}. I tried to wrap the JS code in self-envoking function:
(function() {
var MainController = function($scope) {
$scope.message = "my message";
};
}());
But it didn't have any result.
What am I doing wrong?
It's old syntax and you cannot declare controller like that. Now you need to register controller on your module.
angular.module('anyModuleName',[]).controller('yourControllerName',function(){
});
and also edit to ng-app="anyModuleName" where you initialize your app. In your case <html ng-app="anyModuleName">
code here:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="app">
<p ng-controller="MessageController">
{{message}}
</p>
<script src="../../angularv1.min.js"></script>
<script src="message-controller-scope.js"></script>
</body>
</html>
/**
* Created by Glacier on 2015/7/19.
message-controller-scope.js
*/
function MessageController($scope) {
$scope.message = "This is a model.";
}
The result is {{message}}
Why not show This is a model?
Is there any wrong?
This is a angular controller-scope problem.
var app = angular.module('app',[]);
app.controller('MessageController', ['$scope', function($scope) {
$scope.message = "This is a model.";
}]);
More here: https://docs.angularjs.org/guide/controller
You need to create angular module:
angular.module('app')
.controller('MessageController', MessageController);
function MessageController($scope) {
$scope.message = "This is a model.";
}
MessageController.$inject = ['$scope'];
This question already has answers here:
Controller not a function, got undefined, while defining controllers globally
(14 answers)
Closed 7 years ago.
I have this very simple Angular example:
<html ng-app>
<head>
<title>Angular Test</title>
</head>
<body ng-controller='myController'>
<h1>Angular Test</h1>
<p>{{hello.text}}</p>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js'></script>
<script>
function myController ($scope) {
$scope.hello = {text : 'Hello World!'};
}
</script>
</body>
</html>
As you can see I'm using Angular from the CDI. Though when I view this in my browser I get the following error:
Error: [ng:areq] http://errors.angularjs.org/1.3.16/ng/areq?p0=myController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:6:417
at Sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:19:510)
at La (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:20:78)
at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:75:465)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:57:178
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:7:428)
at M (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:57:45)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:51:409)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:51:426)
I've literally just started with Angular so this might very well be a very noob mistake.
You're using Angular 1.3.16, which means you have to manually register your controller to your app, and don't make it anonymous.
So you need to change this in the javascript code:
var myApp = angular.module('myApp', []);
myApp.controller('myController', myController);
And define your module like this:
ng-app="myApp"
check your library location and please put inside head
<html ng-app>
<head>
<title>Angular Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
</head>
<body ng-controller='myController'>
<h1>Angular Test</h1>
<p>{{hello.text}}</p>
<script>
function myController ($scope) {
$scope.hello = {text : 'Hello World!'};
}
</script>
</body>
</html>
Plunker: http://plnkr.co/edit/gBUAabtisdHFKxikmjkA?p=preview
I am new to angular JS. I wrote a bit of angular code.
i have defined controller code also.Can anybody tell me why i cannot get scope variable value?
Any thing i missed ?
HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<!--this above is external java script
file my controller is not working,
what problem i am facing ?-->
<body>
<!-- the below is ng-controller -->
<div ng-controller="HelloCtrl">
say hello to : <input type="text" ng-model="name"/>
<h1> Hello, {{name}}! </h1>
</div>
Script:
<script>
var HelloCtrl = function ($scope) {
$scope.name = 'World';
}
</script>
</body>
</html>
you should define your app and your controller like this :
var myApp = angular.module("myApp", []);
myApp.controller("HelloCtrl", function ($scope) {
$scope.name = "world";
});
You are missing var myApp = angular.module('myApp',[]);
Your script should look like:
<script>
var myApp = angular.module('myApp',[]);
var HelloCtrl = function ($scope) {
$scope.name = 'World';
}
</script>
Working example. Depends on angular version. :)