Angular App doesn't work when injecting a pagination dependency - javascript

I'm building a simple Sigle Page Application with AngularJs, which retrieves data stored on a server-based application. When I try to inject the pagination directive, the application doesn't work, where it shows only the navigation bar.
I've followed this tutorial.
Moreover, the console doesn't show any error.
Below are the files where I'm trying to implement the pagination:
main.html:
<div class="page-header">
<h2 id="tables">Pagination in Angular Js</h2>
</div>
<div ng-controller="UsersList">
<table class="table striped">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Created At</th>
<!--<th>Status</th>-->
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users | itemsPerPage: pageSize" current-page="currentPage">
<td>{{user.last_name}}</td>
<td>{{user.first_name}}</td>
<td>{{user.created_at}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls boundary-links="true" max-size="10" template-url="app/main/dirPagination.tpl.html"></dir-pagination-controls>
</div>
main.js:
angular.module('Js-Users-App', ['angularUtils.directives.dirPagination']).controller('UsersList', UsersList);
UsersList.$inject = ['$scope', 'userDataFactory', 'angularUtils.directives.dirPagination'];
function UsersList($scope, userDataFactory){
$scope.users = [];
$scope.currentPage = 1;
$scope.pageSize = 10;
// Get the list of users
userDataFactory.userList().then(function(response) {
$scope.users = response.data;
});
}
user-data-factory.js:
angular.module('Js-Users-App').factory('userDataFactory', userDataFactory);
function userDataFactory($http) {
return {
userList: userList
};
function userList() {
return $http.get("users.json").then(complete).catch(failed);
}
function complete(response) {
return response;
}
function failed(error) {
console.log(error.statusText);
}
}
dir-paginate is declared in the file below:
<html ng-app="Js-Users-App">
<head>
<meta charset="utf-8">
<title>Js Users</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#/" class="brand-logo">Js Users</a>
<ul class="right hide-on-med-and-down">
<li>Add</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Add</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<div class="container">
<div ng-view></div>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/materialize-css/dist/js/materialize.min.js"></script>
<!--<script src="js/ui-bootstrap-2.5.0.min.js"></script>-->
<script src="js/dirPagination.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/main/main.js"></script>
<script type="text/javascript" src="app/user-data-factory/user-data-factory.js"></script>
</body>
</html>
And the script is located inside the js folder.
The application is running on a simple web server, started with python -m SimpleHTTPServer.
I can't find the problem. Also because I still don't know how to debug very well. Is it because the application is not loading the new directive? Thanks.
UPDATE 1
I've made a plunk to show you the project structure and the entire code: http://plnkr.co/edit/LoICEnE5nkwLDvsu7URD

ng-app shouldn't be defined on <html> element, unless proven otherwise. This can result in undesirable behaviour when jQuery is loaded.
jQuery should be loaded before Angular and other dependencies that may use of it (Materialize).
Js-Users-App module is being redefined:
angular.module('Js-Users-App', ['angularUtils.directives.dirPagination']).controller('UsersList', UsersList);
This eliminates router configuration, so the application does nothing. The module should be defined once, with all module dependencies:
angular.module("Js-Users-App", ["ngRoute", 'angularUtils.directives.dirPagination'])
After that angular.module("Js-Users-App") should be used only as a getter (no second argument).
UsersList controller injects angularUtils.directives.dirPagination for no good reason, this will result in error because there's no such service - it's a directive. It should be omitted.

Related

Home and a List page

What i want to do is pass from my home application to a list. I have the list and my home on different .js files, but now, how can i show first my home, and then, with one click, send to the list?
My files, next. First the home code and view:
home-component.js
(function(){
'use strict';
var home = {
templateUrl: './app/components/list-component/home-component/home.html',
controller: homeCtrl
};
angular
.module('payApp')
.component('home', home);
function homeCtrl(){
var home = this;
}
})();
home.html
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-lg-7">
<div class="title">
<h3><strong>¡Welcome!</strong></h3>
</div>
<br>
<div class="col-md-6 .col-md-offset-3">
<button class="btn btn-success" ng-click="">Start</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Then, my list files.
payment-component.js
(function(){
'use strict';
var pays = {
templateUrl: './app/components/list-component/paymentcompo.html',
controller: payCtrl
};
angular
.module('payApp')
.component('payInvoice', pays);
payCtrl.$inject = ["$scope"];
function payCtrl($scope){
}
})();
It's html view:
paymentcompo.html
<table class="table table-hover">
<thead>
<tr>
<th>Payment Number</th>
<th>Name</th>
<th>Tax Id</th>
</tr>
</thead>
<tbody>
<tr id="pool" ng-repeat="info in list | filter: search">
<th>{{info.Id}}</th>
<th>{{info.name}}</th>
<th>{{info.taxId}}</th>
</tr>
</tbody>
</table>
And, in the end, my index.html:
<!DOCTYPE html>
<html lang="en" ng-app="payApp">
<meta charset="UTF-8">
<title>Pay This</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/componentes/css/pay-style.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<head>
</head>
<body>
<pay-Invoice></pay-Invoice>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-popover.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.min.js"></script>
<script src="app/payapp.js"></script>
<script src="app/components/list-component/payment-component.js"></script>
<script src="app/components/list-component/home-component/home-component.js"></script>
<script src="app/factory/pay-factories.js"></script>
<script src="app/routes/routes.js">
</body>
</html>
I'd read that i need also use ngRoute, so i added and create my routes.js.
EDITED
This is my routes.js code:
(function(){
'use strict';
angular
.module('payApp')
.config(config);
config.$inject = ["$routeProvider","$locationProvider"];
function config($routeProvider, $locationProvider){
$routeProvider
.when('/home',{
template: '<home></home>',
})
.when('/listado',{
template: '<pay-invoice></pay-invoice>',
})
.otherwise({
redirectTo: '/home',
});
$locationProvider.html5Mode(true);
}
})();
I need to pass two things:
The home view, because is the very first thing i need to show.
The list view, which will be triggered by the button on the home view.
How can i do that? What other thing i need to do on the index.html? Hope you can help me.
If you are using angular-route you need to create container div in your main html file.
So instead of
<pay-Invoice></pay-Invoice>
in your index html file place a container component:
<div ng-view></div>
This will tell ngRoute that it should mount route components to this container and swich it when location changes
More about it: https://docs.angularjs.org/api/ngRoute/directive/ngView

Can AngularJS be used with jQuery bootgrid?

After 2 days reading all topics about jQuery Bootgrid and AngularJS, I still can't use angular directives on my generated grid.
I'm using AngularJS 1.6.6 and jQuery Bootgrid 1.3.1. The page that is using it is running fine and all the elements outside the grid are working with angular directives. All the elements are inside the right ng-app and ng-controller tagged root.
The problem is that I have some buttons inside the grid and they are all losing their events like onclick, tooltips, etc. So I wanted to map them using ng-click instead of the jQuery .click(function () {}).
There are no error messages, only the events are just not firing.
All functions pointed inside the directives are declared on my scope.
I'm almost concluding that the jQuery Bootgrid isolates its own scope and avoid angular to get into it. Does that proceed?
<html lang="en">
<head>
<title>Example - jQuery Bootgrid and Angular</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<link href="https://cdn.bootcss.com/jquery-bootgrid/1.3.1/jquery.bootgrid.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.6.6/angular.min.js"></script>
<script>
var app = angular.module('app', []).controller('appController', ['$scope', function ($scope) {
$scope.test = function () {
alert('Clicked!');
}
$("#grid-basic").bootgrid({
templates: {
search: '<div class="search form-group"><div class="input-group"><span class="icon glyphicon input-group-addon glyphicon-search"></span> <input type="text" ng-click="test()" class="search-field form-control" placeholder="Pesquisar"></div></div>'
}
});
}]);
</script>
</head>
<body ng-app="app" ng-controller="appController">
<br />
<br />
<div class="btn btn-primary" ng-click="test()">Test</div>
<br />
<br />
<table id="grid-basic" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">id</th>
<th data-column-id="sender">e-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>xxx#yyy.com</td>
</tr>
<tr>
<td>2</td>
<td>www#yyy.com</td>
</tr>
<tr>
<td>3</td>
<td>zzz#yyy.com</td>
</tr>
</tbody>
</table>
</body>
</html>
First you must have a function (eg ngFunction) and then try:
<button id="something" ng-click="ngFunction(doSomething)">
Since there was no definitive answer I changed my component and stopped looking for this compatibility issue. I still think that there was a way to attach the grid plugin to my angularjs scope, but time is not on my side here.

JQuery always loads before AngularJS document

I am using AngularJS to display results of my API (my first attempt at AngularJS), and want to use Jquery to add some effects to the page.
The problem is, Jquery seems to load before Angular has time to add images and other elements to the page. This prevents the JQuery effects from working I have been through numerous answers and tutorials, which center around the following solutions, none of which have worked for me.
Another approach suggested was to put the JQuery into "directives", but how would I put the contents of 3 large javascript libraries into an AngularJS directive? Sorry, I'm new in Javascript!
Here are the unsuccessful attempts:
$(window).load(function() {
// load JQuery plugins
$.getScript("./js/plugins.all.min.js");
});
<!-- after Angular is loaded !-->
angular.element(document).ready(function () {
// load JQuery plugins
$.getScript("./js/plugins.all.min.js");
});
<!-- after Jquery-main is loaded !-->
$(document).ready(function() {
// load JQuery plugins
$.getScript("./js/plugins.all.min.js");
});
Here are the relevant extracts of my code:
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>MyWebpage</title>
<!-- Template includes !-->
<link media="all" rel="stylesheet" href="./css/slider-revolution.css">
<link media="all" rel="stylesheet" href="./css/all.css">
<link media="all" rel="stylesheet" href="./css/style.css" class="color">
</head>
<body ng-app=“myApp">
<div ui-view></div>
</body>
<!-- Application Dependencies -->
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/build/angular-ui-router.js"></script>
<!-- Template scripts !-->
<!-- Application Scripts -->
<script src="scripts/app.js"></script>
<script src="scripts/indexController.js"></script>
app.js :
...
state('index', {
url: '/',
templateUrl: '../views/indexView.html',
controller: 'IndexController as user'
...
indexView.js
...
<!— JQuery plugin gallery -->
<div class="gallery responsive">
<div class="mask" ng-if=“myStuff.banner">
<ul class="slideset">
<ul style="margin:0px; padding:0px">
<li class="slide" data-transition="slidedown" data-slotamount="10" data-masterspeed="300" data-thumb="" ng-repeat="banner in user.banner" width="300">
<! -- load a big ol’ picture !—>
<img ng-src="../../storage/img/{{banner.image.image_url}}">
<div class="caption text-box lfl lfl" data-x="-91" data-y="140" data-speed="300" data-start="800" data-easing="easeOutExpo">
<h1><span>{{banner.banner_title}}</span></h1>
<a class="more" href="{{banner.banner_link}}">READ MORE</a>
<div style="" class="tp-leftarrow tparrows default"></div>
<div style="" class="tp-rightarrow tparrows default"></div>
</div>
</li>
</ul>
</div>
</div>
...
indexController.js:
...
// gets all the data from my API, including image src
vm.getMyStuff = function() {
$http.get('http://localhost:8888/api/public/myapistuff).success(function(myStuff) {
vm.myStuff = myStuff;
}).error(function(error) {
vm.error = error;
});
}
}
})();
$(window).load(function() {
// load JQuery plugins
$.getScript("./js/plugins.all.min.js");
});

