I want to develop simple front end AngularJS and backend Laravel. I don't know why my AngularJS route is not connected with laravel route.It keep mention as GET http://localhost/todos 404 (Not Found). I hope someone can help me to solve it. Thanks in advance.
Hello.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel + Angularjs</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-App>
<div id="todos" ng-controller="Todoctrl">
<h3 class="page-header">Todos<small ng-if="remaining()">{{remaining()}} remaining</small>
</h3>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
{{todo.text}}
</li>
</ul>
</div>
</script>
<script src="js/app.js">
</script>
</body>
</html>
Todo.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Todo extends Model
{
protected $guarderd = [];
}
App.js
function Todoctrl($scope,$http){
$http.get("/todos").success(function(todos){
$scope.todos = todos;
});
$scope.remaining = function(){
var count = 0;
angular.forEach($scope.todos,function(todo){
count == todo.done ? 0 : 1;
});
}
}
Route.php
Route::get('/', function () {
return view('welcome');
});
Route::get('/',function(){
return view('hello');
});
Route::get('/todos',function(){
return Todo::all();
});
You need to specify the whole URI like http://locahost:8000/todos and if you get problems with CORS you can use this library: LARAVEL CORS
NOTE: You must try this command too php artisan serve --host=0.0.0.0
Related
Hey people i am trying to integrate prismic io with angular js 1 but it is not working.
I referred to many links to do that but i don't get anything data.
https://github.com/awulder/angular-prismicio
https://gist.github.com/laradevitt/94f7e21eaf6d3441b9475fc8f5201201
http://jsfiddle.net/othermachines/bbv9dzug/
and that's my code :
my code
app.js
// Define the `myApp` module
var app = angular.module('app', ['prismic.io']);
app.config(function(PrismicProvider) {
PrismicProvider.setApiEndpoint('https://myname.prismic.io/api');
PrismicProvider.setAccessToken('i put my access token');
PrismicProvider.setClientId('i used my id');
PrismicProvider.setClientSecret('i put my secret');
PrismicProvider.setLinkResolver(function(ctx, doc) {
return 'detail.html?id=' + doc.id + '&slug=' + doc.slug + ctx.maybeRefParam;
});
});
// Define the `AppCtrl` controller on the `app` module
app.controller('AppCtrl', ['Prismic', function(Prismic) {
var self = this;
Prismic.all().then(function(data) {
self.data = data;
});
}]);
index.html
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://unpkg.com/prismic.io/dist/prismic.io.min.js"></script>
<script src="https://raw.githubusercontent.com/awulder/angular-prismicio/master/dist/angular-prismicio.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="AppCtrl">
<prismic-html fragment="data.fragment"></prismic-html>
<ul>
<li ng-repeat="item in data">
<span>{{item.slug}}</span>
</li>
</ul>
</body>
</html>
The idea with this Prismic thing is that it has the data on it and they are just providing some code for integration and then we read this json data using angular.
please if anyone used it before will be really nice to help.
thanks
I am trying to use vis.js library to visualize a simple network. My controller is as follows
var App = angular.module('App', ['ngRoute','ngVis']);
App.controller('visController', ['$scope','$http','$window','VisDataSet',function($scope,$http,$window,VisDataSet)
{
$scope.Nodes = [];
$scope.Edges = [];
$http.post('/getNetworkData').success(function(response)
{
$scope.Nodes = response.Nodes;
$scope.Edges = response.Edges;
console.log($scope.Edges);
console.log($scope.Nodes);
});
var network = null;
var destroy = function(){
if(network!=null)
{
network.destroy();
network = null;
}
}
var draw = function()
{
destroy();
var nodes = new vis.Dataset($scope.Nodes);
var edges = new vis.Dataset($scope.Edges);
var container = angular.element( document.querySelector('#mynetwork'));
console.log(container);
var data = {
nodes : nodes,
edges : edges
};
var options = {
interaction: {
navigationButtons: true,
keyboard: true
}
};
network = new vis.Network(container,data,options);
network.on('select', function(params) {
console.log("clicked");
});
}
draw();
}]);
and my html div is as follows
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title>Visualization Page</title>
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap/normalize.css">
<link rel="stylesheet" href="css/bootstrap/style.css">
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/visualizationPage/style_vispage.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="css/bootstrap/jquery.min.js"></script>
<script src="css/bootstrap/bootstrap.min.js"></script>
<script src="js/ng-file-upload-shim.min.js"></script>
<script src="js/ng-file-upload.min.js"></script>
<script src="controllers/controller.js"></script>
<script src="js/ngDialog.js"></script>
<link rel="stylesheet" type="text/css" href="css/createNetwork/ngDialog.css">
<link rel="stylesheet" type="text/css" href="css/createNetwork/ngDialog-theme-default.css">
<script src="js/vis.js"></script>
<script src="js/exampleUtil.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap/vis.css">
<script src="js/googleAnalytics.js"></script>
</head>
<body ng-controller="visController">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Visualization<span class="sr-only">(current)</span></li>
<li>Data</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h2 class="page-header">Visualization</h2>
<div id="mynetwork">
</div>
</div>
</div>
</div>
</body>
</html>
I am getting an error Uncaught Error: [$injector:modulerr] when i try to load the page. Can someone tell me what I am missing in my code.
My error is as follows
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.2/$injector/modulerr?p0=n...)
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:6:416
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:40:60
at p (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:39:135)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:39:304
at p (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:39:135)
at db (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:43:164)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js:20:463
First, this is unrelated to your issue, but there are several things that should be cleaned up here.
Eliminate the use of success in your call to $http.post and replace it with then. Success is depracated.
It looks like this should be a call to $http.get, not post.
Draw should be called from the then method of the call to $http.get rather than at the end of your controller initialization. The way this is currently written you cannot guarantee that this call is complete and the data is available before your draw function executes.
As for the missing module, it is most likely a pathing issue, spelling issue or an issue with the order that you are loading your javascript files. That code would of course be in your html.
You're loading jquery more than once. You only need it once. When you're using angular with Jquery always load jquery first. Angular will make use of it instead of JQLite in those circumstances. I don't see anything else, but it's possible that loading JQuery after Angular and then loading it again is stepping on something.
15.html
<html>
<meta charset="utf-8">
<title>Angularjs htttp services</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">
</script>
<script src="controller15.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="people">
<ul>
<h2> names and ages of the programmers</h2>
<li ng-repeat="person in persons">
{{ person.Name +':' +person.Age}}
</li>
</ul>
</div>
</body>
</html>
controller15.js
var app=angular.module('mainApp',[]);
app.controller('people', function($scope,$http)
{
$http.get('database.json')
.success(function(response)
{
$scope.person=response.records;
});
});
database.json where I stored the info:
{
"records":[
{
"Name":"mehul","Age":"13"
},
{
"Name":"ashok","Age":"23"
},
{
"Name":"rajesh","Age":"44"
}
]
}
I have attached all of the code, please review my code. I am a beginner in angularjs; it would be always good if you suggest me a particular material or web site to go through.
First: Do not use a minified version of angular to see described errors in
your browser console. then tel me what errors do you see!
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js">
I am trying to implement the route functionality using angular js. Unfortunately the route functionality is not working at all. I tried many options and re-checked the code for syntax errors etc. but no luck..
Here is my code.
html code:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-route.min.js"></script>
<link href="index.css" rel="stylesheet"/>
<script src="index.js"></script>
</head>
<body ng-app="App">
<div ng-controller="AppController as ctrl">
<header>
<h1> Restaurants Explore</h1>
<h4> Way to explore the menus</h4>
</header>
<nav>
<ul>
<li ng-repeat="entry in arrayOfObjects">{{entry.name}}</li>
</ul>
</nav>
<section ng-model="restaurant">
<div>
<table>
<tr><td>Menu Details</td></tr>
</table>
</div>
<div ng-view>
asdfslajfdsjfdl
</div>
</section>
</div>
</body>
index.js
var module = angular.module("App",['ngResource','ngRoute']);
module.factory("mywebservice",function($resource){
return $resource("http://localhost:8080/MyWebService/myweb/msgservice");
});
module.controller("menuController", function($scope,$routeParams){
alert();
/*$scope.arrayOfObjects = mywebservice.get({restId:$routeParams.restId}).$promise.then(
function(response){
alert(JSON.stringify(response));
},
function(error){
alert(error.message);
}
);*/
});
module.config(['$routeProvider',function($routeProvider){
alert("Inside router provider");
$routeProvider.
when('/menu',{
templateUrl:"templates/menu.html",
controller:'menuController'
})
.otherwise({
redirectTo:'/'
});
}
]);
module.controller("AppController", function($scope,mywebservice){
$scope.arrayOfObjects = mywebservice.query().$promise.then(
function(response){
$scope.arrayOfObjects = response;
},
function(error){
alert(error.message);
}
);
this.displayRestaurant=function(index){
$scope.restaurant = $scope.arrayOfObjects[index];
}
});
Nothing works.. any clues... i am running these app from tomcat webservice. The application is trying to fetch somedata from teh REST webservice and displays it in the browser.
I am trying to follow along on the eggheads angularJS tutorials. I have the same code however mine is not working...
Here is the code I am using:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Tutorials</title>
<link rel="stylesheet" href="../foundation/css/foundation.min.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h1>{{data.message + " world"}}</h1>
<div class="{{data.message}}">
Wrap me with a foundation component.
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</body>
</html>
main.js:
function FirstCtrl($scope) {
$scope.data = {message: "panel"};
}
The problem is angular version.
Your version is 1.3.4 instead of 1.2.3.
App with angular 1.2.3 (egghead) : plunkr
App with angular 1.3.4 :plunker
Hi you've missed couple thing
Declaration of you app :
var app = angular.module('app', []);
Declaration of your controller
app.controller('FirstCtrl', FirstCtrl);
In your html
ng-app="app"
var app = angular.module('app', []);
app.controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "panel"
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="FirstCtrl">
<h1>{{data.message + " world"}}</h1>
<div class="{{data.message}}">
Wrap me with a foundation component.
</div>
</div>
</body>