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">
Related
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
I am looking at this tutorial. And I have such code:
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>SPA book_store</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("http://localhost:8080/book_store/rest/books_json/get")
.then(function(response) {
$scope.books = response.data;
});
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<input id="filter_input" type="text" ng-model="nameText"/>
<ul>
<li ng-repeat="book in books | filter:nameText | orderBy:'name'">
{{book.name}} - {{book.price}}
</li>
</ul>
</div>
</body>
</html>
http://localhost:8080/book_store/rest/books_json/get is returning following json:
[
{
"book_id":1,
"name":"Book1",
"bought":false,
"genre":"MR",
"price":20,
"users":[
],
"author":{
"author_id":1,
"name":"Gogol",
"books":[
]
}
},
//...
]
But I see in a browser networking that request wasn't fire. What have I done wrong?
Remove the ng-app="" from the html tag or provide the module name ng-app="MyApp".
Also remove one of the ng-app directives either from the the body tag or the html tag.
It is good practice to user the ng-app directive on the HTML tag if you are using just one angular app.
I created an ng-sortable example in Plunker but it's not working.
Here's the JavaScript:
angular.module('sortableExample', [])
.controller('PresidentsCtrl', ['$scope', function($scope) {
$scope.presidents = [
'George Washington',
'Abraham Lincoln',
'William Jefferson Clinton'
];
$scope.dragControlListeners = {
accept: function(sourceItemHandleScope, destSortableScope) { return true },
itemMoved: function(event) {},
orderChanged: function(event) {}
};
}]);
And the HTML:
<!DOCTYPE html>
<html ng-app="sortableExample">
<head>
<script data-require="angular.js#1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="https://raw.githubusercontent.com/a5hik/ng-sortable/master/dist/ng-sortable.js"></scr</script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/a5hik/ng-sortable/master/dist/ng-sortable.css">
<script src="script.js"></script>
</head>
<body ng-controller="PresidentsCtrl">
<ul data-as-sortable="dragControlListeners" data-ng-model="presidents">
<li data-ng-repeat="president in presidents" data-as-sortable-item>
<div data-as-sortable-item-handle>{{ president }}</div>
</li>
</ul>
</body>
</html>
The right stuff shows up but it's not interactive like it should be. Any idea why?
You should not include links to github source -)
Since there is no cdn for ng-sortable - just copy it to plunker.
Also you forget to add dependency of ng-app.
angular.module('sortableExample', ['as.sortable'])
http://plnkr.co/edit/gRRzaVfwIycdzfApmebB?p=preview
I just started AngularJS today; so I'm still very new to it. I have the following code:
<!DOCTYPE html>
<html ng-app>
<head>
<title>My first AngularJs</title>
</head>
</html>
<body data-ng-controller="SimpleController">
<div class="container">
<h3>Looping with the ng-repeat Directive</h3>
<input type="text" ng-model="nameText"/>{{ nameText}}
<ul>
<li data-ng-repeat="cust in customers | filter:nameText | orderBy:'name'">{{ cust.name | uppercase }} - {{ cust.city}}</li>
</ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function SimpleController($scope){
$scope.customers=[
{name:'Frank Ben',city:'Bamenda'},
{name:'Brize Tankanon',city:'Marous'},
{name:'Brendaline M.',city:'Bafoussam'},
{name:'Alexander Bings',city:'Buea'}
];
}
When I run the above code, this is what I get:
when I remove the controller directive from the body tag, I get this:
I don't know where the problem is coming from. I wish to display those names and cities. I will be grateful for your help. Thanks!
Try to register controller in angularjs app using build in dependency injection, in other words:
<script type="text/javascript">
var app = angular.module("app", []);
app.controller('SimpleController', ['$scope', function SimpleController($scope){
$scope.customers=[
{name:'Frank Ben',city:'Bamenda'},
{name:'Brize Tankanon',city:'Marous'},
{name:'Brendaline M.',city:'Bafoussam'},
{name:'Alexander Bings',city:'Buea'}
];
}]);
</script>
then change ng-app to ng-app="app".
Here is JSBin with working example: http://jsbin.com/ficozajena/1/edit?html,js,output
I have created a simple demoapp and it seems to work perfectly file.
The demoapp uses restangular for the get request.
/* the emp.json file from where the data is coming*/
[
{"id":1,
"subject":"#aashima"
},
{"id":2,
"subject":"#aansh"
},
{"id":3,
"subject":"#artle"
},
{"id":4,
"subject":"#harish"
}
]
<!doctype html >
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Restangular</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/restangular/1.5.1/restangular.min.js"></script>
</head>
<body>
<div ng-controller="IndexCtrl as omega" ng-cloak>
<ul>
<li ng-repeat="result in omega.people">
<span ng-bind="result.subject"></span>
</li>
</ul>
<span ng-bind="omega.hero"></span>
</div>
<script>
var app = angular.module('app', ['restangular'])
.config(function(RestangularProvider) {
RestangularProvider.setBaseUrl("js");
});
app.controller('IndexCtrl', function( Restangular) {
var self=this;
Restangular.all('emp.json').getList().then(function(result) {
self.people = result;
});
});
</script>
</body>
</html>
The app works perfectly but the problem in here is that the json response from my backend will be something like this
{"user":[
{"id":1,
"subject":"#aashima"
},
{"id":2,
"subject":"#aansh"
},
{"id":3,
"subject":"#artle"
}
]
}`
I tired to integrate the code with this json response, does Restangular supports this json and if it does do I need a different approach !!!