How do you get the Kendo UI Barcode to render in Kendo Mobile app

I am trying to figure out how to use a jQuery plugin with the Kendo UI template.
I have an index.html that calls a views/home.html file. Then there is a home.js file that controls some functionality for the home.html using a model.
I am trying to use a jQuery barcode plugin. We are dynamically getting data from our service and outputting the data (although right now I am just trying to hardcode values). How would I get the jQuery plugin to work with the Kendo UI template code.
My code is below.
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/home.js"></script>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<!--Need to add back button and mail center buttons-->
<span data-role="view-title"></span>
<a data-role="button" data-align="right" href="views/messagecenter.html" class="nav-button"><i class="fa fa-envelope-o"></i></a>
<i class="fa fa-bars"></i>
</div>
</div>
</head>
home.html
<div data-role="view" data-layout="main" data-model="app.MemberInfo" data-title="Home" >
<div id="MemberCardHeader">
<div data-template="memberTemplate" data-bind="source: MemberInfo">
<!--Member card x-kendo-template id="memberTemplate" renders here-->
</div>
</div>
</div>
<script type="text/x-kendo-template" id="memberTemplate">
<div id="memberCard">
<!--Barcode should render here-->
<div id="Barcode"></div>
</div>
</script>
home.js
var app = app || {};
app.MemberInfo = (function (){
/*Barcode code*/
/*HOW DO I GET THIS TO WORK WITH KENDO UI CODE ABOVE*/
$("#Barcode").kendoBarcode({
value:"288288",
type:"ean8"
});
}());
you can instantiate the widget in the init event of the view:
http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/view#events-init.

