Error in drag-drop - Angular JS - angularjs

I follwed steps for drag-drop in angular JS on How to Create simple drag and Drop in angularjs but geting below error.
Please let me know what I am missing.
*
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=angular-starter&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fmodulerr%3Fp0%3Dui.router%26p1
*
My index.html is below:
*<html ng-app="angular-starter">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="angular-drag-and-drop-lists.js"></script>
<script src="app.js"></script>
<body>
<div class="row">
<div ng-repeat="(listName, list) in models.lists" class="col-md-6">
<ul dnd-list="list">
<li ng-repeat="item in list"
dnd-draggable="item"
dnd-moved="list.splice($index, 1)"
dnd-effect-allowed="move"
dnd-selected="models.selected = item"
ng-class="{'selected': models.selected === item}"
draggable="true">{{item.label}}</li>
</ul>
</div>
</div>
</body>
</html>
*
and app.js is
*
var app = angular.module('angular-starter', [
'ui.router',
'dndLists' ]); app.controller('MainCtrl', function($scope){
$scope.models = {
selected: null,
lists: {"A": [], "B": []}
};
// Generate initial model
for (var i = 1; i <= 3; ++i) {
$scope.models.lists.A.push({label: "Item A" + i});
$scope.models.lists.B.push({label: "Item B" + i});
}
// Model to JSON for demo purpose
$scope.$watch('models', function(model) {
$scope.modelAsJson = angular.toJson(model, true);
}, true); });
*


I think you didn't add a link to ui-router in your index.html, that might be where the error comes from.
Try to add :
<script src="your/path/to/angular-ui-router/release/angular-ui-router.min.js"></script>
just after this
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="angular-drag-and-drop-lists.js"></script>
<script src="app.js"></script>
I hope it'll help you.


I found solution to this, it was not working while I was trying to run it from folder. I put it in MAMP and it worked. Maybe something to do with angular module that is involved in this.

Related

Why get method not work in Laravel and AngularJS project

I want to develop simple front end AngularJS and backend Laravel. I don't know why my AngularJS route is not connected with laravel route.It keep mention as GET http://localhost/todos 404 (Not Found). I hope someone can help me to solve it. Thanks in advance.
Hello.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel + Angularjs</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-App>
<div id="todos" ng-controller="Todoctrl">
<h3 class="page-header">Todos<small ng-if="remaining()">{{remaining()}} remaining</small>
</h3>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
{{todo.text}}
</li>
</ul>
</div>
</script>
<script src="js/app.js">
</script>
</body>
</html>
Todo.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Todo extends Model
{
protected $guarderd = [];
}
App.js
function Todoctrl($scope,$http){
$http.get("/todos").success(function(todos){
$scope.todos = todos;
});
$scope.remaining = function(){
var count = 0;
angular.forEach($scope.todos,function(todo){
count == todo.done ? 0 : 1;
});
}
}
Route.php
Route::get('/', function () {
return view('welcome');
});
Route::get('/',function(){
return view('hello');
});
Route::get('/todos',function(){
return Todo::all();
});

You need to specify the whole URI like http://locahost:8000/todos and if you get problems with CORS you can use this library: LARAVEL CORS
NOTE: You must try this command too php artisan serve --host=0.0.0.0

Binding not works in angularjs

I am new to Angular, i am using Angular5.
I have productlist.js, having data in that file. Binded that data in the my html page, it's not working.
If i have the data in html file [ commented code in sample.html ], then it is working as expected.
productlist.js
angular.module('myShoppingList')
.controller('myCtrl', function ($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
});
Sample.html
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
</div>
I have added the productlist.js under the head in sample.html

