I'm new to angular js. Trying to use Angular Routing to show data from the database on a list page and a detail page. There is a table call employees in the database, I'm trying to use Angular Js $http service to display the list of employees and users can click each list to view details. I got it to listing results on the table.html page but it's not outpouring results on the view.html page. Any help, please? Thanks
Here is the angular script.
/* App Module */
var employeeApp = angular.module('employeeApp', [
'ngRoute',
'tableControllers'
]);
/* Controllers */
var tableControllers = angular.module('tableControllers', []);
tableControllers.controller('ListCtrl', ['$scope', '$http',
function($scope, $http) {
$http.get('data/json.php').success(function(data) {
$scope.employees = data;
});
}]);
tableControllers.controller('DetailCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
$http.get('data/json.php').success(function(data) {
$scope.employee = data;
});
}]);
employeeApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page', {
templateUrl: 'pages/table.html',
controller: 'ListCtrl'
}).
when('/page/:employee_id', {
templateUrl: 'pages/view.html',
controller: 'DetailCtrl'
}).
otherwise({
redirectTo: '/page'
});
}]);
Here is the Index File
<!DOCTYPE html>
<html lang="en" ng-app="employeeApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Graphic Editor</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<header></header>
<section>
<div class="container">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Here is the view page
<table width="500" class="table table-striped table-bordered">
<tbody>
<tr>
<td width="22%">Name</td><td width="22%">{{employee.firstName}} {{employee.firstName}}</td>
</tr>
<tr>
<td>employee</td><td>{{employee.employee}}</td>
</tr>
<tr>
<td>Address</td><td>{{employee.addressLine1}} {{employee.addressLine2}}</td>
</tr>
<tr>
<td>Action</td><td>Edit</td>
</tr>
</tbody>
</table>
<p>{{caption}}</p>
Related
I'm trying to setup an AngularJS application but I keep running into issues when bootstrapping it, I am able to get it run on an express server via node.
But when I go to initiate a controller my developer tools console won't return the console logged hello world in the console.
I can't seem to figure it out as I have (as far as I'm concerned) written it correctly. I have used ng-app as well as as ng-view and tried to instantiate it with ng-controller calling the controller name.
File Structue:
HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Contact List App</title>
</head>
<body>
<div class="container" ng-controller="AppCtrl" ng-view>
<h1>Contact List App</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Number</th>
</tr>
</thead>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
Controller:
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
console.log("Hello World from controller");
}]);
Errors:
EDIT: I have added the server.js code here:
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public' ));
app.listen(3000);
console.log('Server running on 3000');
I'm working on a Angular tutorial that uses the boilerplate Angular-seed and Firebase. The error I am getting is: ReferenceError: Firebase is not defined.
This is my contact.js where my error is being referenced:
'use strict';
angular.module('myContacts.contacts', ['ngRoute','firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/contacts', {
templateUrl: 'contacts/contacts.html',
controller: 'ContactsCtrl'
});
}])
// Contacts Controller
.controller('ContactsCtrl', ['$scope', '$firebaseArray', function($scope, $firebaseArray) {
// Init Firebase
var ref = new Firebase('https://mycontacts-app.firebaseio.com/contacts');
// get Contacts
$scope.contacts = $firebaseArray(ref);
console.log($scope.contacts);
}]);
This is my app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myContacts', [
'ngRoute',
'firebase',
'myContacts.contacts'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/contacts'});
}]);
this is my index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myContacts" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myContacts" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myContacts" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myContacts" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MyContacts App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="large-12 columns">
<h1>myContacts</h1>
<hr>
</div>
</div>
<div ng-view></div>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.js"></script>
<script src="bower_components/foundation/js/foundation.js"></script>
<script src="app.js"></script>
<script src="contacts/contacts.js"></script>
</body>
</html>
this is my contact.html
<div class="row" ng-controller="ContactsCtrl">
<div class="large-10 columns">
<h3>Your Contacts</h3>
<table>
<thead>
<tr>
<th width="200px">Name</th>
<th width="200px">Company</th>
<th width="25%">Email</th>
<th width="25%">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Some Company</td>
<td>sothing#something.com</td>
<td>Edit
Delete</td>
</tr>
</tbody>
</table>
</div>
<div class="small-12 large-2 columns">
+
</div>
</div>
These are all the files that I've changed from the boilerplate angular-seed. If anyone can help I would be grateful.
You are looking at a tutorial that is outdated. Things are a little bit changed with the new version of Firebase.
Things like this:
var app = angular.module('app', ['firebase']);
app.controller('Ctrl', function($scope, $firebaseArray) {
var ref = new Firebase('https://...');
$scope.contacts = $firebaseArray(ref);
...
});
are changed into this:
var app = angular.module('app', ['firebase']);
app.controller('Ctrl', function($scope, $firebaseArray) {
var config = {
apiKey: "***",
authDomain: "***.firebaseapp.com",
databaseURL: "https://***.firebaseio.com",
storageBucket: "***.appspot.com",
messagingSenderId: "***"
};
firebase.initializeApp(config);
var ref = firebase.database().ref().child("contacts");
$scope.contacts = $firebaseArray(ref);
...
});
Of course you need to include firebase.js and angularfire.js into your index.html but you already did that.
I wasn't sure if you just want to read your data from the database or something more but I think this example is enough. Also try to read the official documentation first before you try to implement something from a tutorial (especially an old one). In the world of web development changes are very frequent.
I have an Ionic app that has two views:
Home
Activity
The 'Home' view shows static info with a login screen that takes users to the 'Activity' page where they can see updated info from a $http request to my REST. I can make the call work on a single page, but I dont know where to put the controller when its being used on a view other than the main view and Im unsure how to handle the duplicate specification of the ng-app; its being called in both the 'home' view and the 'activity' view.
Here is my 'Home'
<!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 href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
<!-- Only required for Tab projects w/ pages in multiple tabs
<script src="lib/ionicuirouter/ionicUIRouter.js"></script>
-->
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>
and here is my 'Activity' view:
<ion-view title="Activity">
<ion-content overflow-scroll="true" padding="true" class="has-header">
<div ng-app="app" ng-controller="users">
<div style="width:100%; text-align:center;">
<table class="pure-table">
<thead>
<tr><td>Device ID</td><td>First Name</td><td>Last Name</td><td>Activity</td></tr>
</thead>
<tbody>
<tr ng-repeat="x in names">
<td>{{ x.Regid }}</td><td>{{ x.Fname }}</td><td>{{ x.Lname }}</td><td>{{ x.activity }}</td>
</tr>
<tbody>
</tbody></tbody></table></div>
<button class="button button-full button-light" id="refresh">
Refresh
</button>
</div>
<div class="bar bar-footer bar-stable">
<div class="title"></div>
</div>
<script>
var app = angular.module('app', []);
app.controller('users', function($scope, $http, $interval) {
$http.get("call to REST.php")
.then(function (response) {$scope.names = response.data.records;});
$interval(MyCtrl, 3000);
});
function callAtInterval(){
//console.log("Interval Occured");
//window.location.reload();
//$state.reload();
}
function MyCtrl($scope )
{
$scope.updateFromModel = 'Initial Value';
setTimeout( function()
{
console.log( 'automatically update view?' );
$scope.updateFromModel = "It's been updated";
$scope.$apply();
}, 1000 );
}
$('#refresh').click(function() {
location.reload();
});
</script>
</ion-content>
</ion-view>
and here are my routes:
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
.state('login', {
url: '/home',
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
})
.state('activity', {
url: '/activity',
templateUrl: 'templates/activity.html',
controller: 'activityCtrl'
})
$urlRouterProvider.otherwise('/home')
});
You can add controllers in controller.js file same like following code:
app.controller('MyController1', function($scope) {
//write controller specific code here...
});
app.controller('MyController2', function($scope) {
//write controller specific code here...
});
... so on
Or you can define in <script> tag too right after define your app module:
var app = angular.module('app', []);
app.controller('MyController1', function($scope) {
//write controller specific code here...
});
app.controller('MyController2', function($scope) {
//write controller specific code here...
});
... so on
I just figured it out. The controller goes in the controller.js under the controller thats already been established for the activity route.
You have to create a controller for each view/session in a isolated js file (controllers.js) and then declare as a angular module of your app.
Check out the official Ionic Framework Tutorial recommendations
https://ccoenraets.github.io/ionic-tutorial/create-angular-controller.html
angular.module('starter.controllers', [])
.controller('loginCtrl', function ($scope) {
$scope.LoginForm = {};
$scope.Login = function() {
alert($scope.LoginForm.User);
alert($scope.LoginForm.Password);
location.href = "#tab/qr-reader";
};
})
more controllers
...
I am constructing my first AngularJS app with Cordova CLI and testing in Chrome. As it now stands, when you click on a link (as "#/gallery_details"), the page (at "/views/gallery_details.html") does not appear. Rather, the browser goes from
[...]/foundation5/www/index.html
to
[...]/foundation5/www/index.html#/gallery_details
and leaves the index.html content as is. However, the ng-repeat directive is working fine, populating the Foundation 5 layout correctly.
After researching many sites, it looks like my setup is correct (though the pages I studied coded thing slightly differently).
Can you tell me where I am off in my coding?
Chrome Tools shows this error, which I don't know how to solve:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.28/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24route%20%3C-%20ngViewDirective
galleryApp.js:
var app = angular.module("app", ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/gallery_details', {
templateUrl: 'views/gallery_details.html',
controller: 'RouteController'
})
.otherwise({
redirectTo: '/'
}); $locationProvider.html5Mode(true);
}]);
/*
http://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-with
https://docs.angularjs.org/tutorial/step_07
*/
app.controller('RouteController,' ['$scope', '$http', function($scope, $http) {
$http.get('views/gallery_details.html').
success(function(data, status, headers, config) {
$scope.message ='Return"';
}).
error(function(data, status, headers, config) {
$scope.message ='ERROR! Return"';
});
}]);
index.html:
<!doctype html>
<html class="no-js" lang="en" data-ng-app="app">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<!-- in the <head> according to https://docs.angularjs.org/tutorial/step_07 -->
<script src= "angular/angular.min.js"></script>
<script src="angular/angular-route.js"></script>
<script src="angular/galleryApp.js"></script>
<script src="angular/galleryCtrl.js"></script>
<script src="js/vendor/modernizr.js"></script>
</head>
[...]
<div class="row" data-ng-controller="galleryCtrl">
<div class="large-3 small-4 columns" data-ng-repeat="x in names | filter: id()">
<div style="line-height:150px; display:block;"><img src="{{ x.photo }}"></div>
<div class="panel">
<h5>{{ x.name2 }}</h5>
More<br>
</div>
</div>
<div data-ng-view></div>
I'm trying to get my first AngualarJS app going but it won't work for some reason. Been googling for a while now and haven't found a solution that works for me yet.
Can anyone with some AngularJS exp see what's wrong with my code?
Appreciate any help!
<!doctype html>
<html data-ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<!-- Java Script -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<div id="container">
<nav class="col-xs-12">
<table id="navTable">
<tr>
<td><p>view 1</p></td>
<td><p>view 2</p></td>
<td><p>view 3</p></td>
<td><p>view 4</p></td>
<td><p>view 5</p></td>
</tr>
</table>
</nav>
<!-- View Placeholder -->
<article data-ng-view="" class="col-xs-6 col-xs-offset-3">
Views goes here...
</article>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',
{
controller: 'basicController',
templateUrl: '/partials/viewOne.html'
})
.when('/menu', {
controller: 'basicController',
templateUrl: '/partials/viewTwo.html'
})
.when('/map',
{
controller: 'basicController',
templateUrl: '/partials/viewThree.html'
})
.when('/info',
{
controller: 'basicController',
templateUrl: '/partials/viewFour.html'
})
.when('/offers',
{
controller: 'basicController',
templateUrl: '/partials/viewFive.html'
})
.when('/account',
{
controller: 'basicController',
templateUrl: '/partials/viewSix.html'
})
.otherwise({ redirectTo: '/' });
}]);
app.controller('basicController', ['$scope', function ($scope) {
$scope.message = "Hello!";
}]);
</script>
<footer class="col-xs-12 navbar-fixed-bottom">
</footer>
</div>
</body>
</html>
I would like to start with advising you to follow this official tutorial: it shows you the beginnings of how to build an app with AngularJS and views. The reason I would advise this is because there are quite a few basic elements that are missing from the script, mostly the <a> tags. Maybe you can start from the tutorial and build your own code based on that.
Remarks about your code:
Add all your script tags with javascript in your <head>. These will then in turn be run by a browser, making sure that all dependencies are met
You forgot a comma after "app" in your module initialization
Most important, you should change your <p> tags to <a> tags if you want views to work. Angular uses the <a>-tags to make navigation to different views possible. The href attribute of an <a> tag is used for this. Check my code below and you can see that my href attributes are linked to the routeprovider in the when clause.
Below you will find your adjusted code. Hope it helps!
<!doctype html>
<html data-ng-app="app">
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<!-- Java Script -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',
{
controller: 'basicController',
templateUrl: 'partials/viewOne.html'
})
.when('/menu', {
controller: 'basicController',
templateUrl: 'partials/viewTwo.html'
})
.when('/map',
{
controller: 'basicController',
templateUrl: 'partials/viewThree.html'
})
.otherwise({ redirectTo: '/' });
});
app.controller('basicController', ['$scope', function ($scope) {
$scope.message = "Hello!";
}]);
</script>
</head>
<body>
<div id="container">
<nav class="col-xs-12">
<table id="navTable">
<tr>
<td>view 1</td>
<td>view 2</td>
<td>view 3</td>
</tr>
</table>
</nav>
<!-- View Placeholder -->
<article data-ng-view="" class="col-xs-6 col-xs-offset-3">
Views goes here...
</article>
<footer class="col-xs-12 navbar-fixed-bottom"></footer>
</div>
</body>
</html>