Exercise.js :
var myAppModule = angular.module("myFirstModule", []);
var MyAppController = function ($scope) {
$scope.message = "Welcome to Angular Tutorial";
};
myAppModule.controller = ("MyAppController", MyAppController);
Html file:
<!DOCTYPE html>
<html>
<head ng-app="myFirstModule">
<script src="Scripts/Excercise.js"></script>
<script src="~/Scripts/angular.js"></script>
</head>
<body>
<div ng-controller="MyAppController">
1+5 = {{ 1 + 5 }}
<br />
{{['nikhil','om','sai'] [2]}}
<br />
{{ {name:'nikhil',details:'om sai ' }.name }}
<br />
{{ message }}
</div>
</body>
</html>
When i am trying to solve this i am getting error. I Know its a small error but i am not able to figure this out.
In addition to #Sajeetharan's answer above, there is also one minor issue that your Exercises.js script may not be getting loaded:
<script src="Scripts/Excercise.js"></script>
<script src="~/Scripts/angular.js"></script>
The ~ is missing, so the code is dependent on where the HTML file is located(it'll look in the current directory). The angular.js script tag is not dependent.
There are few issues
(i) Change your controller as,
myAppModule.controller('MyAppController', function ($scope) {
$scope.message = "Welcome to Angular Tutorial";
});
(ii) Load angular.js script before loading your script.js
(iii) Place ng-app ahead of body
DEMO
var myAppModule = angular.module("myFirstModule", []);
myAppModule.controller('MyAppController', function ($scope) {
$scope.message = "Welcome to Angular Tutorial";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head >
</head>
<body ng-app="myFirstModule">
<div ng-controller="MyAppController">
1+5 = {{ 1 + 5 }}
<br />
{{['nikhil','om','sai'] [2]}}
<br />
{{ {name:'nikhil',details:'om sai ' }.name }}
<br />
{{ message }}
</div>
</body>
</html>
Change your controller to
myAppModule.controller('MyAppController', function ($scope) {
// your code goes here
});
or
var MyAppController = function ($scope) {
$scope.message = "Welcome to Angular Tutorial";
};
myAppModule.controller("MyAppController", MyAppController);
Related
I created one sample application of Angular Js. It's working if I take only one controller. If I took tow controller then it's not working. It's showing Error: [$controller:ctrlreg] The controller with the name 'FirstNameController' is not registered. error. I referred this site
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<div ng-app="DemoApp">
<div ng-controller="FirstNameController">
First Name : <input type="text" ng-model="firstName"><br>
first Name: {{firstName}}
</div>
<div ng-controller="LastNameController">
Last name : <input type="text" ng-model="LastName"><br>
Last Name: {{LastName}}
</div>
</div>
<script>
angular.module('DemoApp',[]).controller('FirstNameController', function($scope){
$scope.firstName = "Anil";
});
angular.module('DemoApp',[]).controller('LastNameController', function($scope){
$scope.LastName = "Jagtap";
});
</script>
</body>
</html>
Angular.module("DemoApp") will create the module again.
So declare are
var module = Angular.module("DemoApp")
module.controller('FirstNameController', function($scope){
$scope.firstName = "Anil";
});
module.controller('lastNameController', function($scope){
$scope.firstName = "Anil";
});
<!doctype html>
<html lang="en" data-ng-app>
<head>
<meta charset="utf-8">
<title>AngulasJS Demo3</title>
<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
function nameController($scope){
$scope.firstname = 'John';
$scope.lastname = 'Smith';
}
</script>
</head>
<body data-ng-controller = "nameController">
First Name : <input type = "text" data-ng-model="firstname"></input>
<br />
<br />
Last Name : <input type = "text" data-ng-model="lastname"></input>
<br />
<br />
Hello {{ firstname }} {{lastname}}
</body>
</html>
Initialized the model with an global function where I have declare Scope object and using it I am passing the firstname and lastname to the view.
Output :
Here the firstname and lastname values are not getting reflected.
JSFiddle Link here
Edit : I found this code here, and the output.
I would usually reference my app directly by declaring it as a variable in the JavaScript, and then referencing the name of the app in the declaration in the html tag. The following will work:
<html lang="en" data-ng-app="myapp">
<head>
<title>AngulasJS Demo3</title>
<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
var myapp = angular.module('myapp', []);
myapp.controller('nameController', ['$scope', function($scope){
$scope.firstname = 'John';
$scope.lastname = 'Smith';
}]);
</script>
</head>
<body data-ng-controller="nameController">
First Name : <input type = "text" data-ng-model="firstname"></input>
Last Name : <input type = "text" data-ng-model="lastname"></input>
Hello {{ firstname }} {{lastname}}
</body>
</html>
JSFiddle
For an angular application to work, you need to define the module. Which you have not done.
define a app like this:
var myapp = angular.module('myapp', []);
then refrence this app in your html like this:
<html lang="en" data-ng-app="myapp">
here is a running fiddler for you code running Code
you need always to have a defind app for the angular to work and the controller should be part of that app.
<title>AngulasJS Demo3</title>
<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("nameController", ['$scope', function($scope) {
$scope.firstname = 'John';
$scope.lastname = 'Smith';
}]);
</script>
<body ng-app="myApp" data-ng-controller = "nameController">
First Name : <input type = "text" data-ng-model="firstname"/>
<br />
<br />
Last Name : <input type = "text" data-ng-model="lastname"/>
<br />
<br />
Hello {{ firstname }} {{lastname}}
</body>
I am new to learning AngularJs and stuck at this particular error. Can't seem to find the reason behind this error. Any help will be appreciated.
I am using AngularJs 1.2.
Please advise.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body ng-app="Heirarchy">
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
<script type="text/javascript">
var app = angular.module("Heirarchy",[]);
app.controller("ParentController",function($scope){
$scope.person = {greeted:false};
});
app.controller("ChildController",function($scope) {
$scope.sayHello = function(){
$scope.person.name="Blade";
$scope.person.greeted = true;
}
});
</script>
</body>
</html>
Update your code
Insert ng-app="your module name" in your html tag, and do not repeat ng-app in your app
<!doctype html>
<html ng-app="Heirarchy">
<head>
</head>
<body>
<div ng-controller="ParentController">
</div>
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("Heirarchy", []);
app.controller("ParentController", function ($scope) {
$scope.person = { greeted: false };
});
app.controller("ChildController", function ($scope) {
$scope.sayHello = function () {
$scope.person.name = "Blade";
$scope.person.greeted = true;
}
});
</script>
</body>
</html>
I am following some tutorials on AngularJS, but the below code is not working for me
<!DOCTYPE html>
<html ng-app="simpleApp">
<head>
<title>My Angular App!</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div ng-controller="myController">
<ul>
<li ng-repeat="entry in collection"> {{ entry }} </li>
</ul>
</div>
</body>
</html>
and below is my index.js code
var app = angular.module("simpleApp", []);
app.controller("myController", function($scope) {
$scope.collection = ['first','second','third'];
};
})
According to the tutorials output must be
first
second
third
but my output is
{{ entry }}
You have a random }; in your code
app.controller("myController", function($scope) {
$scope.collection = ['first','second','third'];
};
})
Should be:
app.controller("myController", function($scope) {
$scope.collection = ['first','second','third'];
})
Angular Controller return error when called through an app. But works when written directly.
My html code
<!DOCTYPE html>
<html ng-app>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="fbapp">
<div ng-controller="fbController" class="container">
<input type="text" name="name" ng-model="name"/>
<input type="button" value="Fetch" ng-click="fetchUser()" class="btn btn-primary"/>
</form>
</div>
</body>
</html>
My js code
var fbapp = angular.module('fbapp', []);
fbapp.controller('fbController', function($scope){
$scope.fetchUser = function() {
$scope.name = "Test";
}
}
Error I get
Error: [ng:areq] http://errors.angularjs.org/1.2.15/ng/areq?p0=fbController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:6:450
at wb (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:18:360)
at Qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:18:447)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:65:470
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:52:156
at r (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:7:386)
at J (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:52:18)
at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:28)
at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:45)
It work for me if I don't declare container in a an app. Like...
function fbController ($scope){
$scope.fetchUser = function() {
$scope.name = "Test";
}
}
I am having no clue whats wrong.
as Stewie said you need to add closing parenthesis ' )'.
Example:
var app=angular.module('App', []);
app.controller('fbController', function($scope){
$scope.fetchUser = function() {
$scope.name = "Test";
}
})
html:
<div ng-app="App" >
<div ng-controller="fbController">
<button ng-click="fetchUser()">click</button>
<p >{{name}}</p>
</div>
</div>
Live example: http://jsfiddle.net/choroshin/7Ws6w/1/