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'];
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
For some reason it gives me the error:
ReferenceError: random is not defined at Scope.$scope.generateRandom
I dont know what im doing wrong, you can go check out the website im using to do this HERE.
index.html:
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" />
<title>Basic Login Form</title>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.js"></script>
<script type="text/javascript" src="script23.js"></script>
</head>
<body ng-app = "app" ng-controller = "app">
<button ng-click = "generateRandom()">Generate Random Number</button>
<br> {{randomNumber}}
</body>
</html>
script23.js:
var app = angular.module('app', []);
app.service('random', function(){
var randomNum = Math.floor(Math.random()*10)
this.generate = function(){
return randomNum;
}
});
app.controller('app' , function($scope){
$scope.generateRandom = function(){
alert("Something")
$scope.randomNumber = random.generate();
}
})
To use service in controller, you need to inject it.
app.controller('app', function ($scope, random) {
I'd recommend you to use following syntax:
app.controller('app', ['$scope', 'random', function ($scope, random) {
See Why we Inject our dependencies two times in angularjs?
Change your controller like this, since you are using the service 'random'
myApp.controller('app', ['$scope','random', function( $scope,random)
{
$scope.generateRandom = function(){
alert("Something")
$scope.randomNumber = random.generate();
}
}])
Here is the working Application
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">
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. :)
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/