I created an ng-sortable example in Plunker but it's not working.
Here's the JavaScript:
angular.module('sortableExample', [])
.controller('PresidentsCtrl', ['$scope', function($scope) {
$scope.presidents = [
'George Washington',
'Abraham Lincoln',
'William Jefferson Clinton'
];
$scope.dragControlListeners = {
accept: function(sourceItemHandleScope, destSortableScope) { return true },
itemMoved: function(event) {},
orderChanged: function(event) {}
};
}]);
And the HTML:
<!DOCTYPE html>
<html ng-app="sortableExample">
<head>
<script data-require="angular.js#1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="https://raw.githubusercontent.com/a5hik/ng-sortable/master/dist/ng-sortable.js"></scr</script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/a5hik/ng-sortable/master/dist/ng-sortable.css">
<script src="script.js"></script>
</head>
<body ng-controller="PresidentsCtrl">
<ul data-as-sortable="dragControlListeners" data-ng-model="presidents">
<li data-ng-repeat="president in presidents" data-as-sortable-item>
<div data-as-sortable-item-handle>{{ president }}</div>
</li>
</ul>
</body>
</html>
The right stuff shows up but it's not interactive like it should be. Any idea why?
You should not include links to github source -)
Since there is no cdn for ng-sortable - just copy it to plunker.
Also you forget to add dependency of ng-app.
angular.module('sortableExample', ['as.sortable'])
http://plnkr.co/edit/gRRzaVfwIycdzfApmebB?p=preview
Related
index.html
test.json
I want to be able to dynamically filter by the user clicking the button repersenting who's specific phone number they would like to see instead of using "filter: {Name: 'Bob'}" only showing Bobs info but I have not been able to find a way to use a variable in place of 'Bob'. I have provided the code in images.
Plunker was right in how I use a variable in my filter, I just did what Shb said in the comments as well so my buttons were out of scope and I just adjusted the tags ng-app and ng-controller to the body and Punkers solution to the filter works. Thanks guys something I should have easily seen.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
<script src="script.js"></script>
<script>
var app = angular.module('DB', []);
app.controller('controller', function($scope) {
$scope.db = [{
"Name": "Bob",
Phones: ["555-555-5555", "555-556-5556"]
}, {
"Name": "Jim",
Phones: ["555-555-5554"]
}];
$scope.filterName = 'Bob';
});
</script>
</head>
<body ng-app="DB" ng-controller="controller">
<button ng-click="filterName='Bob'">Bob</button>
<button ng-click="filterName='Jim'">Jim</button>
<ul>
<li ng-repeat="phones in db | filter: {Name: filterName}">
{{phones.Phones}}
</li>
</ul>
</body>
</html>
Try following code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'></script>
<script src="script.js"></script>
<script>
var app = angular.module('DB', []);
app.controller('controller', function($scope) {
$scope.db = [{
"Name": "Bob",
Phones: ["555-555-5555", "555-556-5556"]
}, {
"Name": "Jim",
Phones: ["555-555-5554"]
}];
$scope.filterName = 'Bob';
});
</script>
</head>
<body ng-app="DB" ng-controller="controller">
<button ng-click="filterName='Bob'">Bob</button>
<button ng-click="filterName='Jim'">Jim</button>
<ul>
<li ng-repeat="phones in db | filter: {Name: filterName}">
{{phones.Phones}}
</li>
</ul>
</body>
</html>
Plunker
can anyone point the mistake as to why i am unable to read the data from the controller ?
Link to plunker
Plunker
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js.1.3#*" data-semver="1.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1> {{ message }} </h1>
</body>
</html>
// Code goes here
// Code goes here
var MainController = function($scope) {
$scope.message = "Hello";
};
Where is the ng-app name ? Provide module name.
angular.module('myApp',[])
.controller('SomeCtrl',function($scope){ .. your code ...})
Provide it in .html file
<html ng-app="myApp">
Fixed your Plunkr
You are referring to older version of AngularJS for learning and using 1.5 in plunkr. Check the below link
For your app, refer
this link
and this one too
While your code may be correct, but it is prior to the versions 1.3.0
Versions Before 1.3.0:
Prior to 1.3.0, angular was able to automatically discover controllers
that were defined globally.
Check Below I have created without module
<div ng-app>
<div ng-controller="MainController">
{{message}}
</div>
</div>
The code can be:
var MainController = function($scope) {
$scope.message = "Hello";
};
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.32/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}} </h1>
</body>
</html>
Plunker version prior to 1.3.0
Versions After 1.3.0:
You can use $controllerProvider.allowGlobals() to enable that behaviour.
allowGlobals allows $controller to find controller constructors on
window
angular.module("ng").config(function($controllerProvider){
$controllerProvider.allowGlobals();
});
var MainController = function($scope) {
$scope.message = "Hello";
};
<!DOCTYPE html>
<html ng-app>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
function MyController() {}
</script>
</head>
<body ng-controller="MainController">
<h1>{{message}} </h1>
</body>
</html>
Plunker with versions after 1.3.0
Note: I personally recommend to use the latest versions with modules
and ng-app="app" format.
angular.module('myApp',[])
.controller('MainController',function($scope){ .. your code ...})
Here you go!!
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js.1.3#*" data-semver="1.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1> {{ message }} </h1>
</body>
</html>
// Code goes here
script.js
angular.module('app',[]).controller('MainController',function MainController($scope) {
$scope.message = "Hello";
})
I am looking at this tutorial. And I have such code:
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>SPA book_store</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("http://localhost:8080/book_store/rest/books_json/get")
.then(function(response) {
$scope.books = response.data;
});
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<input id="filter_input" type="text" ng-model="nameText"/>
<ul>
<li ng-repeat="book in books | filter:nameText | orderBy:'name'">
{{book.name}} - {{book.price}}
</li>
</ul>
</div>
</body>
</html>
http://localhost:8080/book_store/rest/books_json/get is returning following json:
[
{
"book_id":1,
"name":"Book1",
"bought":false,
"genre":"MR",
"price":20,
"users":[
],
"author":{
"author_id":1,
"name":"Gogol",
"books":[
]
}
},
//...
]
But I see in a browser networking that request wasn't fire. What have I done wrong?
Remove the ng-app="" from the html tag or provide the module name ng-app="MyApp".
Also remove one of the ng-app directives either from the the body tag or the html tag.
It is good practice to user the ng-app directive on the HTML tag if you are using just one angular app.
Trying to follow a tutorial, I can't get the "Hello, world" example working. Instead it displays: "{{greeting.text}}, world". Using Chrome and AngularJS 1.3.1.
index.html:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="app.js"></script>
<!--<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />-->
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, world </p>
</div>
</body>
</html>
app.js
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
My folder structure
root/
angular.js
app.js
index.html
Thank you
I hope this helps.
index.html
<!DOCTYPE html>
<html ng-app="appname">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="appCtrl">
<p>{{greeting.text}}, world </p>
</div>
</body>
</html>
script.js
var appname = angular.module('appname', []);
appname.controller('appCtrl', ['$scope',
function($scope) {
$scope.greeting = { text: 'Hello' };
}]);
http://plnkr.co/edit/XmliRcmsZvuQimHoyjN5?p=preview
Answering the question of what is wrong and if they changed something.
AngularJs Version 1.2 or older: The controller could be a function not defined into a module. Like in the question.
Controller
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
Angular Version 1.3 or newer: The controller must be defined into a module. Like in the answer.
Controller
var appname = angular.module('appname', []);
appname.controller('appCtrl', ['$scope',
function($scope) {
$scope.greeting = { text: 'Hello' };
}]);
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCntrl">
Enter text:
<br />
<input type="text" ng-model="hellomodel" />
<br />
<br />
<h1>
{{hellomodel}}</h1>
<script language="javascript">
var myapp = angular.module("myApp", []);
myapp.controller("myCntrl", function ($scope) {
$scope.hellomodel = "Hello World!";
});
</script>
</div>
</body>
</html>
http://dotnetlearners.com/blogs/view/222/AngularJS-Hello-World.aspx
The accepted answer is good but I thought I'd chip in with some resources I've found helpful if you're looking for a better understanding of how things work in Angular
Egghead.io - www.youtube.com/playlist?list=PLP6DbQBkn9ymGQh2qpk9ImLHdSH5T7yw7
Shaping up with Angular www.codeschool.com/courses/shaping-up-with-angular-js
Both are completely free courses and because the egghead.io playlist is split into videos for separate concepts it's also really good reference material.
The angular.js developer guide is also really helpful!
I have a plunker for this issue at http://plnkr.co/edit/yJNrpATGWY7iUeVcx6lx?p=preview
index.html:
<!DOCTYPE html>
<html ng-app="ItemEnum">
<head>
<link data-require="bootstrap-css#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script data-require="bootstrap#*" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.2.0-rc3-nonmin" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="EnumCtrl">
<ul class="nav">
<li ng-repeat="item in items">
<a ng-href="" di-enum-items di-item-class="link_active">
<span> {{item.name}} ({{item.count}}) </span>
</a>
</li>
</ul>
</div>
</body>
</html>
script.js:
angular.module('ItemEnum', [])
.controller('EnumCtrl', function($scope) {
$scope.items = [
{name: 'cars',count: 10},
{name: 'bikes',count: 20}
];
})
.directive('diEnumItems', function() {
return {
restrict: 'A',
scope: {
diItemClass: '='
},
link: function(scope, element, attrs) {
$(element).bind('click', function() {
if ( $(element).hasClass(attrs.diItemClass) ) {
element.removeClass(attrs.diItemClass);
} else {
element.addClass(attrs.diItemClass);
}
});
}
};
});
style.css:
/* Styles go here */
.link_active {
color: red;
}
Somehow the angular directive is screwing up the link enumeration. What am I doing wrong? Please note that I'm not looking for an answer that tells me that there is a more simple way of doing this. I know I can just create a directive that simply acts on the css class alone -- and besides the css class operations the directive performs is working fine here. This directive is more extensive and does some other stuff. However, the plunker shows the basic problem I'm having. I have read some other SO posts about directives as well as have read the Angular Directive guide but can't seem to get past this basic issue.
You're creating a new scope on your directive that's screwing up the ng-href render. I don't really see any reason why you need a scope in this situation, since you're using attrs anyway, so I removed it. Works now.
http://plnkr.co/edit/6ocoBa9yTQWMeL95O5Yw?p=preview