I never had this problem before and I know this is a tiny issue... but I can't seem to figure out what is wrong... 1 of my partials is not loading correctly and instead it hits the otherwise route back to my /login (which I have assigned).
Every time I click on the Create a survey link it redirects me back to the login and the URL displays this http://localhost:3000/#!/login#%2Fcreate but when I put http://localhost:3000/#!/create in the URL it works. Not quite sure what the problem is. Please HELP!
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/login', {
templateUrl: 'partials/login.html',
controller: 'UserController'
})
.when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: 'SurveyController'
})
.when('/create', {
templateUrl: 'partials/create.html',
controller: 'SurveyController'
})
.when('/poll/:id', {
templateUrl: 'partials/poll.html'
})
.otherwise({
redirectTo: '/login'
});
})
<!DOCTYPE html>
<html>
<head>
<title>Survey Polls</title>
<!-- CSS -->
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- Angular -->
<script src="angular/angular.js"></script>
<script src="angular-route/angular-route.js"></script>
<!-- jQuery/Bootstrap -->
<script src="jquery/dist/jquery.js"></script>
<script src="bootstrap/dist/js/bootstrap.js"></script>
<!-- App.js -->
<script src="app.js"></script>
<!-- Controllers/Factories -->
<script src="controllers/SurveyController.js"></script>
<script src="controllers/UserController.js"></script>
<script src="factories/SurveyFactory.js"></script>
<script src="factories/UserFactory.js"></script>
</head>
<body ng-app="myApp">
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
Create a new survey
<h3>Current polls:</h3>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Survey Question</th>
<th>Date Posted</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="s in surveys">
<td>{{ s._user.username }}</td>
<td>{{ s.question }}</td>
<td>{{ s.created_at }}</td>
<td><button ng-show="loggedInUser._id == s._user._id" ng-click="delete(s._id)">Delete</button></td>
</tr>
</tbody>
</table>
I found a possible solution here. Add this line to your config to get rid of the exclamation point (!):
$locationProvider.hashPrefix('');
Try to use ng-href instead of just href.
Related
i am basically trying to make a simple routing:
where i have defined the following in app.js
(function () {
"use strict";
var app = angular.module("productManagment", ["common.services", "ui.router", "productResourceMock"]);
app.config(["$stateProvider","$urlRouterProvider","$locationProvider",
function ($stateProvider,$urlRouterProvider ,$locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise('/products');
$stateProvider
.state('/products',
{
url: '/products',
templateUrl: 'app/products/productsView.html',
controller: "ProductListCtrl as vm"
});
}
]);
}());
i am using angular js 1.6.1 and angular-ui-router v 0.4.2 .
my index html is as follows:
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/app.css" rel="stylesheet" />
<!--Library scripts here-->
<script src="js/angular.js"></script>
<script src="js/angular-resource.js"></script>
<script src="js/angular-mocks.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="app/app.js"></script>
<script src="common/services/common.services.js"></script>
<script src="common/services/productResource.js"></script>
<script src="common/services/productResourceMock.js"></script>
<script src="app/products/productListCtrl.js"></script>
<meta charset="utf-8" />
</head>
<body ng-app="productManagment">
<div ui-view></div>
</body>
</html>
while the product list view is :
<div class="panel panel-primary">
<div class="panel-heading" style="font-size: large"> Product List</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<td>
<button class="btn btn-primary" type="button"
ng-click="vm.toggleImage()">
{{vm.showImage ? "Hide" : "Show"}} Image
</button>
</td>
<td>Product</td>
<td>Code</td>
<td>Availability</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in vm.products">
<td>
<img ng-if="vm.showImage" ng-src="{{product.imageUrl}}"
style="width: 50px; margin: 2px"
title="{{product.productName}}" />
</td>
<td>{{product.productName}}</td>
<td>{{product.productCode}}</td>
<td>{{product.releaseDate}}</td>
<td>{{product.price | currency}}</td>
</tr>
</tbody>
</table>
</div>
</div>
when i try to run the application, it should be routed to the "/products" along with its template, but i got the below error from the developer tools of chrome:
Error: [$compile:tpload] Failed to load template: app/products/productsView.html (HTTP status: undefined undefined)
http://errors.angularjs.org/1.6.1/$compile/tpload?p0=app%2Fproducts%2FproductsView.html&p1=undefined&p2=undefined
at angular.js:68
at handleError (angular.js:19730)
at processQueue (angular.js:16648)
at angular.js:16692
at Scope.$eval (angular.js:17972)
at Scope.$digest (angular.js:17786)
at Scope.$apply (angular.js:18080)
at bootstrapApply (angular.js:1841)
at Object.invoke (angular.js:4842)
at doBootstrap (angular.js:1839)
the network tab shows:
After a long time of reproduction we were able reproduce were the problem was comming from. The ngMock configuration was blocking nearly any request fired by the client. We could solve the problem by allow AngularJS $httpBackend to GET sources in the following directoy app/views/* which results in the following pattern:
$httpBackend.whenGET(/^\/app/*/views\//).passThrough();
it turns out that the problem was caused because of the usage of MockE2E.
so if I make something like $httpBackend.whenGET("/app/products/productsView.html").passThrough();
it is not intercepted by the mock.
I am a learner in angular JS. I am trying out the $http and set the corresponding value to the scope variable. But It doesnt work. Below is the snippet of the html.
<div ng-app="fileapp" ng-controller="myctl" ng-init="hidevar=true">
<div ng-hide="hidevar" class="ng-hide">
<table>
<tbody ng:repeat="x in dataobj">
<tr><td>{{x.url}}</td></tr>
</tbody>
</table>
</div></div>
below is the success call back script with angular js
success(function(data) {
console.log(data);
var d=angular.fromJson(data);
console.log('d is:'+d.url);
$window.alert(d.url);
$scope.dataobj=data;
//$scope.url=data.url;
$scope.hidevar =false;
I am getting the expected url string value in console.log and also in the window.alert. But the same is not getting refelected in $scope.dataobj=data; and
$scope.hidevar =false;
The ng hidden is not setting to false and also the json data from the service is not getting set to dataobj.
Below is the console output.
I changed the list div like the below but still no luck
<div ng-hide="hidevar" class="ng-hide">
<table>
<tbody>
<tr><td>{{dataobj.url}}</td></tr>
</tbody>
</table>
</div>
I added a hidden section and updated the hidden variable inside the scope but that is not reflecting.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<!--<script src="app.js"></script> -->
</head>
<body ng-app="plnkrApp" ng-controller="DemoController" ng-init="myvar=true">
<h1>Array</h1>
<table>
<tbody ng:repeat="x in array">
<tr>
<td>{{x.url}}</td>
</tr>
</tbody>
</table>
<h1>Object</h1>
<table>
<tbody ng:repeat="x in object">
<tr>
<td>{{x}}</td>
</tr>
</tbody>
</table>
<div ng-hide="myvar">
<p>Hidden Section</p>
</div>
<script>
var app = angular.module('plnkrApp', []);
app
.controller("DemoController", function($scope) {
$scope.array = [ {url: 'test1'}, {url: 'test2'}, {url: 'test3'}];
$scope.object = {url: 'test1'};
$scope.myvar=false;
});
</script>
</body>
</html>
The hidden section is not getting displayed. Why the data is not binding to hidden variable?
You're getting an object back, not multiple objects in an array.
Doing ng-repeat on this object would just need {{x}} instead of {{x.url}} but that's not right.
Create a test scope variable with an array of 2 or more of those objects. You'll see that it'll work the way you want.
$scope.test = [ {url: 'test1'}, {url: 'test2'}, {url: 'test3'}];
Edit: Here is a Plunkr showing the difference:
http://embed.plnkr.co/6wSuAPHPCSZF60Pph85V/
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>
I'm trying to get Angular to display JSON data that I've managed to pull from a database and console also printing the data as expected, but table ng-repeat not displaying the data. even outside of the table data display properly. {{contactlists[0].name}}
<!DOCTYPE>
<html ng-app="nodeapp">
<head>
<title>AngularJs with Nodejs</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div class="container" ng-controller="nodeappctrl">
<div class="row">
<h1>Angularjs with api's</h1>
<p>{{contactlists[0].name}}</p>
</div>
</div>
<div class="container">
<div class="row">
<table class="table">
<thead>
<tr>
<th>SNo</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlists">
<td>{{$index}}</td>
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script type="text/javascript">
var nodeapp = angular.module('nodeapp', []);
nodeapp.controller('nodeappctrl', ['$scope', '$rootScope', '$log', '$http',
function($scope, $rootScope, $log, $http) {
var contactlist = {};
$http.get('/contactlist').success(function(data) {
$scope.contactlists = data;
//$scope.$apply();
console.log(JSON.stringify($scope.contactlists), null,2);
});
}
]);
</script>
<!--
// dummy data
var contactlists =[
{
name: 'Rajesh',
email: 'raj#g.com',
number: '11 - 111 - 11111'
}, {
name: 'Rajesh2',
email: 'raj2#g.com',
number: '22 - 222 - 222222'
}, {
name: 'Rajesh3',
email: 'raj3#g.com',
number: '33 - 333 - 333333'
}
]-->
</body>
</html>
</html>
Place ng-controller inside the <body> tag.
You used it in the <div> which is closed, so it's can't be available to the rest bottom of the code.
<body ng-controller="nodeappctrl">
//your code here..
</body>
The problem is here:
<div class="container" ng-controller="nodeappctrl">
The nodeappctrl controller should be applied to a tag that is a parent of where you're accessing its scope. As you can see, the table is a child of a sibling of the element the controller is bound to.
For example, move ng-controller="nodeappctrl" to the body tag.
I've tried to get to know how to work with Angular but have no luck. I don't know what i do wrong.
Here is my index.html:
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>testAngular</title>
<link rel="stylesheet" type="text/css" href="core/css/style.css">
<script src="core/js/angular.min.js"></script>
<script src="core/js/angularRoute.min.js"></script>
<script src="Controllers/users.js"></script>
<script src="Services/router.js"></script>
</head>
<body>
<div class="container">
<p class="well">
Home
Users
Shop
</p>
<h3>Users</h3>
<hr class="vau">
<form>
<input class="form-control" type="text" ng-model="search">
</form>
<div ng-view=""></div>
</div>
</body>
</html>
Here is my router.js
'use strict';
angular.module('app', ['ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'tpl/home.html'
})
.when('/users', {
templateUrl: 'tpl/users.html',
controller: 'userCtrl'
})
.when('/shop', {
templateUrl: 'tpl/shop.html'
})
.otherwise({ redirectTo: '/' });
});
Here is my users.js
'use strict';
angular.module('app', ['ngRoute'])
.controller('userCtrl', function($scope, $http){
$http.get('dataModel/users.json').then(function(res){
$scope.users = res.data;
});
});
and this is my users.html
<h3>Hello Users</h3>
<div ng-controller="userCtrl">
<table class="table table-hover">
<tr>
<th>pId</th>
<th>Vorname</th>
<th>Nachname</th>
<th>E-Mail</th>
<th>Abteilung</th>
</tr>
<tbody>
<tr ng-repeat="user in users | filter:search">
<td>{{user.pId}}</td>
<td>{{user.fName}}</td>
<td>{{user.lName}}</td>
<td>{{user.email}}</td>
<td>{{user.abtelung}}</td>
</tr>
</tbody>
</table>
</div>
<p>hello Users</p>
I don't know why the controller is not working. thank you very much for any idea and help.
When you are doing this:
angular.module('app', ['ngRoute'])
You are creating a new module named app, and overriding any existing module with the same name.
Instead, create the module once like that, and on other files when you want to retrieve the model, do it like:
angular.module('app')