<div ng-app="app" ng-controller="ContactController" >
</div>
Above is my html file and This is controller file.
var app = angular.module('app', []);
app.controller('ContactController', function ($scope, ContactService,$window) {
});
This is my html section to have look. Please let me know if any mistake
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/controller/contactController.js"></script>
<script type="text/javascript" src="/service/contactService.js"></script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script type="text/javascript">
//var module = angular.module('app', [ContactService]);
</script>
</head>
I am getting error as Argument 'ContactController' is not a function,got undefined. Please help to resolve the issue.
Maybe you forgot the () in the first line.
Try change order of import js file.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"
</script>
<script type="text/javascript" src="/service/contact.service.js"> </script>type="text/javascript"></script>
<script type="text/javascript" src="/controller/contact.controller.js">
Related
my controller.js has the following code:
var myController = angular.module('myApp.controllers', [])
My Services.js has the following code:
angular.module('myApp.services', [])
When I run my application, the code "var myController = angular.module('myApp.controllers', [])" gives me the following exception:
0x800a1391 - JavaScript runtime error: 'angular' is undefined.
Can anyone please tell me what goes wrong? Your help will be appreciated :)
Btw, here is the html code of my web app
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PathFinding.js</title>
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./lib/themes/jquery.ui.all.css" />
<script src="./js/angular.js"></script>
<script type="text/javascript" src="path/to/bower_components/pathfinding/pathfinding-browser.min.js"></script>
<script type="text/javascript" src="./lib/raphael-min.js"></script>
<script type="text/javascript" src="./lib/es5-shim.min.js"></script>
<script type="text/javascript" src="./lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./lib/state-machine.min.js"></script>
<script type="text/javascript" src="./lib/async.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.draggable.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.accordion.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.slider.min.js"></script>
<script type="text/javascript" src="./lib/pathfinding-browser.min.js"></script>
<script type="text/javascript" src="./js/view.js"></script>
<script type="text/javascript" src="./js/controller.js"></script>
<script type="text/javascript" src="./js/Services.js"></script>
<script type="text/javascript" src="./js/mainApp.js"></script>
<script type="text/javascript" src="./js/panel.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<ion-modal-view>
<ion-content>
<ion-scroll zooming="true" overflow-scroll="false" direction="xy" style="width: 100%; height:100%;"
scrollbar-x="false" scrollbar-y="false">
<div class="scroll-container" id="draw_area" style="width: 100%; height:100%; background: url('PathFindingMap.png') no-repeat ">
</div>
</ion-scroll>
</ion-content>
</ion-modal-view>
<button style="margin-bottom:10px;margin-left:30px;margin-right:30px;" id="button1" class="control_button" type="button">Search!</button>
<div style="visibility: hidden;" id="algorithm_panel" class="panel right_panel">
<div class="accordion">
<h3 id="astar_header"></h3>
<div id="astar_section" class="finder_section">
</div>
</div>
</div>
<div style="visibility: hidden;" id="play_panel" class="panel right_panel">
</div>
<div id="stats"></div>
</body>
</html>
Wrong approach of building your angular app
This is how you need to define your module
var app = angular.module('myApp',[])
This is how you need to add your controller in your controller.js
As you have already define your module,no need to give dependency
var app = angular.module('myApp')
app.controller('myController',function(){
// Here is your controller content
})
Here is how you need to add your service in service.js
var app = angular.module('myApp')
app.service('myService',function(){
// Here is your service content (this.method);
})
Your code gives you error because you have defined your module 2 times, ie defining its dependency []
On your controller.js try to reference the angular.js script.
Simply drag the angular.js to you controller.js file. You code will look like this.
/// <reference path="../../../scripts/angular.js" />
On your html code. Include the angular.js and put it into first hierarchy then add your controller.js or else your code will not work.
<script src="scripts/angular.js"></script>
<script src="scripts/controller.js"></script>
I'm attempting to learn angular and I am struggling with a simple button click.
I followed an example which has an identical code to the one below.
The result I am looking for is for the button click to cause an alert. However, there is no response to the button click. Does anybody have any ideas?
<html lang="en" ng-app="myApp" >
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div >
<button my-directive>Click Me!</button>
</div>
<script>
var app = angular.module('myApp',[]);
app.directive('myDirective',function(){
return function(scope, element,attrs) {
element.bind('click',function() {alert('click')});
};
});
</script>
<h1>{{2+3}}</h1>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
You need to move your angular app code below the inclusion of the angular libraries. At the time your angular code runs, angular does not exist yet. This is an error (see your dev tools console).
In this line:
var app = angular.module(`
you are attempting to access a variable called angular. Consider what causes that variable to exist. That is found in the angular.js script which must then be included first.
<h1>{{2+3}}</h1>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script>
var app = angular.module('myApp',[]);
app.directive('myDirective',function(){
return function(scope, element,attrs) {
element.bind('click',function() {alert('click')});
};
});
</script>
For completeness, it is true that your directive is similar to the already existing directive ng-click, but I believe the point of this exercise is just to practice writing simple directives, so that makes sense.
Use the ng-click directive:
<button my-directive ng-click="alertFn()">Click Me!</button>
// In <script>:
app.directive('myDirective' function() {
return function(scope, element, attrs) {
scope.alertFn = function() { alert('click'); };
};
};
Note that you don't need my-directive in this example, you just need something to bind alertFn on the current scope.
Update:
You also want the angular libraries loaded before your <script> block.
Just to complement m59's correct answer, here is a working jsfiddle:
<body ng-app='myApp'>
<div>
<button my-directive>Click Me!</button>
</div>
<h1>{{2+3}}</h1>
</body>
As you know angular.module( declared under angular.js file.So before accessing angular.module, you must have make it available by using <script src="lib/angular/angular.js"></script>(In your case) after then you can call angular.module. It will work.
like
<html lang="en">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script>
var app = angular.module('myApp',[]);
app.directive('myDirective',function(){
return function(scope, element,attrs) {
element.bind('click',function() {alert('click')});
};
});
</script>
</head>
<body ng-app="myApp">
<div >
<button my-directive>Click Me!</button>
</div>
<h1>{{2+3}}</h1>
</body>
</html>
i forgot to add below line to my HTML code after i add problem has resolved.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
I'm attempting to learn angular and I am struggling with a simple button click.
I followed an example which has an identical code to the one below.
The result I am looking for is for the button click to cause an alert. However, there is no response to the button click. Does anybody have any ideas?
<html lang="en" ng-app="myApp" >
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<div >
<button my-directive>Click Me!</button>
</div>
<script>
var app = angular.module('myApp',[]);
app.directive('myDirective',function(){
return function(scope, element,attrs) {
element.bind('click',function() {alert('click')});
};
});
</script>
<h1>{{2+3}}</h1>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
You need to move your angular app code below the inclusion of the angular libraries. At the time your angular code runs, angular does not exist yet. This is an error (see your dev tools console).
In this line:
var app = angular.module(`
you are attempting to access a variable called angular. Consider what causes that variable to exist. That is found in the angular.js script which must then be included first.
<h1>{{2+3}}</h1>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script>
var app = angular.module('myApp',[]);
app.directive('myDirective',function(){
return function(scope, element,attrs) {
element.bind('click',function() {alert('click')});
};
});
</script>
For completeness, it is true that your directive is similar to the already existing directive ng-click, but I believe the point of this exercise is just to practice writing simple directives, so that makes sense.
Use the ng-click directive:
<button my-directive ng-click="alertFn()">Click Me!</button>
// In <script>:
app.directive('myDirective' function() {
return function(scope, element, attrs) {
scope.alertFn = function() { alert('click'); };
};
};
Note that you don't need my-directive in this example, you just need something to bind alertFn on the current scope.
Update:
You also want the angular libraries loaded before your <script> block.
Just to complement m59's correct answer, here is a working jsfiddle:
<body ng-app='myApp'>
<div>
<button my-directive>Click Me!</button>
</div>
<h1>{{2+3}}</h1>
</body>
As you know angular.module( declared under angular.js file.So before accessing angular.module, you must have make it available by using <script src="lib/angular/angular.js"></script>(In your case) after then you can call angular.module. It will work.
like
<html lang="en">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script>
var app = angular.module('myApp',[]);
app.directive('myDirective',function(){
return function(scope, element,attrs) {
element.bind('click',function() {alert('click')});
};
});
</script>
</head>
<body ng-app="myApp">
<div >
<button my-directive>Click Me!</button>
</div>
<h1>{{2+3}}</h1>
</body>
</html>
i forgot to add below line to my HTML code after i add problem has resolved.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
hello i'm a beginner in angularjs so i try to do a Custom Components project but it's doesn't work please help me.
this is my index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.27/angular-route.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<markdown>
# Hello world
- list item
</markdown>
</body>
</html>
and here is the code of app.js
angular.module('myApp', [])
.directive('markdown', function () {
var converter = new showdown.converter();
return{
restrict: 'E',
link: function (scope,element,attrs){
var htmlText =converter.makeHtml(element.text());
element.html(htmlText)
}
}
})
this is what is displayed in the console
ReferenceError: showdown is not defined
Idon't know why !!!
thank's for your help :)
I already linked the script to my html file for the angularjs,sanitize and animate:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/angular-animate.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
and when i added the ngAnimate as a dependency to my module just like this:
var nameSpace = angular.module("OscarApp", ["ngSanitize","ngAnimate"]);
all my variables inside my expression were displayed as it is not on what was initialized on the variable, just like this:
{{item.award_title}}
what seems to be the problem? I just want to follow this tutorial (https://www.youtube.com/watch?v=Bcv46xKJH98).
Works for me...
This prints 2 to the screen
index.html
<!DOCTYPE html>
<html ng-app="OscarApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-sanitize.min.js"></script>
<script type="text/javascript" src="angular-animate.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
{{1+1}}
</body>
</html>
app.js
var nameSpace = angular.module('OscarApp', ['ngSanitize','ngAnimate']);
Angular version 1.3.0-rc.3 (latest download from angularjs.org)
This snippet shows that there is no problem with the unit.
maybe you have a problem elsewhere.
var nameSpace = angular.module('OscarApp', ['ngSanitize','ngAnimate']);
nameSpace.controller('OscarCtrl',['$scope',function($scope) {
$scope.item={ 'award_title' : 'The Lord of The Rings' };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-animate.min.js"></script>
<div ng-app="OscarApp" ng-controller="OscarCtrl">
{{item.award_title}}
</div>