I am building an app using Laravel & Angular.
I have defined a route in Laravel
Route::get('/deal-coupons/{merchant_id}', function() {
return view('mlpdeals');
});
What I want to do is pass the merchant_id to my angular view.
In my public folder, I have created an app.js
var app = angular.module('deals', [])
.constant('API_URL', 'http://www.coupon.local/api/getdealsbymerchant/');
I have also created a controller
app.controller('dealsController', function($scope, $http, API_URL) {
//retrieve employees listing from API
$http.get(API_URL + "1032")
.success(function(response) {
$scope.deals = response;
});
});
In my mlp.php view, I have
<!DOCTYPE html>
<html lang="en-US" ng-app="deals">
<head>
<title>Laravel 5 AngularJS CRUD Example</title>
<!-- Load Bootstrap CSS -->
<link href="<?= asset('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css') ?>" rel="stylesheet">
</head>
<body>
<h2>Employees Database</h2>
<div ng-controller="dealsController">
<!-- Table-to-load-the-data Part -->
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Deal Text</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="deal in deals">
<td>{{ deal.deal_id }}</td>
<td>{{ deal.deal_text }}</td>
</tr>
</tbody>
</table>
<!-- End of Table-to-load-the-data Part -->
</div>
<!-- Load Javascript Libraries (AngularJS, JQuery, Bootstrap) -->
<script src="<?= asset('https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js') ?>"></script>
<script src="<?= asset('https://code.jquery.com/jquery-1.11.3.js') ?>"></script>
<script src="<?= asset('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js') ?>"></script>
<!-- AngularJS Application Scripts -->
<script src="<?= asset('app/app.js') ?>"></script>
<script src="<?= asset('app/controllers/deals.js') ?>"></script>
</body>
As you can see, I am manually written the merchant_id to my API call. How do I make sure that I can get the merchant_id from the URL and pass it to my controller?
There are several methods for that, however the easier is to add it to a hidden field in Laravel blade, and let Angular read it.
Route:
Route::get('/deal-coupons/{merchant_id}', function($merchant_id) {
return view('mlpdeals',compact($merchant_id));
});
Template
<div ng-controller="dealsController">
<input type="hidden" value="{{$merchant_id}}">
<!-- Table-to-load-the-data Part -->
As you are using Blade and AngularJS, which both have use the same directive {{}}, you have two options. Either continue without Blade and use normal PHP echoing like that:
<div ng-controller="dealsController">
<input type="hidden" value="<?=$merchant_id?>">
<!-- Table-to-load-the-data Part -->
Or better to use Blade and instruct it, not to process Angular variables by escaping them using the # sign like that:
<tbody>
<tr ng-repeat="deal in deals">
<td>#{{ deal.deal_id }}</td>
<td>#{{ deal.deal_text }}</td>
</tr>
</tbody>
However, please take into consideration that the client can change this value easily, so if you want to have more control on that, then it's much better to acquire that variable from Laravel through API call, and receive it in JSON variable.
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 want to use Angular smart-table in my html code.
My environment:
server-side - Apache vs java
client side - html with angular
I downloaded the smart-table repository but I have difficulty to install the module manually and there is no instructions or tutorial for this on the web
What i tried so far is:
In my html file i am pointing to smart-table.js and smart-table.min.js
<script src="../app/assets/js/smart-table.js"></script>
<script src="../app/assets/js/smart-table.min.js"></script>
2.in my app I am referencing 'smart-table':
var app = angular.module('FarmManagment', ['smart-table']);
but it's not working the smart-table futures are not recognized.
please help to configure this correctly!!!
this is my code in general:
<html>
<head>
<title>get farms angularjs tester</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../js/style.css">
<link rel="stylesheet" href="../js/normalize.css">
<link rel="stylesheet" href="../app/assets/css/search box">
<link rel="stylesheet" href="../js/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="../app/assets/js/smart-table.js"></script>
<script src="../app/assets/js/smart-table.min.js"></script>
</head>
<body ng-app="FarmManagment" ng-controller="mainCtrl">
<!-- Data table -->
<table id="auditTable" class="table table-hover" st-table="displayedCollection" st-safe-src="rowCollection" cellspacing="0" width="100%">
<thead>
<tr>
<th st-sort="FarmName">Farm Name</th>
...
...
</tr>
</thead>
<tbody id ="tbody">
<tr ng-repeat="row in rowCollection">
<td ng-bind="row.FarmName"></td>
...
...
</tr>
</tbody>
</table>
<script>
var app = angular.module('FarmManagment', ['smart-table']);
app.controller('mainCtrl', function ($scope,$http) {
$http.get('<path>').then(function(response) {
$scope.rowCollection = response.data.farms;
});
});
</script>
</body>
Thanks
Dima
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/
Hers is my code in html pasted in WebContent folder created using Dynamic Web Project in eclipse:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var countryApp = angular.module('countryApp', []);
countryApp.controller('CountryCtrl', function ($scope, $http){
$http.get('country_codes.json').success(function(data) {
$scope.countries = data;
});
});
</script>
</head>
<body ng-controller="CountryCtrl">
<h2>Angular.js JSON Fetching Example</h2>
<table>
<tr>
<th>Code</th>
<th>Country</th>
<th>Population</th>
</tr>
<tr ng-repeat="country in countries | orderBy: 'code' ">
<td>{{country.code}}</td>
<td>{{country.name}}</td>
<td>{{country.population}}</td>
</tr>
</table>
</body>
</html>
The json data is written in "country_codes.json" which is placed at the same location where html file has been placed.
]1
But I am getting the output as shown in below image.Please let me know why it is not reading data from server
you missed ng-app directive
<body ng-app="countryApp" ng-controller="CountryCtrl">.....</body>
I'm doing a basic Restangular example and it works on AngularJS 1.1, however on 1.2, the REST request is sent, data is received, but the table is not displayed properly.
I read through some threads here about upgrading from 1.1 to 1.2 but I don't see the issue as the example is very simple and does not explicitly use ngRoute, isolated scopes or custom directives.
HTML
<!DOCTYPE html>
<html ng-app="countries">
<head>
<meta charset="utf-8" />
<title>REST Country Example</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//code.angularjs.org/1.2.27/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.27/angular-resource.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdn.rawgit.com/mgonto/restangular/master/dist/restangular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainCtrl">
<div>
<h2>Restangular Example with RESTCountries.eu</h2>
<input type="text" ng-model="search" class="search-query" placeholder="Search">
<table class="table table-responsive table-striped">
<thead>
<tr>
<th>Country</th>
<th>Capital</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="country in countries | filter:search | orderBy:'name'">
<td>{{country.name}}</td>
<td>{{country.capital}}</td>
<td>{{country.alpha2Code}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
JS
app = angular.module('countries', ['restangular']);
app.config(function(RestangularProvider) {
RestangularProvider.setBaseUrl('http://restcountries.eu/rest/v1');
});
app.controller('mainCtrl', function($scope, Restangular) {
$scope.countries = Restangular.all('all').getList();
});
1.1.5 Plunk (working)
1.2.27 Plunk (not working)
Any idea what is missing/incorrect in order to get this working properly on 1.2?
Cheers,
I have never used restangular before. Looks like it returns a promise for 1.2 version, instead of data, I am able to load the data with this minor modification:
app.controller('mainCtrl', function($scope, Restangular) {
Restangular.all('all').getList().then(function(result) {
$scope.countries = result;
});
});
Plunker