I have the following html:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS</title>
<script type="text/javascript" src="/javascripts/app.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstController">
<input type="text" ng-model="data.message">
<h1>{{data.message}}</h1>
</div>
<div ng-controller="SecondController">
<input type="text" ng-model="data.message">
<h1>{{data.message}}</h1>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</body>
</html>
and the following coffeescript:
window.myApp = angular.module 'myApp', []
myApp.factory 'Data', ->
return message : 'I am data from a factory'
myApp.controller 'FirstController', ($scope, Data) ->
$scope.data = Data
myApp.controller 'SecondController', ($scope, Data) ->
$scope.data = Data
When I run the app, it prints out {{data.message}} instead of the text I type in the input box. When I remove the module dependency from the html and get data from a parent within the div, it works fine. This leads me to believe that the module is not getting created. What is the problem with my code?
You need to put the script tag that's in the head after the library script.
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";
});
I am starting to learn AngularJS and wanted to try building a simple calculator app, however, whenever I name the ng-app in my html-file, AngularJS stops working.
I tried building a controller, but seem to be doing something wrong when calling it or putting it to use.
I tried putting the files in the XAMPP webfolder because I thought it might not load from my hard drive, but to no avail.
(please disregard all the half-finished rest, right now I just want to get the controller working)
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body ng-app="calculatorApp">
<div ng-controller="mainCtrl">
<input type="number" ng-model="first" autofocus>
<input type="number" ng-model="second">
<br>
<button onClick="defineOperator('+')">+</button>
<button onClick="defineOperator('-')">-</button>
<button onClick="test()">TEST</button>
<br>
<div>
{{first}}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</script>
<script src="http://localhost/calculator/scripts/app.js" type="text/javascript"></script>
</body>
</html>
And the js:
angular.module('calculatorApp', [])
.controller('mainCtrl', function($scope){
$scope.defineOperator = function(choice) {
switch (operator) {
case +:
return first + second;
break;
default:
}
};
$scope.testOperator = function(click) {
alert("You chose " + operator);
};
});
Any help would be greatly appreciated.
angular.module('calculatorApp', [])
.controller('mainCtrl', function($scope){
$scope.first="hello";
});
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body ng-app="calculatorApp">
<div ng-controller="mainCtrl">
<div>
{{first}}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</body>
</html>
Have a look at this. One thing you have not closed the tag in which angular is defined.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</script>
You forgot to put > in above line.
Replace it with
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
You forgot to end the script tag with >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</script>
if you want to change the app-name in html page you should also change the app name in the js file :
angular.module('calculatorApp', [])
I just started AngularJS today; so I'm still very new to it. I have the following code:
<!DOCTYPE html>
<html ng-app>
<head>
<title>My first AngularJs</title>
</head>
</html>
<body data-ng-controller="SimpleController">
<div class="container">
<h3>Looping with the ng-repeat Directive</h3>
<input type="text" ng-model="nameText"/>{{ nameText}}
<ul>
<li data-ng-repeat="cust in customers | filter:nameText | orderBy:'name'">{{ cust.name | uppercase }} - {{ cust.city}}</li>
</ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function SimpleController($scope){
$scope.customers=[
{name:'Frank Ben',city:'Bamenda'},
{name:'Brize Tankanon',city:'Marous'},
{name:'Brendaline M.',city:'Bafoussam'},
{name:'Alexander Bings',city:'Buea'}
];
}
When I run the above code, this is what I get:
when I remove the controller directive from the body tag, I get this:
I don't know where the problem is coming from. I wish to display those names and cities. I will be grateful for your help. Thanks!
Try to register controller in angularjs app using build in dependency injection, in other words:
<script type="text/javascript">
var app = angular.module("app", []);
app.controller('SimpleController', ['$scope', function SimpleController($scope){
$scope.customers=[
{name:'Frank Ben',city:'Bamenda'},
{name:'Brize Tankanon',city:'Marous'},
{name:'Brendaline M.',city:'Bafoussam'},
{name:'Alexander Bings',city:'Buea'}
];
}]);
</script>
then change ng-app to ng-app="app".
Here is JSBin with working example: http://jsbin.com/ficozajena/1/edit?html,js,output
Here i am trying to call partial view from controller using angular js.
here is my code
<div ng-repeat='t in tabs'>
<div ng-include='t.templateUrl'></div>
<div>
when i try to include like ng-include="'/home/menutemplate'" it will includes the content. How can i dynamically do this? . Help me
t.templateUrl should be valid scope variable and should hold a string(path for the template):
$scope.t.templateUrl = "/home/menutemplate"
And in your template:
<div ng-include="t.templateUrl"></div>
It's exactly like what you did like this example
angular.module("app", []);
angular.module("app").controller("ctrl", function ($scope, $rootScope, $filter) {
$scope.templates = [
{url: "/Application/Partials/home.html"},
{url: "/Application/Partials/page2.html"}
]
});
<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
</head>
<body>
<div class="container">
<div ng-repeat="temp in templates">
<div ng-include="temp.url"></div>
</div>
<script type="text/ng-template" id="/Application/Partials/home.html">
<h1>home.html is here</h1>
</script>
<script type="text/ng-template" id="/Application/Partials/page2.html">
page 2 is here
</script>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</body>
</html>
I am still relatively new to angular, I am trying to build something but I keep getting the error that module 'ngDirTest is not available', I have put it in the body tag:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Testing directives</title>
<script src="../scripts/angular.js"></script>
<script type="text/javascript">
angular.module('ngDirTest', [
//controllers
])
</script>
<script src="../scripts/populate.js"></script>
<script src="../directive/GenericDirective.js"></script>
</head>
<body ng-app="ngDirTest">
<div ng-controller="PopulateCtrl">
<input type="text" generic-directive ng-model="nameone"/>
<input type="text" generic-directive ng-model="nametwo"/>
<input type="text" generic-directive ng-model="namethree"/>
<input type="text" generic-directive ng-model="namefour"/>
<input type="text" generic-directive ng-model="namefive"/>
<input type="text" generic-directive ng-model="namesix"/>
</div>
</body>
</html>
I also have this controller:
angular.module("ngDirTest").controller('PopulateCtrl', ['$scope', function($scope) {
//
}]);
I tried specifying the module at the top, but problem is I am not sure how to define controllers in here:
angular.module('ngDirTest', [/*controllers and other dependancies*/])
it also complains that scope isn't defined, which I don't understand since angular is defined at the top...
You don't need to define the controllers in the module declaration, that should be used for declaring other module dependencies.
Try this for your module declaration:
angular.module('ngdirTest', []);
And your controller looks okay
angular.module("ngDirTest").controller('PopulateCtrl', ['$scope', function($scope) {
// ...
}]);
See jsBin using your markup pasted above