I wrote a file new.html and I am trying to test navigation. But when i load the page View1.html should be loaded but it shows a blank page.
Here is my new.html:
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title> Angular Test</title>
</head>
<body>
<div>
<div data-ng-view></div>
</div>
<script src = "Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
</body>
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleCtr',
templateUrl: 'View1.html'
})
.when('/2',
{
controller: 'SimpleCtr',
templateUrl: 'View2.html'
})
.otherwise({ redirectTo: '/' });
});
demoApp.controller('SimpleCtr', function($scope) {
$scope.customers = [
{ name:'Rajat', city:'Kanpur' },
{ name:'Adarsh', city:'Lucknow' },
{ name:'Manoj', city:'Banaras' }
];
$scope.addCustomer = function() {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
}
});
</script>
</html>
And here is my View1.html:
<div class="container">
<h2> View 1 </h2>
Name: <br/>
<input type="text" data-ng-model="filter.name"/>
<br/>
<ul>
<li data-ng-repeat = "cust in customers | filter:filter.name | orderBy:'city'"> {{cust.name}} </li>
</ul>
Customer Name: <br/>
<input type="text" data-ng-model="newCustomer.name"/>
<br />
Customer City: <br />
<input type="text" data-ng-model="newCustomer.city"/>
<br />
<button data-ng-click = "addCustomer()"> Add Customer </button>
<a href = "#/2" > View 2 </a>
</div>
Here is View2.html:
<div class="container">
<h2> View 2 </h2>
City:
<br/>
<input type="text" data-ng-model="city" />
<br/>
<ul>
<li data-ng-repeat = "cust in customers | filter:filter.city | orderBy:'city'"> {{cust.name}} </li>
</ul>
</div>
Please help me where i am going wrong?
You are missing a closing bracket in your code on line 8
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title> Angular Test</title>
</head>
<body>
<div>
<div data-ng-view> </div> <!-- right here -->
</div>
I created a plunker here: http://plnkr.co/edit/uj4S1ybv7vJSsQctG1nD
http://plnkr.co/edit/uj4S1ybv7vJSsQctG1nD
Your views aren't loaded because you try to access them using the file:// protocol. If you put your website on a HTTP server (XAMPP for example) you'll get the desired result.
It works fine with Plnkr. http://plnkr.co/edit/NmfnOMTRHXzsLkcHfgZX?p=preview
My best guess is you are not running the file in HTTP server. The simplest HTTP server is, run this command in your working directory:
python -m SimpleHTTPServer
Then, request your program in browser
localhost:8000/new.html
Related
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>
Expected Result: Opens up Title and Comment in titleDetails.html when Title is clicked in index.html.
Problem: URL changes to http://localhost:3000/titleDetails.html when Title is clicked.
But content remains the same. Page displays 0 post when I refreshed the URL.
Screenshot: (index.html) & (titleDetails.html after clicking a title in index.html)
Screenshot: (after refreshing titleDetails.html when content remains the same after redirecting from index.html)
Code:
1) index.html
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<base href="/" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<input ng-model="post.title" class="form-control" placeholder="title"/>
<textarea ng-model="post.body" class="form-control" placeholder="body"></textarea>
<button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>
<button ng-click="updatePost(post)" class="btn btn-success btn-block">Update</button>
<div ng-repeat="post in posts">
<h2>
<a ng-click="titleDetails(post)">{{ post.title }} </a>
<a ng-click="editPost(post._id)" class="pull-right"><span class="glyphicon glyphicon-pencil"></span></a>
<a ng-click="deletePost(post._id)" class="pull-right"><span class = "glyphicon glyphicon-remove"></span></a>
</h2>
<em>{{post.posted}}</em>
<p>{{post.body}}</p>
</div>
</div>
</body>
</html>
2) titleDetails.html
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<base href="/" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<div>
<h2>
<a>{{ postDetail.title }} </a>
</h2>
<em>{{postDetail.posted}}</em>
<p>{{postDetail.body}}</p>
</div>
</div>
</body>
</html>
3) app.js
(function () {
angular
.module("BlogApp", [])
.config(function($locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
})
.controller("BlogController", BlogController);
function BlogController($scope, $http, $rootScope, $location) {
$scope.createPost = createPost;
$scope.deletePost = deletePost;
$scope.editPost = editPost;
$scope.updatePost = updatePost;
$scope.titleDetails = titleDetails;
$scope.postDetail = null;
function init() {
getAllPosts();
}
init();
function titleDetails(post)
{
$scope.postDetail = post;
$location.path('/titleDetails.html');
}
function updatePost(post){
console.log(post);
$http
.put("/api/blogpost/"+post._id, post)
.success(getAllPosts);
}
function editPost(postId){
$http
.get("/api/blogpost/"+postId)
.success(function(post){
$scope.post = post;
});
}
function deletePost(postId){
$http
.delete("/api/blogpost/"+postId)
.success(getAllPosts);
}
function getAllPosts(){
$http
.get("/api/blogpost")
.success(function(posts) {
$scope.posts = posts;
});
}
function createPost(post) {
console.log(post);
$http
.post("/api/blogpost",post)
.success(getAllPosts);
}
}
})();
AngularJS is a SPA (single page application) oriented. Your links are still tied to the classic multiple page navigation. You will have to re-work your app since $location and $http.get are not the correct services for loading templates and navigation in your scenario.
AngularJS can load the template and update the address bar accordingly as long you use the $routeProvider. Scoth.io made a simple tutorial on how to setup routing.
But you basically have to include ngRoute to your application:
angular.module('ngRouteExample', ['ngRoute'])
Then configure your routes:
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'blogPosts.html',
controller: 'BlogController'
})
.when('/post/:id', {
templateUrl: 'titleDetails.html',
controller: 'TitleController'
});
}
Since the answer can get very long, the following Plunker demonstrates a simple routing implementation for you to learn:
https://plnkr.co/edit/twmbG0G9XjOqF82JtyMC?p=preview
I am trying to learn AngularJS, and going through an older tutorial I have built out a simple app. It has an index.html and two partial views which are loaded via ui-router. I know it's not separated into different files -- this is a learning project only.
The problem is that $scope does not seem to be available in View1 or in its called JS function , so ng-repeat doesn't seem to find anything to display, and addCustomer cannot see $scope.newCustomer.name. I am sure that I am missing something simple.
index.html:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="js/angular/angular.js"></script>
<script src="js/angular-ui-router/angular-ui-router.js"></script>
<!-- your app's js -->
<script>
var demoApp = angular.module('demoApp', ['ui.router']); // [] is for dependencies
// routes
demoApp.config(function($stateProvider, $urlRouterProvider) {
var nameState = {
name: 'name',
url: '/view1',
controller: 'SimpleController',
templateUrl: 'partials/View1.html'
}
var cityState = {
name: 'city',
url: '/view2',
controller: 'SimpleController',
templateUrl: 'partials/View2.html'
}
$stateProvider.state(nameState);
$stateProvider.state(cityState);
$urlRouterProvider.otherwise('/view1');
});
// controller
demoApp.controller("SimpleController", function ( $scope, $log ) {
$scope.log = $log;
$scope.customers = [{name: 'John Doe', city:'New York'},
{name: 'Jake Smith', city:'Atlanta'},
{ name: 'Jane Doe', city:'San Francisco'}];
$scope.addCustomer = function () {
$log.log("Add customer");
$scope.customers.push(
{name: $scope.newCustomer.name, city: $scope.newCustomer.city}
);
};
});
</script>
</head>
<body>
<div>
<!-- placeholder for views inserted by ui-router -->
<ui-view></ui-view>
</div>
</body>
</html>
View1.html:
<div class="container">
<h2>View 1</h2>
Name: <input type="text" ng-model="filter.name" /> You entered: {{filter.name}}
<div class="container">
<h3> Loop </h3>
<ul>
<li ng-repeat="cust in $scope.customers | filter:filter.name">{{ cust.name }} - {{ cust.city }}</li>
</ul>
<br /> Customer Name:
<input type="text" ng-model="newCustomer.name" />
<br /> Customer City:
<input type="text" ng-model="newCustomer.city" />
<br />
<br />
<button ng-click="addCustomer()">Add Customer</button>
</div>
Switch to View 2
</div>
Use only
ng-repeat="cust in customers"
You don't have to specify $scope in the html:
ng-repeat="cust in customers"
try this :
<li ng-repeat="cust in customers">
you dont need to mention $scope.customers
try this (remove "$scope.") :
ng-repeat="cust in customers | filter:filter.name"
instead of :
ng-repeat="cust in $scope.customers | filter:filter.name"
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