I was just following an AngularJS tutorial online, and basically they gave the following FIDDLE as an example. Now I tried the example locally and it doesn't work. My HTML looks like the below:
<!doctype html>
<html class="no-js" lang="" ng-app="" >
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript"
src="https://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<script type="text/javascript"
src="script.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-controller="MyCtrl">
<h2>Parent Scope</h2>
<input ng-model="foo"> <i>// Update to see how parent scope interacts with component scope</i>
<br><br>
<!-- attribute-foo binds to a DOM attribute which is always
a string. That is why we are wrapping it in curly braces so
that it can be interpolated.
-->
<my-component attribute-foo="{{foo}}" binding-foo="foo"
isolated-expression-foo="updateFoo(newFoo)" >
<h2>Attribute</h2>
<div>
<strong>get:</strong> {{isolatedAttributeFoo}}
</div>
<div>
<strong>set:</strong> <input ng-model="isolatedAttributeFoo">
<i>// This does not update the parent scope.</i>
</div>
<h2>Binding</h2>
<div>
<strong>get:</strong> {{isolatedBindingFoo}}
</div>
<div>
<strong>set:</strong> <input ng-model="isolatedBindingFoo">
<i>// This does update the parent scope.</i>
</div>
<h2>Expression</h2>
<div>
<input ng-model="isolatedFoo">
<button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
<i>// And this calls a function on the parent scope.</i>
</div>
</my-component>
</div>
</body>
</html>
And my script.js file looks like below:
var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
/* NOTE: Normally I would set my attributes and bindings
to be the same name but I wanted to delineate between
parent and isolated scope. */
isolatedAttributeFoo:'#attributeFoo',
isolatedBindingFoo:'=bindingFoo',
isolatedExpressionFoo:'&'
}
};
})
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.foo = 'Hello!';
$scope.updateFoo = function (newFoo) {
$scope.foo = newFoo;
}
}]);
Now why is my example not working locally? What am I doing wrong?
I do get an error in the console with the following:
Error: Argument 'MyCtrl' is not a function, got undefined
at Error (native)
at $a (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:16:488)
at qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:17:56)
at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:52:219)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:348
at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:6:494)
at i (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:213)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:307)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)
Works fine for me, I'm only insert the module name to ng-app tag: myModule
<html class="no-js" lang="" ng-app="myModule" >
Related
I'm trying Angular for the first time, and my first issue that I want to implement is single page application feature.
But here the first problem:
I have configured a very simple work, it is divided into two files: index.html and project.js.
I'm working on a Windows 10 machine and I'm using xampp 3.2.2, this project is putted inside the folder /htdocs/webapp.
When access to "localhost/webapp/" it properly load the "otherwise" condition, but when I try to load for example "localhost/webapp/#/tomato" or "localhost/webapp/#tomato" the url becomes "http://localhost/webapp/#!#tomato" and the page still shows the content of the otherwise condition...
I really don't know what is the cause, and also the console doesn't show any errors, it seems that in $routeProvider always get the otherwise condition.
Please guys, give some solutions I'm very nervous ;-)
Thank you
Below the snippets of the files
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>
<script src="project.js"></script>
</head>
<body ng-app="myApp">
<h2>JavaScript Projects</h2>
<div ng-view></div>
</body>
</html>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
})
.otherwise({
template : '<h1>None</h1><p>Nothing has been selected</p>prova'
});
});
DEMO
var app = angular.module("contactMgr", ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
})
.otherwise({
template : '<h1>None</h1><p>Nothing has been selected</p>prova'
});
}])
<!DOCTYPE html>
<html ng-app="contactMgr">
<head>
<meta charset="UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link data-require="bootstrap-css#*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css" />
<title>Title of the document -1</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Welcome to Route</h1>
<div class="nav">
Tomato
Banana
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view=""></div>
</div>
</body>
</html>
I am new to web development, trying to learn angularjs, and got stuck at very first step, this code works fine when I remove ng-controller but in this condition the browser shows Hello, {{name}}.
What am I doing wrong?
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="AppCtrl" >
<head >
<script src="js/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<meta character="uft-8">
<title></title>
</head>
<body>
<h1>Hello, {{name}}</h1>
<input type="text" ng-model="name">
</body>
</html>
controller.js
function AppCtrl($scope)
{
$scope.name: "world";
}
You are calling module named app which you didn't declared.
<html lang="en" ng-app="app" ng-controller="AppCtrl" >
If you provide module name then controller have to bind with that module.
To assign a value you have to use = not :
$scope.name: "world";
Try Like this
$scope.name= "world";
Moreover Global controller isn't allowed from 1.3.x
Try like this
var app = angular.module("app", []);
app.controller("AppCtrl", function($scope) {
$scope.name= "world";
});
JSFIDDLE
I cannot figure out why the template intellij creates for me produces all these error. Even better the angular is not working. I cut and pasted some simple angular code from online sources to test it and put the Angular script inside index.html with no luck.
Here is my current code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="controllers/clickablecontroller.js"></script>
</head>
<body ng-app="myApp">
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-controller="clickable">
<input type="button" value="Click Me" ng-click="clickMe()">
{{clickable.click}}
</div>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
Controller: (clickablecontroller.js)
angular.module('myApp',[])
.controller('clickable',['$scope', function($scope){
$scope.clickMe = function(){
$scope.click = click++;
}
}]);
Errors:
Trying to do simple thing in AngularJS: form->if you put right word->button appears->u can click and go to a different page;(i didn;t try to put a link to the button since it doesn;t appear even without a link)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<input type="text" ng-model="MyCtrl.pass">
<div class="button" ng-show="kPass">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
and the js
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope){
$scope.kPass = false;
$scope.pass = "empty";
$scope.$watch($scope.pass,function(){
if($scope.pass == "parola"){
$scope.kPass = !$scope.kPass;
}
})
};
problem: if i type in parola, the button does not appear
i am new to java script. thanks !
You should first read some angular tutorials, you have totaly wrong access to scope and you are using wrong $watch
angular.module('myApp', [])
.controller('MyCtrl', MyCtrl)
function MyCtrl($scope){
$scope.kPass = false;
$scope.pass = "empty";
$scope.$watch('pass',function(){
if($scope.pass == "parola"){
$scope.kPass = !$scope.Kpass;
}
})
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<div>
<input type="text" ng-model="pass">
<div class="button" ng-show="kPass">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
And next thing, you are overkilling your code. You can inline it in template without any controller function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="foundation.min.css">
</head>
<body ng-app="myApp">
<div >
<input type="text" ng-model="pass">
<div class="button" ng-show="pass == 'parola' ">click me</div>
</div>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
angular.module('app',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
Please input : 'parola' <input type="text" ng-model="pass">
<button ng-show="pass == 'parola'">Next step</button>
</body>
There are several errors here.
First, the password field is bound to MyCtrl.pass. But you're watching the value of $scope.pass
Second, $scope.$watch expects an angular expression to evaluate as argument, not a value to watch. So watching the string 'MyCtrl.pass' would be the correct thing to do.
Third, you shouldn't use a watch at all. You should just use ng-show="isPasswordValid(pass)"(see below), and return true or false from this function.
Fourth, instead of doing $scope.kPass = ($scope.pass == "parola"), you're inverting the value of $scope.kPass, but only if the value is correct. So if it goes from incorrect to correct, kPass will become true. Then if it becomes incorrect, kPass will stay true. And if it becomes correct again, it will become false.
So, to resume, all you need is
<div ng-controller="MyCtrl">
<input type="text" ng-model="pass">
<div class="button" ng-show="isPasswordValid(pass)">click me</div>
</div>
and
$scope.isPasswordValid = function(password) {
return pass === 'parola';
};
i have routeProvider, ng-view and controller.
Simple template with form and input. I can see $dirty value in {{form.var1.$dirty}} - it changes when i type, but how to access it in the controller code?
html main
<!doctype html>
<html ng-app="project">
<head>
<meta charset="utf-8">
<title>Tabs</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/dirty.js"></script>
<!--<script src="js/tab.js"></script>-->
</head><body>
<div ng-view>
</div>
</body>
</html>
template
{{2+2}}<br>
|{{var1}}|<br>
|{{form.var1.$dirty}}|
check dirty
<form class="form-horizontal" novalidate name="form" ng-submit="submit()">
<input id="var1" name="var1" class="input" type="text" ng-model="var1">
</form>
js
angular.module('project',[]).
config(function($routeProvider) {
$routeProvider.
when('/', {controller:Ctrl1, templateUrl:'dirty_tab.html'}).
when('/tab1', {controller:Ctrl1, templateUrl:'dirty_tab.html'}).
otherwise({redirectTo:'/'});
});
function Ctrl1($scope,$rootScope) {
$scope.var1=100;
$scope.dodo1 = function() {
alert(form.var1.$dirty);
}
}
Alert shows me "undefined".
How to get var1 $dirty value?
As Cherniv told you in the comments you need to access the variable from the $scope object
$scope.form.var1.$dirty