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.
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 working on the tutorial to build an AngularJs app where I am fetching information of users. When I am running the app and the output doesn't display.
My index.html
<!DOCTYPE html>
<html data-ng-app="myContactApp" >
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="app.js"></script>
<script src="appConfig.service.js"></script>
<script src="appname.service.js"></script>
<script src="contact.controller.js"></script>
<script src="contactdata.service.js"></script>
<title>My Contact Application</title>
</head>
<body>
<main>
<div class='container' ng-controller="contactController as ctrl">
<div class='row'>
<ul class="list-group">
<li class="list-group-item" ng-repeat="con in ctrl.contactArr" data-ng-click="ctrl.selectUser($index)">
<span>{{con.name.first+ " "+con.name.last}}</span>
</li>
</ul>
</div>
<div class='row'>
<div class="media">
<div class="media-left">
<a href="#">
<img data-ng-src="{{ctrl.selectedUser.picture.medium}}">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{ctrl.selectedUser.name.first+ " "+ctrl.selectedUser.name.last}}</h4>
<div>
<p>
<h6>Location</h6>
</p>
<p>
{{ctrl.selectedUser.location.street+" "+ctrl.selectedUser.location.city+" "+ctrl.selectedUser.location.state+" "+ctrl.selectedUser.location.postcode}}
</div>
<div>
<p>
<h6>Phone</h6>
</p>
<p>{{ctrl.selectedUser.phone}}</p>
</div>
<div>
<p>
<h6>email</h6>
</p>
<p>
{{ctrl.selectedUser.email}}</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
My app.js
var app=angular.module("myContactApp",[]);
My appconfig.service.js
(function(){
var app=angular.module("myContactApp");
app.service("AppDataServiceSVC",function(appNameSVC){
this.Name=appNameSVC;
this.author='Bhaskar';
this.buildDate=new Date().toDateString();
});
})();
My appname.service.js file :-
(function (){
var app=angular.module("myContactApp");
app.value("AppNameSVC","My New Contact List");
})();
My contact.controller.js file
(function(){
var app=angular.module("myContactApp");
app.controller("contactController",contactCtrl);
function contactCtrl(ContactDataSVC){
var self=this;
ContactDataSVC.getContacts().then(function(data){
self.contacts=data;
})
this.selectUser=function(index){
this.selectedUser = this.contactArr[index];
}
}
})();
My contactdata.service.js
(function(){
var app=angular.module("myContactApp");
app.service("ContactDataSVC",function($http){
var self=this;
self.getContacts=function(){
var response1=$http.get('http://localhost:3000/contacts');
var response2=response1.then(function(response){
return response.data;
});
return response2;
}
});
})();
I have created db.json which I am running on json-server and using it as REST API. It should display contact details but it doesn't display anything on the browser. I am unable to figure out where I have made the mistake.
In controller you use: self.contacts=data;
Change ng-repeat="con in ctrl.contactArr" to:
ng-repeat="con in ctrl.contacts"
also pass con to selectUser : data-ng-click="ctrl.selectUser(con)"
Demo plunker
Im working in laravel and i start to implement angular to my frontend.
This is the route:
Route::get('test', 'WorkController#inicio');
My controller function:
public function inicio()
{
$works = new Work;
$works = Work::Paginate(10);
return view('test', compact('works'));
}
And the view where i what to display the database information.
<head>
<title>test</title>
<link href="/css/lib.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
</head>
<body>
<h1>test</h1>
<h2>test</h2>
<div ng-app="myApp" ng-controller="myController as controller">
<ul>
<li ng-repeat="datos in data">
<a class="floating-box">#{{datos.client}}</a>
</li>
</ul>
</div>
<hr/>
</body>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myController", function($scope, $http) {
$scope.data = [];
$scope.buscador = '';
$http.get("<?=env('APP_URL')?>" + '/test').then(function(datos) {
console.log(datos.data.data);
$scope.data = datos.data.data;
console.log($scope.data);
})
});
</script>
But then i get this in console:
GET http://localhost/test net::ERR_CONNECTION_REFUSED.
and the information isnt in the view.
My project structure is looks like this:
I tried to make a single page application using this image. When index.html page will launch it will by default load registration.html in ng-view. But when index.html loads it does not load the registration.html as ng-view as expected.
And my files for index.html,main.css and mainAppRouter.js are below:
//mainAppRouter.js
(function () {
var myModule = angular.module('studentInfo', ['ngRoute']);
myModule.config(function ($routeProvider) {
$routeProvider
.when('/registration', {
templateUrl : '../views/registration.html',
controller: 'regController'
})
.otherwise({
redirectTo: '/registration'
});
console.log("checking");
});
myModule.controller('regController', function ($scope) {
$scope.message = 'This is Add new order screen';
console.log("checking");
});
});
/*man.css*/
.studentInfo{
margin-top: 100px;
}
.navbar{
padding: 1em;
}
.navbar-brand {
padding:0;
}
<!--index.html-->
<!DOCTYPE html>
<html data-ng-app="studentInfo">
<head>
<script src="lib/js/angular.min.js"></script>
<script src="lib/js/jquery-3.0.0.min.js"></script>
<script src="lib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/js/angular-route.js"></script>
<script src="app/route/mainAppRouter.js"></script>
<link rel="stylesheet" href="lib/css/bootstrap.css" />
<link rel="stylesheet" href="lib/css/bootstrap-theme.css" />
<link rel="stylesheet" href="app/css/main.css" />
<title>A demo Angular JS app</title>
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"> <span><img src="app/images/people.png"/></span> Student Info </a>
</div>
<ul class="nav nav-pills navbar-right" data-ng-controller="NavbarController">
<li role="presentation">Registration</li>
<li role="presentation">Student Details</li>
</ul>
</div>
</div>
<div class="container">
<div class="col-md-4 col-md-offset-4" data-ng-controller="regController">
<h1>Student Info</h1>
</div>
<div ng-view></div>
</div>
</body>
</html>
All my codes are in this github repo
What should i do to correct my problem?
I think the problem is because you have not specified any controller for your ng-view and also you have to set your base URL correctly.
$routeProvider
.when('/registration', {
templateUrl :'http://localhost/StudentInfo/app/views/registration.html',
controller: 'regController'
})
And remove the controller tag from HTML.Your controller tag was outside the scope of ng-view.
<div class="container">
<div class="col-md-4 col-md-offset-4" >
<h1>Student Info</h1>
</div>
<div ng-view></div>
</div>
And there is a syntax error in your controller as well
myModule.controller('regController', function ($scope){
$scope.message = 'This is Add new order screen';
})
UPDATED ANSWER: Another reason why this does not work is that you are running your example off the file system (using the file:// protocol) and many browsers (Chrome, Opera) restricts XHR calls when using the file:// protocol. AngularJS templates are downloaded via XHR and this, combined with the usage of the file:// protocol results in the error you are getting.
For more details: Couldn't load template using templateUrl in Angularjs
my code seems ok but i cannot view the html using angularjs (exercise "reader" in codecademy course")
according to my knowledge seems to be working but I am beginner so likely i have to do some tweaking
here my codes
<!doctype html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300,900' rel='stylesheet' type='text/css'>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<script src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="ReaderApp">
<div class="header">
<div class="container"> Reader </div>
</div>
<div class="main">
<div class="container">
<div ng-view></div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/BookshelfController.js"></script>
<script src="js/controllers/BookController.js"></script>
<script src="js/controllers/ChapterController.js"></script>
<!-- Services -->
<script src="js/services/books.js"></script>
</body>
</html>
the service
app.factory('books', ['$http', function($http) {
return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/books-api/books.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
the view (routed)
<div class="bookshelf row">
<!-- TODO: Loop through myBooks and display each one with this HTML -->
<div class="book col-md-3" ng-repeat="book in myBooks">
<a href="#/books/{{$index}}"> <img ng-src="{{ book.cover }}" />
<h3 class="title">{{ book.title }} </h3>
<p class="author"> {{ book.author }} </p>
</a>
</div>
</div>
controller
app.controller('BookshelfController', ['$scope','books', function($scope, books) {
books.success(function(data) {
$scope.myBooks = data;
});
}]);
and the module that create the app
var app = angular.module('ReaderApp', ['ngRoute ']);
app.config(function ($routeProvider) {
$routeProvider
.when('/books', {
controller: 'BookshelfController',
templateUrl: 'views/bookshelf.html'
})
.otherwise({
redirectTo: '/books'
});
});
thanks
Paolo
Typo in module dependency array.
var app = angular.module('ReaderApp', ['ngRoute ']);
^ remove this space!