My main html page is given below index.html
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="ISO-8859-1">
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>AngulAir</h1>
<div>
<ul>
<li ng-repeat="airport in airports">
{{airport.code}}-{{airport.city}}
-Edit
</li>
</ul>
<p ng-show="currentAirport">currentAirport:{{currentAirport.name}}</p>
</div>
<p ng-show="editing.name"><input type="text" ng-model="editing.name" value=""/></p>
<div ng-include="sidebyURL"></div>
<div ng-include="formURL"></div>
</div>
</body>
</html>
and I am using javascript file as given below app.js which present inside js/controllers folder
function AppCtrl($scope) {
$scope.airports = {
"PDX" : {
"code" : "PDX",
"name" : "Portland International Airport",
"city" : "Portland",
"destinations" : [ "LAX", "SFO" ]
},
"STL" : {
"code" : "STL",
"name" : "Lampbert-St. Louis International Airport",
"city" : "St. Louis",
"destinations" : [ "LAX", "MKE" ]
},
"MCI" : {
"code" : "MCI",
"name" : "Kansas City International Airport",
"city" : "Kansas City",
"destinations" : [ "SFO", "LAX" ]
},
};
$scope.currentAirport=null;
$scope.sidebyURL='partials/airport.html';
$scope.formURL='partials/form.html';
$scope.setAirport = function(code) {
$scope.currentAirport = $scope.airports[code];
};
$scope.editAirport = function(code) {
$scope.editing = $scope.airports[code];
};
}
and I am including 2 html files in the main index.html file that 2 files airport.html is
<div ng-show="currentAirport">
<h3>{{currentAirport.name}}</h3>
<h4>Destinations</h4>
<ul>
<li ng-repeat="destination in currentAirport.destinations">
{{destination}}
</li>
</ul>
</div>
and another form.html is
<div ng-show="editing">
<h3>Edit Airport</h3>
<input type="text" ng-model="editing.name" value=""/>
</div>
and my 2 remaining html files are present in the folder partials and while executing index.html I am not able to include form.html and airport.html inside index.html file if you have any idea about these let me know thank you.....
Did you actually set scope.editing and scope.currentAirport so the ng-show returns true? I've copied and pasted your code to plunker and works as expected
List: <button ng-repeat="airport in airports" ng-click="setAirport(airport.code)">{{airport.code}}</button>
Edit: <button ng-repeat="airport in airports" ng-click="editAirport(airport.code)">{{airport.code}}</button>
http://plnkr.co/edit/wQt5wrTkE8YXwOaKacBq
Related
I have implemented two browser based pages, which populates country names in a select tag.
The first approach is server-side rendering using java, jsp. Please follow the code below.
CountryBean.java
package com.bean;
import java.io.Serializable;
public class CountryBean implements Serializable{
private int countryId;
private String countryName;
public CountryBean(int countryId, String countryName) {
this.countryId = countryId;
this.countryName = countryName;
}
public int getCountryId() {
return countryId;
}
public void setCountryId(int countryId) {
this.countryId = countryId;
}
public String getCountryName() {
return countryName;
}
public void setCountryName(String countryName) {
this.countryName = countryName;
}
#Override
public int hashCode() {
int num = this.countryId * 31;
num *= 11 * this.countryName.hashCode();
return num;
}
}
ServersideRendering.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%# page import="com.bean.CountryBean" %>
<%# page import="java.util.List" %>
<%# page import="java.util.ArrayList" %>
<%! List<CountryBean> countrylist = null; %>
<%
countrylist = new ArrayList<CountryBean>();
countrylist.add(new CountryBean(100,"Saudi Arabia"));
countrylist.add(new CountryBean(101,"South Africa"));
countrylist.add(new CountryBean(102,"South Korea"));
countrylist.add(new CountryBean(103,"South Sudan"));
countrylist.add(new CountryBean(104,"Singapore"));
countrylist.add(new CountryBean(105,"Somalia"));
countrylist.add(new CountryBean(106,"Sweden"));
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Server-side Loading</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body class="container">
<div class="row">
<div class="col-md-12">
<table class="table">
<tr>
<td align="right" valign="center">Countries</td>
<td>
<select class="form-control">
<%for(CountryBean countryBean : countrylist){%>
<option value='<%=countryBean.getCountryId()%>'><%=countryBean.getCountryName()%></option>
<%} %>
</select>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
The second approach is client-side rendering where its just html,css,javascript to populate the data in select tag, the code is as follows,
ClientsideRendering.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Client-side rendering</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javaScript">
$(document).ready(function(){
var countryList = [
{ "countryName" : "Saudi Arabia", "countryId" : "100" },
{ "countryName" : "South Africa", "countryId" : "101" },
{ "countryName" : "South Korea", "countryId" : "102" },
{ "countryName" : "South Sudan", "countryId" : "103" },
{ "countryName" : "Singapore", "countryId" : "104" },
{ "countryName" : "Somalia", "countryId" : "105" },
{ "countryName" : "Sweden", "countryId" : "106" }
];
var optionText = "";
$.each(countryList,function(index, countryObject){
optionText += `<option value='${countryObject.countryId}'>${countryObject.countryName}</option>`;
});
$("#countries").append(`${optionText}`);
});
</script>
</head>
<body class="container">
<div class="row">
<div class="col-md-12">
<table class="table">
<tr>
<td align="right" valign="center">Countries</td>
<td>
<select class="form-control" id="countries"></select>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
According to my understanding in server-side rendering I am just writing the HTML pre-loaded with data in request.
Where as in client-side I just dynamically write the data in html.
Is my understanding correct ?
In which cases I need to go with server-side rendering and when should I go with client-side rendering.
What about data sensitive websites like banking and financial services websites, in those cases which will be prefered ?
Hy everybody, first question here.
I'm learning angularjs and right now i'm stuck on "Controller and Scope" chapter.
I'm trying to search trough an array of objects and show items that match my query; unfortunately my screen stays blank.
Here's my code:
<!DOCTYPE html>
<html ng-app="">
<head>
<title>Search and print with Scope</title>
</head>
<body>
<div ng-controller="Controller">
<input type="search" ng-model="q" placeholder="CPU" />
<ul>
<li ng-repeat="proc in cpu | filter:q">
{{proc.house}} - {{proc.model}}
</li>
</ul>
</div>
<script src="angular.min.js"></script>
<script>
function Controller($scope)
$scope.cpu = [
{ house: 'Intel', model: 'I7' },
{ house: 'AMD', model: 'Ryzen' },
{ house: 'Qualcomm', modello: 'Snapdragon' }
];
</script>
</body>
</html>
What's wrong?
EDIT for EDIT:Just for those who might look at this question, my error was to call ng-app twice, once in the html tag and once in body tag.
EDIT: I'm here again; I modified the code using the given answers, but I still got a search box and a blank screen. I doubt is code related since I also tried to simply copy and paste it in a new file but i got the same result. What could be?
Code is down here:
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var app = angular.module('demoApp', [])
app.controller('SimpleController', function($scope) {
$scope.cpu = [{
house: 'Intel',
model: 'I7'
},
{
house: 'AMD',
model: 'Ryzen'
},
{
house: 'Qualcomm',
model: 'Snapdragon'
}
];
});
</script>
<title>Search and print with Scope</title>
</head>
<body ng-app="demoApp">
<div ng-controller="SimpleController">
<input type="search" ng-model="q" placeholder="CPU" />
<ul>
<li>hi</li>
<li ng-repeat="proc in cpu">
{{proc.house}} - {{proc.model}}
</li>
<li>hi again</li>
</ul>
</div>
</body>
</html>
You need to have a angular module and ng-app mentioned as below
DEMO
var app = angular.module('myApp',[])
app.controller('Controller',function($scope){
$scope.cpu = [
{ house: 'Intel', model: 'I7' },
{ house: 'AMD', model: 'Ryzen' },
{ house: 'Qualcomm', modello: 'Snapdragon' }
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<head>
<title>Search and print with Scope</title>
</head>
<body>
<div ng-controller="Controller">
<input type="search" ng-model="q" placeholder="CPU" />
<ul>
<li ng-repeat="proc in cpu | filter:q">
{{proc.house}} - {{proc.model}}
</li>
</ul>
</div>
</body>
</html>
First of all you are trying to get the scope data before declaring it, you need to load the script before using ng-repeat, so move the script before the div definition.
Also you are not correctly defining the Controller, it should be defined within an app module, then bind the ng-app and the Controller in your HTML.
<!DOCTYPE html>
<html ng-app="">
<head>
<title>Search and print with Scope</title>
<script src="angular.min.js"></script>
<script>
var app = angular.module('angularApp',[])
app.controller('Controller',function($scope){
$scope.cpu = [
{ house: 'Intel', model: 'I7' },
{ house: 'AMD', model: 'Ryzen' },
{ house: 'Qualcomm', modello: 'Snapdragon' }
];
});
</script>
</head>
<body ng-app="angularApp">
<div ng-controller="Controller">
<input type="search" ng-model="q" placeholder="CPU" />
<ul>
<li ng-repeat="proc in cpu | filter:q">
{{proc.house}} - {{proc.model}}
</li>
</ul>
</div>
</body>
</html>
I have my simple HTML-file and JSON-file
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-controller="aboutController">
<p ng-repeat="post in about">
{{name.about}}
</p>
</div>
<script src="angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('aboutController', function($scope, $http) {
$http.get('about.json').success(function(data, status, headers, config) {
$scope.about = data;
console.log('this is data:',data);
});
});
</script>
</body>
</html>
{
"name" : "Peter",
"surname" : "Chpoksky"
}
I need to transfer data from a json-file, but for some reason, the browser displays nothing
what is the problem?
In about you get your json so this json :
{
"name" : "Peter",
"surname" : "Chpoksky"
}
So to use this object you have to do
<p ng-repeat="post in about">
{{post.name}} <!-- To display the name -->
{{post.surname}} <!-- To display the surname -->
</p>
I just began to learn AngularJS by following this youtube video. First part is okay except when it comes to the controller part.
My code is as below (it's the same as in the video)
<html data-ng-app="">
<head>
<script src="angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [{
name: 'Kamal',
city: 'York'
}, {
name: 'Sunil',
city: 'DC'
}, {
name: 'Malith',
city: 'Gotham'
}];
}
</script>
</head>
<body>
<div data-ng-controller="SimpleController">Name :
<input type="text" data-ng-model="name" />
</br>
<ul>
<li data-ng-repeat="cust in customers | filter :name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
</body>
</html>
when I add data-ng-controller="SimpleController" it will not working and give the following error in the console.
Then when I try to post the question in the SO , I tried it in JSfiddle. I added Angular.js and selected onLoad and not working. But when I selected no wrap - in <head> it works fine.
But I can't do that in my local machine so the problem remains as it is.
Can anybody point me to the correct path ?
You need to initialize app:
var app = angular.module("myApp", []);
<div ng-app="myApp" ng-controller="SimpleController">
<!-- ^^^^^ -->
Demo: http://jsfiddle.net/xy23ybzp/2/
Docs: https://docs.angularjs.org/guide/bootstrap
Check Manual Initialization Section in Docs
After getting help from the answers listed here for this question. I got it working. Below is the working code.
<html >
<head>
<script src = "angular.min.js" ></script>
<script>
var app = angular.module("myApp", []);
app.controller("SimpleController",function($scope){
$scope.customers = [
{name :'Kamal',city : 'York'},
{name : 'Sunil',city:'DC'},
{name : 'Malith',city:'Gotham'}
];
});
</script>
</head>
<body >
<div ng-app="myApp" data-ng-controller="SimpleController">
Name :
<input type="text" data-ng-model="name" />
</br>
<ul>
<li data-ng-repeat="cust in customers | filter :name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
</body>
</html>
I thought loading an external template with Angularjs is as simple as this below,
<div ng-include='template/index.php'></div>
But it does not print anything out on the browser. What have I missed?
The html,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angualr</title>
<meta charset="utf-8">
<script src="js/angular.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div ng-include='template/index.php'></div>
</body>
</html>
the template,
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
<input type='text' ng-model='searchText' />
<ul>
<li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>
</ul>
<input type='text' ng-model='newPerson' />
<button ng-click='addNew()'>Add</button>
</div>
js/app.js,
var app = angular.module('MyTutorialApp',[]);
js/maincontroller.js,
app.controller("MainController", function($scope){
$scope.people = [
{
id: 0,
name: 'Leon',
music: [
'Rock',
'Metal',
'Dubstep',
'Electro'
],
live: true
},
{
id: 1,
name: 'Chris',
music: [
'Indie',
'Drumstep',
'Dubstep',
'Electro'
],
live: true
}
];
$scope.newPerson = null;
$scope.addNew = function() {
if ($scope.newPerson != null && $scope.newPerson != "") {
$scope.people.push({
id: $scope.people.length,
name: $scope.newPerson,
live: true,
music: [
'Pop',
'RnB',
'Hip Hop'
]
});
}
}
});
EDIT:
Directories,
index.html
js/
...
...
template/
index.php
EDIT 2:
index.html,
<div ng-app='MyTutorialApp'>
<div ng-include='template/index.php'></div>
</div>
template/index.php,
<div id='content' ng-controller='MainController'>
<input type='text' ng-model='searchText' />
<ul>
<li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>
</ul>
<input type='text' ng-model='newPerson' />
<button ng-click='addNew()'>Add</button>
</div>
Live demo here (click).
ng-include looks for a $scope property, so you need to pass it a string, like this: ng-include="'/template/index.php'".
<div ng-include="'/template/index.php'"></div>
What you were passing to it essentially makes it look for this in your controller: $scope['/template/index.php'] = 'some string';
You're also bootstrapping angular in the template itself - so how could it be included? ng-app needs to be in the main page so that ng-include can work!
<some-element ng-app="myApp">
<!-- in here, angular things work (assuming you have created an app called "myApp" -->
<div ng-include="'/template/index.php'"></div>
</some-element>
Just replace some-element with something like html, body or whatever element you want the app to work from.
You bootstrapped your ng-app in the template, but you have to bootstrap it in your main page.
So just move the ng-app directive from the template to the main-page, e.G.
<html ng-app="MyTutorialApp">
<div ng-include src='template/index.php'></div>
try this
and add ng-app into top of the page
<html ng-app='MyTutorialApp'>
you must have bootstrap you angular application into your index.html