I am new to angularjs. I am trying to create a simple controller but i can't.
Really need help.
<html data-ng-app="ionicApp" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script>
function SimpleController($scope){
$scope.customers=[
{name:'Djo', city:'johannesburg'},
{name:'tri',city:'vaal'},
{name:'stone',city:'pretoria'},
{name:'loick',city:'durban'}
];
}
</script>
<body >
<div class="container" ng-controllers="SimpleController">
<ul >
<!-- we are accessing thescope -->
Name: <input type="text" data-ng-model="name" /> {{ name}}
<li ng-repeat="cust in customers"> {{ custt.name}} - {{cust.city}} </li>
</ul>
</div>
</body>
</html>
Global controllers were disabled in angularjs 1.3 +
<html ng-app="ionicApp">
<body>
<div ng-controller="SimpleController">
</div>
</body>
<script>
angular.module("ionicApp",[])
.controller("SimpleController", [$scope, function($scope){
// your code here
}])
</script>
Solved! it was as simple as this:
instead of
<script>
angular.module("ionicApp",[])
.controller("SimpleController", [$scope, function(){
// my code here
}])
</script>
i just passed the $scope as a parameter in the function
<script>
angular.module("ionicApp",[])
.controller("SimpleController",function($scope){
// my code here
})
</script>
Thanks guys for your help
Related
I'm starting to study in AngularJs at the beginning level. My project is used in the Spring Boot framework. I get an error message: "ReferenceError: angular is not defined". I have already created app.js which is a defined angular variable, but it is still an error.
app.js:
var app = angular.module('myapp', ['ngRoute']);
app.controller('mainController', ['$scope', function($scope) {
$scope.title = "Welcome";
}]);
welcome.jsp:
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html ng-app="myapp" lang="en">
<head>
<meta charset="utf-8">
<title>Create an account</title>
<link href="${contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
<script src="${contextPath}/resources/js/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
</head>
<body>
<div class="container" ng-controller="mainController">
<c:if test="${pageContext.request.userPrincipal.name != null}">
<form id="logoutForm" method="POST" action="${contextPath}/logout">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
</form>
<h2> {{ title }} ${pageContext.request.userPrincipal.name} |
<a onclick="document.forms['logoutForm'].submit()">Logout</a></h2>
</c:if>
{{ title }}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="${contextPath}/resources/js/bootstrap.min.js"></script>
</body>
</html>
How can I resolve this issue?
Move your script below
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html ng-app="myapp" lang="en">
<head>
<meta charset="utf-8">
<title>Create an account</title>
<link href="${contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
<!-- move it here -->
<script src="${contextPath}/resources/js/app.js"></script>
</head>
<body>
...
</body>
</html>
Add angular script before your app.js.
Since your app.js uses angular object, it must be already defined. angular scripts does that job, so it must be loaded before any angular code.
Try below
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
<script src="${contextPath}/resources/js/app.js"></script>
I have two simple files: leads.html and leadsController.js. I want to have leadsController.js as a linked javaScript file in leads.html. When I link it using the following code <script src = "leadsController.js"></script> in my leads.html ... leads.html does not render properly.
However, when I include the contents of leadsController.js as a part of the code of leads.html it works.
Am I not linking the .js file correctly?
Below is what works and what doesn't.
I want this to work when connected to leadsController.js
Yes ... it's in the same directory.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<h1>Hello, world!</h1>
<ul>
<li ng-repeat = "x in myData">{{ x.id }}</li>
</ul>
</div>
<script src = "leadsController.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
leadsController.js looks like this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("https://clearmaze.net/test/newAdmin/leadsData.php").then(function (response) {
$scope.myData = response.data.records;
});
});
This works:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<h1>Hello, world!</h1>
<ul>
<li ng-repeat = "x in myData">{{ x.id }}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("leadsData.php").then(function (response) {
$scope.myData = response.data.records;
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
try absolute uri of the script file. eg if ur script is in /scripts folder then
src="~/scripts/leadsController.js" that should work.
Try <script src = "./leadsController.js"></script>
UPDATE: typo. I didn't upload the file to the server ... facepalm. Thanks all for your suggestions as they lead me to figure that out in the first place.
I am not able to do data binding using angularJS application.
The following is the HTML template file as databinding.html and Javascript file as invoice.js.
It is priting {{ fname }} {{ lname }} besides John Doe.
<!DOCTYPE html
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div ng-app="myApp" ng-controller="InvoiceController">
First Name :<input type="text" ng-model='fname' /><br />
Last Name:<input type="text" ng-model='lname' /><br />
{{ fname }} {{ lname }}
</div>
<script type="text/javascript" src="invoice.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
angular.module('myApp', []).controller('InvoiceController', ['$scope',
function($scope) {
$scope.fname = 'John';
$scope.lname = 'Doe';
}]);
The order of the scripts is wrong. The controller logic won't work because it doesn't know what angular is yet.
Change this:
<script type="text/javascript" src="invoice.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
to this:
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="invoice.js"></script>
Hey guys ive been trying to use routing, still new to angular though :( I have the first page already made, but am trying to make it when you click enter the next page appears on top of the current page (so basically a new page). The reason I want it to be all 1 page is so I can transfer the data from the first page onto the second page, however I can't seem to get it to load the next page... Here's my html and js so far,, not sure where im going wrong -_-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/kandi.css">
</head>
<body data-ng-app="nameBox" class="ng-scope">
<ng-view></ng-view>
<section class="frontPageBox">
<div data-ng-controller="appearCntrl">
<form action="" method="">
<input type="text" data-ng-bind="name" data-ng-model="name" placeholder="Your Name..." id="name-input">
<a type="button" class="button" href="#/kandi2" style="text-decoration:none;color:#ccc;">Enter</a>
</form>
<p style="color:#999; font-size: 1.1em;">{{"Welcome " + name}}</p>
</div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module("nameBox", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/kandi2", {
templateUrl : "kandi2.html"
});
});
app.controller("appearCntrl", function($scope){
$scope.name = "";
$scope.data = [];
$scope.data.push(name);
});
</script>
</body>
</html>
The problem is because of the ng-view tag
<ng-view></ng-view>
Gives an <!-- ngView: undefined --> element in the DOM, there is no place to attach the view.
You could write something like:
<div ng-view></div>
Then it should work.
This question already has answers here:
Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
(5 answers)
Closed 7 years ago.
I have following code which i have got from internet. I have implemented the same code but it is not displaying any data.
HTML
<html data-ng-app="">
<head>
<title>Example 4: Using AngularJS Directives and DataBindings</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Styles/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container" ng-controller="SimpleController">
<h1>AngularJS Second Program</h1>
<br/>
Name:
<br />
<input type="text" data-ng-model="name" /><br/>
<br/>
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
<script type="text/javascript" src="Scripts/angular.min.js"></script>
<script>
function SimpleController($scope)
{
$scope.customers = [
{name:'John Doe',city:'New York'},
{name:'John Smith',city:'Pheonix'},
{name:'Jane Doe',city:'Chicago'}
];
}
</script>
<script src="Styles/jquery.min.js"></script>
<script src="Styles/js/bootstrap.min.js"></script>
</body>
I have also implemented bootstrap in it just for designing.
Previous example i have seen was this and it was working fine
<html data-ng-app="">
<head>
<title>Example 3: Using AngularJS Directives and DataBindings</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Styles/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body data-ng-init="customers=[{name:'John Doe',city:'New York'},{name:'John Smith',city:'Pheonix'},{name:'Jane Doe',city:'Chicago'}]">
<div class="container">
<h1>AngularJS Second Program</h1>
<br/>
Name:
<br />
<input type="text" ng-model="name" /><br/>
<br/>
<ul class="list-group">
<li class="list-item" data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
<script type="text/javascript" src="Scripts/angular.min.js"></script>
<script src="Styles/jquery.min.js"></script>
<script src="Styles/js/bootstrap.min.js"></script>
</body>
This is just my 4th AngularJS example so i have totally 0 knowledge what is happening.
Thanks in advance
I believe it's angular 1.2 and > needs to have app initialized:
angular.module('app', []); // can be named whatever you want of course
then place in your ng-app attr:
<html data-ng-app="app">
then you create your controller by either making a new module:
angular.module('App.Controllers', []) // again naming it whatever you want
.controller('SimpleController', ['$scope', function($scope){
// do your controller stuff
}]);
this must be added to the app:
angular.module('app', ['App.Controllers']);
OR you can create it as part of your app:
angular.module('app').controller('SimpleController', ['$scope', function(){
// NOTICE: I didn't add the [] when using the app module again, this is how you call the module up later on to add things like controllers, directives etc.
}]);
simply your angular.js file is not getting loaded or corrupted, try with cdn link its working fine .
Do it like this, you need to initialize your angular app
<html data-ng-app="myapp">
<head>
<title>Example 4: Using AngularJS Directives and DataBindings</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Styles/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div class="container" ng-controller="SimpleController">
<h1>AngularJS Second Program</h1>
<br/>
Name:
<br />
<input type="text" data-ng-model="name" /><br/>
<br/>
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
<script type="text/javascript" src="Scripts/angular.min.js"></script>
<script>
angular.module('myapp', []).controller('SimpleController', ['$scope',
function($scope) {
$scope.customers = [
{name:'John Doe',city:'New York'},
{name:'John Smith',city:'Pheonix'},
{name:'Jane Doe',city:'Chicago'}
];
}
]);
</script>
<script src="Styles/jquery.min.js"></script>
<script src="Styles/js/bootstrap.min.js"></script>
</body>
Looks like SimpleController isn't defined in app module. Try to name your app lake 'myApp' and define your controller like this:
angular.module('F1FeederApp.controllers', [])
.controller('simpleController', function($scope) { ...