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) { ...
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>
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.
I'm following a tutorial online, but when I refresh my browser I get {{todo.title}} and the checkbox doesn't put a line through the text if clicked.
Any ideas why. I don't see anything different from my code and the video I'm following.
<!doctype html>
<html lang="en" ng-app="ToDo">
<head>
<meta charset="UTF-8">
<title>todo</title>
<style>
.done{text-decoration: line-through;color:#ccc;}
</style>
</head>
<body>
<div ng-controller='todoController'>
<form name="frm" ng-submit="addTodo()">
<input type="text" name = "newtodo" ng-model="newtodo" required>
<button ng-disabled="frm.$invalid">Go</button>
</form>
<button ng-click="clearCompleted()">Clear Completed</button>
<ul>
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done" />
<span ng-class="{'done': todo.done}">{{todo.title}}</span>
</li>
</ul>
</div>
<script scr="bower_components/angular/angular.min.js"></script>
<script>
angular.module('ToDo', []).
controller('todoController', ['$scope', function($scope){
$scope.todos = [{'title': 'Build a todo app', 'done':false}];
$scope.addTodo = function(){};
$scope.clearCompleted = function(){};
}]);
</script>
</body>
</html>
you have misspelled src as scr
<script scr="bower_components/angular/angular.min.js"></script>
Please include angularjs file like below. because u not included path of AngularJS Library
<head>
<meta charset="UTF-8">
<title>todo</title>
<style>
.done{text-decoration: line-through;color:#ccc;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
I am using angular to add some functionality to convert date in another framework (OutSystems). Unfortunately, the framework is calling jquery .load() to do Ajax refresh. This essentially is causing angular binding to break. I do not have any directives or controller. Please find code below. On launching page first tme you should see datetime of Feb 18, 2016 9:51:29 AM but after clicking button and calling.load() it just shows {{ 1455807089244 | date:'medium': 'EST' }}. I tried to use $compiler but it's still doesn't bind. Any help/hint is appreciated.
Note: This a "Test example" to demonstrate the problem.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', ['ngRoute']);
function reload() {
$('#div1').load('/index.html #divInner');
}
</script>
</head>
<body>
<div id="div1">
<div id="divInner">
<label id="L1">Hello {{ 1455807089244 | date:'medium': 'EST' }} </label>
<br />
</div>
</div>
<input id="Button1" type="button" value="button"
onclick="reload();" />
</body>
</html>
I think cracked this one... FYI, I have been working on this for days
<!DOCTYPE html>
<html ng-app="app" ng-controller="MainController">
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', ['ngRoute']);
app.controller("MainController", function ($scope, $compile) {
$.fn.reload = function (url, selector) {
$(selector).load(url, function () {
var elem = angular.element($(selector));
elem.replaceWith($compile(elem)($scope));
$scope.$apply();
});
};
});
</script>
</head>
<body >
<div id="div1">
<div id="divInner">
<label id="L1">Hello {{ 1455807089244 | date:'medium': 'EST' }} </label>
<br />
</div>
</div>
<input id="Button1" type="button" value="button"
onclick="$().reload('/index.html #divInner', '#div1') " />
</body>
</html>
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