You have few mistakes, you need to add empty dependencies to your module as follows,
angular.module('myShoppingList',[])
DEMO
angular.module('myShoppingList',[])
.controller('myCtrl', function ($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
</div>

When you add into html file, the following order of statement is important as well.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="yourSampleScript.js"> </script>
Please take into consideration the abovementioned code snippet.

trying it integrate prismic prismicio with angular js

Hey people i am trying to integrate prismic io with angular js 1 but it is not working.
I referred to many links to do that but i don't get anything data.
https://github.com/awulder/angular-prismicio
https://gist.github.com/laradevitt/94f7e21eaf6d3441b9475fc8f5201201
http://jsfiddle.net/othermachines/bbv9dzug/
and that's my code :
my code
app.js
// Define the `myApp` module
var app = angular.module('app', ['prismic.io']);
app.config(function(PrismicProvider) {
PrismicProvider.setApiEndpoint('https://myname.prismic.io/api');
PrismicProvider.setAccessToken('i put my access token');
PrismicProvider.setClientId('i used my id');
PrismicProvider.setClientSecret('i put my secret');
PrismicProvider.setLinkResolver(function(ctx, doc) {
return 'detail.html?id=' + doc.id + '&slug=' + doc.slug + ctx.maybeRefParam;
});
});
// Define the `AppCtrl` controller on the `app` module
app.controller('AppCtrl', ['Prismic', function(Prismic) {
var self = this;
Prismic.all().then(function(data) {
self.data = data;
});
}]);
index.html
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://unpkg.com/prismic.io/dist/prismic.io.min.js"></script>
<script src="https://raw.githubusercontent.com/awulder/angular-prismicio/master/dist/angular-prismicio.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="AppCtrl">
<prismic-html fragment="data.fragment"></prismic-html>
<ul>
<li ng-repeat="item in data">
<span>{{item.slug}}</span>
</li>
</ul>
</body>
</html>
The idea with this Prismic thing is that it has the data on it and they are just providing some code for integration and then we read this json data using angular.
please if anyone used it before will be really nice to help.
thanks

Angular modal service error - TypeError: modal.element.modal is not a function

I have problem with an angular modal service
My app.js includes:
angular.module('myApp', ['myApp.test', 'ui.bootstrap','smart-table''angularModalService','ngRoute','myApp.productInsert',...
test.js:
'use strict';
angular.module('myApp.test', ['angularModalService'])
.controller('ComplexController', [
'$scope', '$element', 'title', 'close',
function($scope, $element, title, close) {
$scope.name = null;
$scope.age = null;
$scope.title = title;
// This close function doesn't need to use jQuery or bootstrap, because
// the button has the 'data-dismiss' attribute.
$scope.close = function() {
close({
name: $scope.name,
age: $scope.age
}, 500); // close, but give 500ms for bootstrap to animate
};
// This cancel function must use the bootstrap, 'modal' function because
// the doesn't have the 'data-dismiss' attribute.
$scope.cancel = function() {
// Manually hide the modal.
$element.modal('hide');
// Now call close, returning control to the caller.
close({
name: $scope.name,
age: $scope.age
}, 500); // close, but give 500ms for bootstrap to animate
};
}]);
And then test.html
<div class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close()" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
<p>Here's a more complex modal, it contains a form, data is passed to the controller
and data is returned from the modal.</p>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="Your Name" ng-model="name">
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">Age</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputPassword3" placeholder="Age" ng-model="age">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" ng-click="close()" class="btn btn-primary" data-dismiss="modal">OK</button>
<button type="button" ng-click="cancel()" class="btn">Cancel</button>
</div>
</div>
</div>
</div>
And the main page that opens modal windows
'use strict';
angular.module('myApp.ricetta2', ['ngRoute', 'angularModalService','ui.bootstrap'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/ricetta2', {
templateUrl: 'views/ricetta/ricetta2.html',
controller: 'CartForm'
});
}])
.controller('CartForm', ['$scope','ModalService', function($scope, ModalService) {
$scope.invoice = {
items: [{
qty: 10,
description: 'Pomodori',
cost: 'Kg'}, {
qty: 10,
description: 'Olio',
cost: 'litri'}, {
qty: 4,
description: 'Pasta',
cost: 'Kg'}]
};
$scope.addItem = function() {
$scope.invoice.items.push({
qty: 1,
description: '',
cost: ''
});
},
$scope.removeItem = function(index) {
$scope.invoice.items.splice(index, 1);
},
$scope.total = function() {
var total = 0;
angular.forEach($scope.invoice.items, function(item) {
total += item.qty * item.cost;
});
return total;
};
$scope.items = ['item1', 'item2', 'item3'];
$scope.productList = [];
$scope.showComplex = function() {
ModalService.showModal({
templateUrl: "views/test/test.html",
controller: "ComplexController",
inputs: {
title: "A More Complex Example"
}
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
$scope.complexResult = "Name: " + result.name + ", age: " + result.age;
});
});
};
}]);
When I try to open Modal windows I have always an error on the page:
TypeError: modal.element.modal is not a function
at ricetta2.js:60
at processQueue (angular.js:13248)
at angular.js:13264
at Scope.$get.Scope.$eval (angular.js:14466)
at Scope.$get.Scope.$digest (angular.js:14282)
at Scope.$get.Scope.$apply (angular.js:14571)
at done (angular.js:9698)
at completeRequest (angular.js:9888)
at XMLHttpRequest.requestLoaded (angular.js:9829)(anonymous function) # angular.js:11655$get # angular.js:8596processQueue # angular.js:13256(anonymous function) # angular.js:13264$get.Scope.$eval # angular.js:14466$get.Scope.$digest # angular.js:14282$get.Scope.$apply # angular.js:14571done # angular.js:9698completeRequest # angular.js:9888requestLoaded # angular.js:9829
I have all the resources linked on the index.html:
<link rel="stylesheet"href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/angular-modal-service/dst/angular-modal-service.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
I'm very new to angularjs and I don't know the solution!!
Thanks all