How to pass data from one page to other page in angular js

I have created a new blog project using angular-js. Here I have one page listing all the blogs and if I click on the edit button or delete button, I want to move to next page and show that data in the form from where I updated the blog.
My blog list page: listblog.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First AngularJs Blog</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/blog-home.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="blogapp">
<!-- Navigation -->
<div ng-include="'includes/header.html'">
</div>
<!-- Page Content -->
<div class="container">
<div ng-controller="blogcontroller">
<h2>Blog List</h2>
<p>Here is the awsome blog list</p>
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>Blog</th>
<th>Posted On</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="blg in allblog">
<td>{{blg.title}}</td>
<td>{{blg.description}}</td>
<td>{{blg.created_on }}</td>
<td>Edit || Delete</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr>
<!-- Footer -->
<div ng-include="'includes/footer.html'">
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="controller.js"></script>
</body>
</html>
I want to create a controller for edit.
My Controller file: controller.js
var myApp = angular.module("blogapp", []);
myApp.controller('blogcontroller',function ($scope,$http){
$http({method: 'GET' , url: 'getallblog.php'}).success(function(data){
$scope.allblog = data;
});
$scope.new_post =function(){
$http.post("addblog.php" ,{'title' : $scope.title ,'description' : $scope.description }).success(function(data,status,headers,config){
window.location='index.html';
console.log("inserted Successfully");
});
} ;
$scope.editpost = function(index){
$http.post('allscript.php?action=edit_post', { 'id' : index})
.success(function (data, status, headers, config){
})
.error(function (data, status, headers, config){
console.log(status);
});
}
});
And my php script page where all operations are performed
allscript.php
<?php
$user ="root";
$pass ="m2n1shlko";
$dbh = new PDO('mysql:host=localhost;dbname=blog_db', $user, $pass);
switch($_GET['action']){
case 'edit_post':
edit_post();
break;
function edit_post(){
$data = json_decode(file_get_contents("php://input"));
$index = $data->id;
$query = $dbh->prepare("SELECT * FROM blog_list where id='$index'") ;
$da = $query->execute();
$getre = $da->fetch(PDO::FETCH_ASSOC);
print_r(json_encode($getre));
return $getre;
}
}
?>
I am new in angular-js. I don't know how to get the ID of that record and to take to the next page for edit/update/delete.
Any help is appreciated.
Thanks.
Actually the #Jeremy Thille is right... Please check angular ngRoute module for more info https://docs.angularjs.org/tutorial/step_07. Also the good practice is to refactor all of your connections/post/get in factories/services, and to inject them directly on your controllers (where you needs of them) http://viralpatel.net/blogs/angularjs-service-factory-tutorial/
Good luck.
you can use to save data between different page
$window.sessionStorage

Categories