When I visit my page, a get-request is fired 4 times, when It's just supposed to be fired 2 times. Take a look at the picture below:
Here is my code:
index.html:
<!DOCTYPE html>
<html ng-app="cryptlib">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta content="text/html;charset=UTF-8" http-equiv="content-type" />
</head>
<body ng-controller="firstPageController">
<div ng-view>
</div>
</body>
<script src="js/angular-file-upload-shim.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular-sanitize.js"></script>
<script src="js/angular-file-upload.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
</html>
firstpage.html
<link href='http://fonts.googleapis.com/css?family=Fjord+One' rel='stylesheet' type='text/css'>
<div id="layout">
<div id="top">
<h2>CryptLib</h2>
</div>
<div id="main">
<div class="leftcontent">
<ul>
<li>>> Webbutveckling</li>
<li>>> Programmering</li>
<li>>> Elektronik</li>
<li>>> Vetenskap</li>
<li>>> Övrigt</li>
<li>>> Ladda upp</li>
</ul>
</div>
<div class="maincontent">
<li ng-repeat="book in books track by $index">
{{book}}
</li>
</div>
<div id="bottom">
<h3>Ladda upp {{selectedItem}}</h3>
<input type="text" ng-model="myModelObj">
Välj mapp:
<select ng-model="selectedItem" ng-options="item for item in items" ng-change="change()">
</select>
<input type="file" ng-file-select="onFileSelect($files)">
<!--Bild<input type="file" ng-file-select="onFileSelect($files)" multiple accept="image/*">-->
</div>
</div>
controller.js
angular.module('cryptlib_controllers')
.controller('firstPageController', ['$scope','$http','$location','$sce','$rootScope','$upload', function($scope, $http, $location, $sce, $rootScope, $upload) {
$http({
url: 'lib/actions.php',
method: 'GET',
params: {get_books: 1}
}).success(function(data) {
$scope.books = data;
});
$http({
url: 'lib/actions.php',
method: 'GET',
params: {get_dirs: 1}
});
console.log($scope.books);
$scope.onFileSelect = function($files) {
//Vi har valt en eller flea filer
//$files är en array innehållande de valda filerna att ladda upp. Dess namn, storlek och typ
for(var i = 0; i < $files.length; i++)
{
var file = $files[i];
$scope.upload = $upload.upload({
url: 'lib/actions.php',
data: {myObj: $scope.myModelObj},
file: file
}).progress(function(evt) {
console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data, status, headers, config) {
console.log(data);
});
}
};
$scope.items = ['Programmering', 'Elektronik'];
$scope.change = function() {
alert($scope.selectedItem);
}
}]).controller('bookController', ['$scope','$http','$location','$sce','$rootScope','$upload', function($scope, $http, $location, $sce, $rootScope, $upload) {
}]);
Why is a get request fired 4times when I visit the page? It should only be fired 2times? Anyone who can explain?
Because you are defining firstPageController twice. First in the body tag, and then in the route.
Related
Here's my code:
controller.js
angular.module('myApp',['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show all the polls
.state('polls', {
url: '/polls',
templateUrl: 'views/polls.html',
controller: 'pollsController'
})
// show new polls
.state('new', {
url: '/polls/add',
templateUrl: 'views/newPoll.html',
controller: 'newController'
});
$urlRouterProvider.otherwise('/polls');
})
.controller('pollsController', function($scope,$http) {
$http.get('/polls').then(function(data, status, headers, config) {
$scope.result = data;
}).catch(function(data) {
$scope.result = data;
});
})
.controller('newController',function($scope,$http) {
$http.get('/polls/add').then(function(data,status,headers,config) {
$scope.result = data;
}).catch(function(data) {
$scope.result = data;
});
});
index.html
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css"> -->
<link rel="stylesheet" type="text/css" href="views/css/style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script type="text/javascript" src="controller.js"></script>
</head>
<body ng-app="myApp">
<div id="topheader">
<h1>myApp</h1>
</div>
<div class="topnav" id="topnavigation">
<a ui-sref-active="active" ui-sref="new">Add poll</a>
<a ui-sref-active="active" ui-sref="polls">All polls</a>
</div>
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
polls.html
<div class="content">
<h2>View your polls!</h2>
<div class="allPolls" ng-repeat="item in result.data.polls">
<li> {{item.title}}
</li>
</div>
</div>
newPoll.html
<div class="content">
<form>
Title: <br><input type="text" name="title"><br>
Options (add line break between options): <br>
<textarea type="text" name="options">
</textarea>
<br>
<button type="button">Create new poll</button>
</form>
</div>
So now when I press the "Add poll"-button from the polls-page the page loads a page where is only the topnavigation-bar. When I press the "Add poll"-button again, the page loads the form from newPoll.html.
The url changes on the first click so everything should be working on the first click?
Can't able to understand where I made a mistake kindly let me know what's my mistake in the procress of learning :-)
Here this code is implementing to upload a file.
It's a syntax error else any coding error
(function() {
var app = angular.module("mode", ['ngFileUpload']);
app.controller("simCntrl", ['$scope', '$timeout', 'Up-load', function($scope, $timeout, Upload) {
// $scope.var = 10;
$scope.loadFile = function(files, errFiles) {
// alert('hi loaded');
$scope.files = files;
$scope.errFiles = errFiles;
angular.forEach(files, function(file) {
file.upload = Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {
file: file
}
});
file.upload.then(function(response) {
$timeout(function() {
file.result = response.data;
});
}, function(response) {
if (response.status > 0) {
$scope.errorMsg = response.status + ':' + response.data;
}
}, function(evt) {
file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
});
}
}]);
})();
<!DOCTYPE html>
<html lang="en">
<head ng-app="mode">
<meta charset="utf-8">
<title>file Upload</title>
<link rel="stylesheet" type="text/css" href="file.css">
<script type="text/javascript" src="https://opensource.keycdn.com/angularjs/1.6.2/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<script type="text/javascript" src="C://wamp/www/fileUpload/ng-file-upload-shim.js"></script>
<script type="text/javascript" src="C://wamp/www/fileUpload/ng-file-upload.js"></script>
<script type="text/javascript" src="upload.js"></script>
</head>
<body ng-controller="simCntrl">
<h4> file Upload </h4>
<button ngf-select="loadFile($files, $invalidFile)" multiple ngf-max-size="1MB">Choose your File</button>
<br/> <br/>
Files:
<ul>
<li ng-repeat="f in fiels" style="font: smaller"> {{f.name}} {{f.$errorParam}}
<span class="progress" ng-show="f.progress >= 0">
<div style="width: {{f.progress}}% " ng-bind="f.progress + '%' "></div>
</span>
</li>
<li ng-repeat="f in errFiles" style="font: smaller"> {{f.name}} {{f.$error}} {{f.$errorParam}} </li>
</ul>
</body>
</html>
Getting output as Expressions as follows...
{{f.name}} {{f.$errorParam}}
{{f.name}} {{f.$error}} {{f.$errorParam}}
Fixed your file system links, the wrong module dependency Up-load and a typo fiels instead of files.
You got the {{}} curly braces because your app didn't bootstrap, it was waiting for the dependencies it didn't get.
var app = angular.module("mode", ['ngFileUpload']);
app.controller("simCntrl", ['$scope', '$timeout', 'Upload', function($scope, $timeout, Upload) {
$scope.loadFile = function(files, errFiles) {
$scope.files = files;
$scope.errFiles = errFiles;
angular.forEach(files, function(file) {
file.upload = Upload.upload({
url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
data: {
file: file
}
});
file.upload.then(function(response) {
$timeout(function() {
file.result = response.data;
});
}, function(response) {
if (response.status > 0) {
$scope.errorMsg = response.status + ':' + response.data;
}
}, function(evt) {
file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
});
}
}]);
<script type="text/javascript" src="https://opensource.keycdn.com/angularjs/1.6.2/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<script type="text/javascript" src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script>
<script type="text/javascript" src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script>
<body ng-app="mode" ng-controller="simCntrl">
<h4> file Upload </h4>
<button ngf-select="loadFile($files, $invalidFile)" multiple ngf-max-size="1MB">Choose your File</button>
<br/> <br/>
Files:
<ul>
<li ng-repeat="f in files" style="font: smaller"> {{f.name}} {{f.$errorParam}}
<span class="progress" ng-show="f.progress >= 0">
<div style="width: {{f.progress}}% " ng-bind="f.progress + '%' "></div>
</span>
</li>
<li ng-repeat="f in errFiles" style="font: smaller"> {{f.name}} {{f.$error}} {{f.$errorParam}} </li>
</ul>
</body>
Main page URL: http://localhost:3000/
Current second page URL: http://localhost:3000/#/titleDetails.html
Expected second page URL: http://localhost:3000/titleDetails.html
Currently when I click on the title in my main page, the URL contains an extra /# which causes the page to be redirected to titleDetails.html.
The directory of titleDetails.html and index.html is in the same directory.
May I know how can I fix this?
Original Post: AngularJS Display 1 Post in New Page
app.js
(function () {
angular
.module("BlogApp", [])
.config(function($locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
})
.controller("BlogController", BlogController);
function BlogController($scope, $http, $rootScope, $location) {
$scope.createPost = createPost;
$scope.deletePost = deletePost;
$scope.editPost = editPost;
$scope.updatePost = updatePost;
$scope.titleDetails = titleDetails;
$scope.postDetail = null;
function init() {
getAllPosts();
}
init();
function titleDetails(post)
{
$scope.postDetail = post;
$location.path('/titleDetails.html');
}
function updatePost(post){
console.log(post);
$http
.put("/api/blogpost/"+post._id, post)
.success(getAllPosts);
}
function editPost(postId){
$http
.get("/api/blogpost/"+postId)
.success(function(post){
$scope.post = post;
});
}
function deletePost(postId){
$http
.delete("/api/blogpost/"+postId)
.success(getAllPosts);
}
function getAllPosts(){
$http
.get("/api/blogpost")
.success(function(posts) {
$scope.posts = posts;
});
}
function createPost(post) {
console.log(post);
$http
.post("/api/blogpost",post)
.success(getAllPosts);
}
}
})();
index.html
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<input ng-model="post.title" class="form-control" placeholder="title"/>
<textarea ng-model="post.body" class="form-control" placeholder="body"></textarea>
<button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>
<button ng-click="updatePost(post)" class="btn btn-success btn-block">Update</button>
<div ng-repeat="post in posts">
<h2>
<a ng-click="titleDetails(post)">{{ post.title }} </a>
<a ng-click="editPost(post._id)" class="pull-right"><span class="glyphicon glyphicon-pencil"></span></a>
<a ng-click="deletePost(post._id)" class="pull-right"><span class = "glyphicon glyphicon-remove"></span></a>
</h2>
<em>{{post.posted}}</em>
<p>{{post.body}}</p>
</div>
</div>
</body>
</html>
titleDetails.html:
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<div>
<h2>
<a>{{ postDetail.title }} </a>
</h2>
<em>{{postDetail.posted}}</em>
<p>{{postDetail.body}}</p>
</div>
</div>
</body>
</html>
Console Error in index.html:
angular.js:13708 Error: [$location:nobase] http://errors.angularjs.org/1.5.7/$location/nobase
at angular.js:38
at sf.$get (angular.js:13384)
at Object.invoke (angular.js:4709)
at angular.js:4508
at d (angular.js:4655)
at e (angular.js:4679)
at Object.invoke (angular.js:4701)
at R.instance (angular.js:10234)
at m (angular.js:9147)
at g (angular.js:8510)
Angular has 3 routing operates:
Hashbang Mode
HTML5 Mode
Hashbang in HTML5 Mode
You can configure: $locationProvider.html5Mode(true).hashPrefix('!');
Check documentation
I have the error of angular "Error: ng:areq Bad Argument", the thing here is that if I put the javascript code directly in the html, as bellow, there is no mistake and it works, but when the same code is called from another file then is where the error appears.
<!DOCTYPE html>
<html lang="en" ng-app="aplicacion" >
<head>
<meta charset="UTF-8">
<title>Cuestionarios y así</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<!-- <script type="text/javascript" src="prueba.js"></script> -->
<script type="text/javascript">
var aplicacion = angular.module('aplicacion', []);
aplicacion.controller('cuestionacio', function($scope, $http, $document) {
$scope.preguntas = [];
$scope.cargaCuestionario = function(){
$http({
method: 'GET',
url: 'http://localhost:8000/serv/pregunticas/?format=json'
}).
success(function(data) {
console.log('ESto');
console.log(datos);
}).
error(function(datos) {
console.log(datos);
alert('Error obtienedo el cuestionario');
});
};
});
</script>
</head>
<body>
<div ng-controller="cuestionacio" ng-init="cargaCuestionario()">
<div ng-repeat="item in preguntas">
<p>{{item.pregunta}}</p>
<br>
<div ng-if="{{item.tipo}}">
<select ng-repeat>
</select>
</div>
</div>
<div>
<p>calendario</p>
<br>
<p>mapa</p>
</div>
</div>
</body>
</html>
I hope someone can help me with this. Thanks
P.S. Sorry for the horrible english.
I followed tutorial on this LINK to create AJAX requests on my angularJS appliction (CRUD operations). After I finished coding I tried to perform AJAX request (get all data from database) but when I lunch my application I got this error:
TypeError: undefined is not a function
at new <anonymous> (http://localhost:49510/Scripts/application/controllers.js:4:15)
Does someone knows where's the problem and how to fix it?
Here is code:
controller:
app.controller('ContactsController', [
'$scope', '$http', '$location', 'contactsService',
function ($scope, $location, $http, contactsService) {
$http.get('/contacts/').success(function (data) { //triggers error
alert(data);
$scope.contact = data;
$scope.loading = false;
})
.error(function () {
alert ("An Error has occured while loading contacts!");
// $scope.loading = false;
});
$scope.editContact = function (id) {
$location.path('/edit-contact/' + id);
};
$scope.displayContact = function (id) {
$location.path('/display-contact/' + id);
};
$scope.showDetails = function (id) {
var el = angular.element(document.getElementById('#ct-details-' + id));
el.toggleClass('details-hidden');
}
}
]);
and here is contacts.html template:
<div class="container view">
<header>
<h3>Contacts</h3>
</header>
<div>
<a class="nav-pills hover" href="#/add-contact">Add Contact</a>
</div>
<br /><br />
<div class="row">
<ul class="span5" >
<li class="nav-pills nav-stacked contact-row" data-ng-repeat="contact in contacts | orderBy:'firstName'">
<span id="ct-details-{{contact.id}}" data-ng-click="displayContact(contact.id)" style="cursor:pointer;" class="contact-data details-hidden" href="" >
<span class="span3 contact-name" >{{contact.firstName + ' ' + contact.lastName}}
{{contact.emailAddress}}</span>
</span>
<button class="btn editContact" data-ng-click="deleteContact(contact.id)">Delete</button>
<button class="btn editContact" data-ng-click="editContact(contact.id)">Edit</button>
</li>
</ul>
</div>
</div>
and here is index.cshtml file:
<!DOCTYPE html>
<html ng-app="contactsManager">
<head>
<title>Contacts</title>
</head>
<body>
<div class="navbar navbar-top">
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/custom.css" rel="stylesheet" />
<div class="navbar-inner">
<div class="container">
<h2>Contacts</h2>
</div>
</div>
</div>
<div ng-view class="example-animate-container"
ng-animate="{enter: 'example-enter', leave: 'example-leave'}"></div>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/application/application.js"></script>
<script src="~/Scripts/application/controllers.js"></script>
<script src="~/Scripts/application/contactsService.js"></script>
</body>
</html>
The order of arguments in the controller function has to match the order in the parameter array.
You have mixed the order of $http and $location.
So change your function signature to
app.controller('ContactsController', [
'$scope', '$http', '$location', 'contactsService',
function ($scope, $http, $location, contactsService) {