I had same problem. Interchanging the script tags locations solved my problem. At first I had script tags in this sequence
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
Then I changed it to this.
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
Many times these things happen. Conflicts occur because of loading AngularJS before jQuery.

Hi here is the correct detailed solution from https://www.npmjs.com/package/angular-modal-service
I'm using a Bootstrap Modal and the dialog doesn't show up
Code is entered exactly as shown the example but when the showAModal() function fires the modal template html is appended to the body while the console outputs:
TypeError: undefined is not a function
Pointing to the code: modal.element.modal();. This occurs if you are using a Bootstap modal but have not included the Bootstrap JavaScript. The recommendation is to include the modal JavaScript before AngularJS.

The documentation is incorrect. I'm submitting a PR for the examples.
In the meantime change to this:
.then( function(modal)
{
modal.element.show();
});

angularModalService requires bootstrap js
You already loaded bootstrap.js and jquery.js
You have to load jquery.js first and then bootstarp.js and then angular.js .
So your resources linked in index.html should be..
<link rel="stylesheet"href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/angular-modal-service/dist/angular-modal-service.js"></script>

Yes you just need to put in order your external js apis
first -> jQuery.js second -> Boostrap.js -> Angular.js like this
<script src="../../resources/js/jquery.js" th:src="#{/resources/js/jquery.js}"></script>
<script src="../../resources/js/bootstrap.js" th:src="#{/resources/js/bootstrap.js}"></script>
<script src="../../resources/js/angular.js" th:src="#{/resources/js/angular.js}"></script>
<script src="../../resources/js/angular-modal-service.js" th:src="#{/resources/js/angular-modal-service.js}" ></script>
Sorry for this tag "th:src" I am using thymeleaf :)

Now i faced similar issue and it was fixed with adding below script files at the top of html.
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
src = "http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"

Can't Get AngularUI Sortable Demo to work

Having trouble getting a simple sortable demo for angular-ui going here- http://jsfiddle.net/B3YDr/:
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-model="items" ui-sortable>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<pre>{{items}}</pre>
</div>
angular.module('myApp', ['ui']);
var myCtrl = function($scope) {
$scope.items = ['One','Two','Three'];
};
Included jQuery & jQueryUI
Included AngularJS
Included AngularUI
Added 'ui' module as a dependency
I've copied the sample code almost like-for-like here http://angular-ui.github.io/#directives-sortable but still can't reorder list items.
Can anyone point out what is wrong? Thanks

You need to control the import order of scripts:
http://jsfiddle.net/B3YDr/4/
Put jquery before angular for angular to use it as element service.
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-model="items" ui-sortable>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<pre>{{items}}</pre>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.2.0/ui-bootstrap-tpls.js"></script>

you can use methods in sortableOptions like below code
$scope.sortableOptions = {
handle: '.custom-ctrl-handle',
stop: function(e, ui) {
// console.log("stop function worked");
}
};

Resources