I am using express js framework. I am not able to include javascript file in ejs page.
//This is my index.ejs page
<!DOCTYPE html>
<html>`
<head>
<script type='text/javascript' src= "order.js"></script>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body ng-app="myApp" ng-controller="orderCtrl">
<div class="container">
<table class="table table-striped">
<thead><tr>
<th>Item Name</th>
<th>Price</th>
</tr></thead>
<tbody><tr ng-repeat="user in users">
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr></tbody>
</table>
</div>
</body>
</html>
//This is my JavaScript page order.js which should connect to index.ejs
var app = angular.module('myApp', []);
angular.module('myApp', []).controller('orderCtrl', function($scope) {
$scope.message = 'Hello World!';
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{ fName:'Hege',lName:"Pege" },
{ fName:'Kim',lName:"Pim" },
{ fName:'Sal',lName:"Smith" },
{ fName:'Jack',lName:"Jones" },
{ fName:'John',lName:"Doe" },
{ fName:'Peter',lName:"Pan" }
];
})
I am not able to display the data here {{ user.fName }}. Could someone please help.
You have to include angular in your HTML inside the head in a script tag :
<script type='text/javascript' src= "anularpath/angular.js"></script>
you can use angular cdn in your case if you dont have the file locally like this :
<head>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
and you should move your order.js file script tag to the bottom of the body right before you close the body tag. like this :
<script type='text/javascript' src= "order.js"></script>
</body>
</html>
Related
I'm making a web page with a table that reads excel files. Following this example here: https://www.youtube.com/watch?v=OK60UdWyUdE. In this project, I use angular, jQuery, HTML, and Javascript.
Here is a sample of a excel file:
User Name |User ID
Jack Sparrow |U382
Pikachu |U712
Sonic |U555
Mario |U153
Godzilla |U999
James Bond |U007
Ethan Hunt |U053
This is my HTML file:
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<div>
<div>
<h1>Excel Reader</h1>
</div>
<div id="image">
<img src="432-433.png" width="450" height="300">
</div>
</div>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="customjs.js"></script>
<script src="xlsx.full.min.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body ng-controller='MyController'>
<div>
<form enctype="multipart/form-data">
<input type="file" id="file">
<button type="submit" value='submit' ng-click="uploadExcel()">Upload File</button>
</form>
</div>
<div>
<table id="myTable">
<thead>
<tr>
<th>User Name</th>
<th>User ID</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
And this is my Javascript file:
(function () {
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', myController]);
var excelObj=[];
function myController($scope)
{
$scope.uploadExcel=function()
{
var myFile=document.getElementById ('file');
var input=myFile;
var reader = new FileReader();
reader.onload=function(){
var fileData=reader.result;
var workbook=XLSX.read(fileData,{type: 'binary'});
workbook.SheetNames.forEach(function(sheetName)
{
var rowObject=XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
excelObj=rowObject;
});
for(var i=0;i<excelObj.length;i++)
{
var data=excelObj[i];
$('#myTable tbody:last-child').append("<tr><td>"
+data.User_Name+"</td><td>"
+data.User_ID
+"</td></ tr>");
}
};
reader.readAsBinaryString(input.files[0]);
}
}
})();
I was supposed to let the HTML table display the same data, but all the data ended up undefined. Here is what my table actually displayed:
User Name |User ID
undefined |undefined
undefined |undefined
undefined |undefined
undefined |undefined
undefined |undefined
undefined |undefined
undefined |undefined
What did I miss? How can I fix this issue?
Thanks in advance!
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.
I'm a newbie with AngularJS i want to retrive all products in an html page but it shows nothing even if '/allProd' works perfectly without angular
app.js
var app=angular.module('crm',[]);
app.controller('CRMController', function($scope,$http){
$scope.products=[];
$http.get('/allProd')
.then(function(data){
$scope.products=data;
});
});
index.html
<html data-ng-app="crm" >
<head>
<meta charset="ISO-8859-1">
<title>Catalog</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.4-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body data-ng-controller="CRMController">
<table class="table">
<thead>
<tr>
<th> REF </th><th> DES </th><th> PRICE </th>
</tr>
</thead>
<tbody >
<tr data-ng-repeat="p in products.content">
<td>{{p.reference}}</td>
<td>{{p.designation}}</td>
<td>{{p.price}}</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="angular/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
What i got
PS: I'm using angular 1.5.6 and spring-boot 1.5.2.RELEASE
According to the documentation for $http the actual response body is in the data property of the response.
$http.get('/allProd')
.then(function(response){
$scope.products = response.data;
});
You will have to do
$scope.products = response.data
Also in your ng-repeat you have to mention an array, but it seems your initialization and assignment are not in sync for $scope.products in the controller.
If response.data.products is not an array, there is no point declaring $scope.products as an array
It is because data received on success has another property called data inside, which actually holds the required Products data.
try changing the code to
var app=angular.module('crm',[]);
app.controller('CRMController', function($scope,$http){
$scope.products=[];
$http.get('/allProd')
.then(function(data){
$scope.products=data.data;
});
});
After changing in your .js file:
$scope.products=data.data;
Then, change your .html file from "p in products.content"
to the following:
"p in products"
You don't need .content. because .content is no part of data structure.
Trying to make a crud app with ionic. But when I run my app, it can't show data. The error is:
Uncaught ReferenceError: app is not defined
at http://localhost:8100/controller/controller.js:1:1
Uncaught ReferenceError: app is not defined
at http://localhost:8100/controller/edit.js:1:1
Uncaught ReferenceError: app is not defined
at http://localhost:8100/js/route.js:1:1
Uncaught Error: [$injector:modulerr] Failed to instantiate module
myAPP due to:(…)
Can anyone help me please?
index :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="myAPP">
<ion-pane>
<ion-header-bar class="bar-stable">
</ion-header-bar>
<ion-content>
<div class="tabs-striped tabs-top">
<div class="tabs">
<a class="tab-item" href="#/">List</a>
<a class="tab-item" href="#/addData">Add Data</a>
<a class="tab-item" href="#/editData">Edit Data</a>
</div>
</ion-content>
<div class="container">
<h2>{{title}}</h2>
</br>
</br>
<table class="table table-striped" ng-init="getData()">
<tr>
<th>NO</th>
<th>Nama</th>
<th>Alamat</th>
<th>Action</th>
</tr>
<tr ng-repeat="x in dataList">
<td>{{$index+1}}</td>
<td>{{x.nama}}</td>
<td>{{x.alamat}}</td>
<td>
<button type="button" class="btn btn-info" ng-click="edit(x.id)">Edit</button>
<button type="button" class="btn btn-danger" ng-click="delete(x.id)">Delete</button>
</td>
</tr>
</table>
</div>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="controller/controller.js"></script>
<script src="controller/edit.js"></script>
<script src="js/route.js"></script>
</ion-pane>
</body>
</html>
controller :
app.controller("controller",['$scope','$http', function($scope,$http){
console.log('hello world');
$scope.title = 'Data List';
$scope.action = "add";
$scope.listData = {};
$scope.dataList;
$scope.getData = function(){
$http.get(
'/data/getdata.php'
).success(function(data){
$scope.dataList = data;
});
};
$scope.delete = function(id){
$http.post(
'/data/delete.php',
{
id:id
}
).success(function(){
$scope.getData();
}).error(function(){
alert("Gagal");
});
};
$scope.add = function(){
$http.post(
'/data/add.php',
{
data: $scope.listData
}
).success(function(data){
//alert(data);
$scope.action = "add";
$scope.getData();
window.location.href = 'index.html';
}).error(function(){
alert("Gagal menyimpan data");
});
};
$scope.edit = function(index){
//var index = getSelectedIndex($index);
window.location.href = '#/editData/'+index;
// $scope.listData.nama = $scope.dataList[index].nama;
// $scope.listData.alamat = $scope.dataList[index].alamat;
}
function getSelectedIndex($index){
for (var i = 0; i < $scope.listData.length; i++) {
if($scope.listData[i].index===index);
return i;
}
return -1;
}
}]);
route :
app.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/',{
templateUrl : '/pages/list.html',
controller : 'controller'
})
.when('/addData',{
templateUrl : '/pages/addData.html',
controller : 'controller'
})
.when('/editData/:id',{
templateUrl : '/pages/update.html',
controller : 'controllerEdit'
})
.otherwise({
redirectTo : '/'
});
}]);
module :
var app = angular.module('myAPP', ['ionic'],['ngRoute'])
i think missing ng-controller="myctrlname" directive inside of html.
<body ng-app="myAPP" ng-controller="myctrlname">
Your module declaration is wrong. It should be like this
angular.module('myAPP', ['ionic','ngRoute'])
The variable named app will not exist unless you create it. Once the module has been created in your module file, you can retrieve it at the top of your other files like this:
var app = angular.module('myAPP');
I faced same problem
then
Only removed 'starter.controllers'
var app = angular.module('starter', ['ionic', 'starter.controllers']);
replace with
var app = angular.module('starter', ['ionic']);
I am learning AngularJS and ended up with the following code for ToDoList basic app. I viewed it in a browser it didn't work. I am new to the Angular and mightn't get obvious things, so I thought if my app name is
todoApp
Then I should put
$scope.todoApp
instead of
$scope.todo
but turned out that's not an issue.
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To DO List</title>
<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-theme.css" rel="stylesheet>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var model = {
user: "Adam",
items: [{ action: "Buy flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
};
var todoApp = angular.module("todoApp", []);
todoApp.controller("ToDoCtrl", function($scope) {
$scope.todo = model;
});
</script>
</head>
<body ng-controller="ToDoCtrl">
<div class="page-header">
<h1>
{{todo.user}}'s To Do List
<span class="label label-default">{{todo.items.length}}</span>
</h1>
</div>
<div class="panel">
<div class="input-group">
<input class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default">Add</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in todo.items">
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done" /></td>
<td>{{item.done}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
That's what I get in a browser..
And that's what I guess I am supposed to get...
Why it doesn't work?
Your HTML getting invalid because you are missing " in link tag's rel attribute. Here you are missing:
<link href="bootstrap-theme.css" rel="stylesheet>
^ ==> missing "
Working DEMO /* updated css */
Have a look at Invalid HTML in DEMO. Here you can see after link tag HTML is colored green.