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
Related
I am trying to create an angular application from scratch. I have been trying to solve this for hours now, but I couldn't make it work.
All the following files are placed inside a parent folder.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<script data-require="angular.js#1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<h1>Student App</h1>
<section ng-controller="HelloController">
<h4>Enter Student Details</h4>
<label for="name">Name :</label>
<input id="name" type="text" ng-model="student.name" />
<p>Hello {{student.name}}!</p>
</section>
<button id="name" type="submit" ng-click="onButtonClick()">Click</button>
</body>
</html>
HelloController.js
angular.module('app', [])
.controller('HelloController', ["$scope", function($scope) {
$scope.onButtonClick = function()
{
console.log("method invoked");
};
}]);
It would be nice if someone could help me solve this problem I am facing.
Your button is out of the <section> controlled by the controller. So clicking on it calls onButtonClick() on the root scope, not on te controller's scope.
Here is a snippet:
<!document html>
<html ng-app>
<head>
<title>First</title>
<script src="D:\Coding\angular.min.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="FirstController">
<input id="Text1" type="text" ng-model="user.name" />
<div>{{user.name}}</div>
</div>
<script>
function FirstController($scope){
$scope.user = {name: ""};
};
</script>
</body>
</html>
Open the .html file with Chrome, the '{{user.name}}' shows on the screen. I think the {{}} position should be the same with the textbox content, what's wrong?
You need to use like this :
<ng-app="Your Module Name ">
In controller write
var app=angular.module("your module name (can be anything)",[]).controller("myCtrl", function("your dependencies "){});
Hope it will work
In the ng-app attribute you need to add app name like as ng-app="myApp"
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
If you are using angular version below 1.3 it should work
DEMO
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://code.angularjs.org/1.2.3/angular.js"></script>
</head>
<body>
<div ng-controller="FirstController">
<input id="Text1" type="text" ng-model="user.name" />
<div>{{user.name}}</div>
</div>
<script>
function FirstController($scope){
$scope.user = {name: "test"};
};
</script>
</body>
</html>
You need to add like this
ng-app="yourappname"
Refer ng-app directive in documentation
I just start working on Angularjs, and when I came to ng-controller, there is one confusing point as following:
The HTML codes:
<html lang="en" ng-app="App" ng-controller="AppCtrl">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h2>Chapter1 <small>Hello,World</small></h2>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name}}</h1>
<label for="name">Enter Your Name</label>
<input type="text" ng-model="name" class="form-control input-lg" id="name">
</div>
</div>
</body>
</html>
The angularjs codes:
function AppCtrl($scope){
$scope.name = "World";
});
the result is that the {{name}} model part can not get the correct data. No default data "World" can be shown, and no matter what I type inside the input text box, the output view is always Hello, {{name}}
EDIT: I refer to a book about angularjs. And the demo case shows that the usage I post here. But I found workaround now.
Your Angular is not bootstrapped. Use:
angular.module('App', [])
.controller('AppCtrl', function($scope) {
$scope.name = "World";
});
I suggest you to read through some basic tutorials first.
Check this working demo: JSFiddle
How can I create dynamic ng-models in Angular? I tried but I think I'm having a hard time getting it to run. All I get is undefined. Here's my code.
<input type="text" class="form-control input-sm" ng model="teller[value.teller_id]" value="<% value.mac_address %>">
I am planning to have a ng-model that has the same name but only changes by number. I have an object that holds the number from 1-4. which is value.teller_id. I want to append it to the ng-model as teller1,teller2,teller3 (teller[value.teller_id] etc.. It is looped by ng-repeat which I don't have any problem but rather creating the dynamic ng-model and changing the number will yield undefine.
ng model="teller[value.teller_id]" <---- doesn't work
I want to achive teller1, teller2 etc..
Thanks!
Yes. We can generate ng-model name dynamically.
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.teller = {};
$scope.name = [{
"id":1
},{
"id":2
}]
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="x in name">
<input type="text" ng-model="teller[x.id]" />
</div>
<pre>{{teller | json}}</pre>
</body>
</html>
Hope it works for your case :)
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.