New to AngularJS and no idea wats happening here and nothing is getting populated in when I run this....
Using version - 1.6
please have a look, might be very silly problem but not getting through ;)
<!DOCTYPE html>
<html data-ng-app="">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div data-ng-controller="simpleController">
Name:
<br/>
<input type="text" data-ng-model="fname" />
<br/>
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name | uppercase }} - {{ cust.city | lowercase}}</li>
</ul>
</div>
<script src="js/angular.min.js"></script>
<script>
function simpleController($scope){
$scope.customers = [
{name:'anil', city:'bengaluru'},
{name:'rahul', city:'pune'},
{name:'abc', city:'hyd'},
{name:'xyz', city:'mysore'}
];
}
Create controller from angular then use it
code is:
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div data-ng-controller="simpleController">
Name:
<br/>
<input type="text" data-ng-model="fname" />
<br/>
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name | uppercase }} - {{ cust.city | lowercase}}</li>
</ul>
</div>
<script src="js/angular.min.js"></script>
<script>
angular.module("app").controller('simpleController', simpleController);
function simpleController($scope) {
$scope.customers = [{
name: 'anil',
city: 'bengaluru'
}, {
name: 'rahul',
city: 'pune'
}, {
name: 'abc',
city: 'hyd'
}, {
name: 'xyz',
city: 'mysore'
}];
}
</script>
</body>
</html>
You have to create a controller before using it.
Create Controller by:
angular.Module("ModuleName",[]).Controller("ControllerName",function($scope){
});
According to your code:
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script>
angular.module("app",[]).controller('simpleController',
function simpleController($scope) {
$scope.customers = [{
name: 'anil',
city: 'bengaluru'
}, {
name: 'rahul',
city: 'pune'
}, {
name: 'abc',
city: 'hyd'
}, {
name: 'xyz',
city: 'mysore'
}];
});
</script>
</head>
<body>
<div data-ng-controller="simpleController">
Name:
<br/>
<input type="text" data-ng-model="fname" />
<br/>
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name | uppercase }} - {{ cust.city | lowercase}}</li>
</ul>
</div>
</body>
1st you need to have a module defined to start your project .Try this blog to learn more . For a simpler example try this.
To make your app work you need to enclose your view with ng-app in your case you have that . Then you need to create a module in your case its missing . Then add services and controller according to your need.
angular.module("app",[])
.controller("ctrl",simpleController);
function simpleController($scope){
$scope.customers = [
{name:'anil', city:'bengaluru'},
{name:'rahul', city:'pune'},
{name:'abc', city:'hyd'},
{name:'xyz', city:'mysore'}
];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="simpleController">
Name:
<br/>
<input type="text" data-ng-model="fname" />
<br/>
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name | uppercase }} - {{ cust.city | lowercase}}</li>
</ul>
</div>
Related
My browser only renders : "{{ cust.name + ',' + cust.city }}"
index.html
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
html, body, input, select, textarea
{
font-size: 1em;
}
</style>
</head>
<body>
<div data-ng-controller="SimpleController">
Name :
<br>
<input type="text" data-ng-model="name">
<br>
<ul>
<li data-ng-repeat="cust in customers">{{ cust.name + ',' + cust.city }}</li>
</ul>
</div>
<script>
var demoApp = angular.module('demoApp', []);
var controllers = {};
controllers.SimpleController = function ($scope) {
$scope.customers = [
{name:'John', city:'Paris'},
{name:'Andy La', city:'Londra'},
{name:'George', city:'Berlin'}
];
});
demoApp.controller(controllers);
</script>
</body>
<script src="Scripts/angular.min.js"></script>
</html>
Its something wrong with my code??? Any ideea what can i do?
I have tryed some other ideeas from other sites and other people but it doesn't work. I dont know what do do anymore.
I am quite new with angularJS!
Thanks!
You need to refer the angular.js script inside the body tag
Also you have extra paranthesis at the end, remove it.
DEMO
var demoApp = angular.module('demoApp', []);
var controllers = {};
controllers.SimpleController = function ($scope) {
$scope.customers = [
{name:'John', city:'Paris'},
{name:'Andy La', city:'Londra'},
{name:'George', city:'Berlin'}
];
};
demoApp.controller(controllers);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="SimpleController">
Name :
<br>
<input type="text" data-ng-model="name">
<br>
<ul>
<li data-ng-repeat="cust in customers">{{ cust.name + ',' + cust.city }}</li>
</ul>
</div>
I have been using AngularJS for some time now and this particular code block is not difficult by any means, but it's not working and there must be something extremely simple that I am missing here:
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Simple ngRepeat with Data-Binding</title>
</head>
<body>
<div data-ng-controller="SimpleController">
Name
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
{{ cust.name }} ({{ cust.city | uppercase }})
</li>
</ul>
</div>
<script type="text/javascript">
function SimpleController($scope) {
$scope.customers = [
{name: 'Bob', city: 'Atlanta'},
{name: 'James', city: 'Orlando'},
{name: 'Miles', city: 'Harlem'},
{name: 'Carter', city: 'San Francisco'}
];
}
</script>
<script src="angular.min.js"></script>
</body>
</html>
As of now, this code produces a blank page. There should be an unordered list with four records and for example, typing 'Bob' in the input box should filter the records down to the only one that contains the name 'Bob'.
This demo was already working when the AngularJS code was inline and there was no controller. I had used ngInit in order to supply the customer array. When I attempted to place the customers in their own controller, I started receive a blank page.
I'm sure I just need a second pair of eyes to look over this very simple example.
Thanks for any help you may be able to provide.
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title>Simple ngRepeat with Data-Binding</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div data-ng-controller="SimpleController">
Name
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
{{ cust.name }} ({{ cust.city | uppercase }})
</li>
</ul>
</div>
<script type="text/javascript">
angular.module('app', []).controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.customers = [
{name: 'Bob', city: 'Atlanta'},
{name: 'James', city: 'Orlando'},
{name: 'Miles', city: 'Harlem'},
{name: 'Carter', city: 'San Francisco'}
];
}
</script>
</body>
</html>
Multiple things you could change in the demo.
You should create a new angular module
var module = angular.module(name, [dependencies])
That module should be bootstrapped using ng-app
ng-app="nameOfApp"
Controller should be added to the defined module
module.controller('SimpleController', SimpleController);
EDIT: Same outcome without specifying a module
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Simple ngRepeat with Data-Binding</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div data-ng-controller="SimpleController">
Name
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
{{ cust.name }} ({{ cust.city | uppercase }})
</li>
</ul>
</div>
<script type="text/javascript">
function SimpleController($scope) {
$scope.customers = [
{name: 'Bob', city: 'Atlanta'},
{name: 'James', city: 'Orlando'},
{name: 'Miles', city: 'Harlem'},
{name: 'Carter', city: 'San Francisco'}
];
}
</script>
</body>
</html>
I'm new to AngularJS and am trying to use it to link up with a simple web API I have in place. I already have URLs that return JSON data in the format: http://127.0.0.1:8000/posts/ followed by a date in the format YYYY-MM-DD. (example would be http://127.0.0.1:8000/posts/2015-07-28)
I have an input text box which I want to use to get the JSON data from my API and list it out, meaning if I enter 2015-07-28 into the input box, it should pull the JSON data from the API appropriately without a page refresh by appending the string value from the input box onto whatever URL I want (in this case that would be http://127.0.0.1:8000/posts/).
Here is what I have as of right now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script>
var ListingApp = angular.module('ListingApp', []);
ListingApp.controller('PostCtrl', function($scope, $http) {
$scope.select = "";
var postJSON = "http://127.0.0.1:8000/posts/" + $scope.select;
console.log(postJSON);
$http.get(postJSON)
.then(function(res) {
$scope.posts = res.data;
console.log($scope);
});
});
</script>
</head>
<body ng-app="ListingApp">
<div ng-controller="PostCtrl">
<form name="dateForm">
<input type="text" id="dp" name="datepicker" ng-model="select" placeholder="Enter Date">
</form>
<span ng-bind="select" style="color: red">{{ dateForm.datepicker }}</span>
<ul>
<li ng-repeat-start="post in posts">
pk: {{ post.pk }}
</li>
<li>
author: {{ post.author }}
</li>
<li ng-repeat-end>
category: {{ post.category }}
</li>
</ul>
</div>
<!-- Importing jQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</body>
</html>
Use ng-change or watch your model. Depending on your input you may want to use the debounce in ng-model-options.
var ListingApp = angular.module('ListingApp', []);
ListingApp.controller('PostCtrl', function($scope, $http) {
$scope.select = "";
var postJSON = "http://127.0.0.1:8000/posts/" + $scope.select;
console.log(postJSON);
function getPost() {
$http.get(postJSON)
.then(function(res) {
$scope.posts = res.data;
console.log($scope);
});
}
// option #1 with ng-change="change()"
$scope.change = function() {
getPost();
}
// option #2 with watch
$scope.$watch('select', function (val, old) {
console.log(val);
getPost();
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="ListingApp">
<div ng-controller="PostCtrl">
<form name="dateForm">
<input type="text" id="dp" name="datepicker" ng-model-options="{ debounce: 500 }" ng-change="change()" ng-model="select" placeholder="Enter Date">
</form>
<span ng-bind="select" style="color: red">{{ dateForm.datepicker }}</span>
<ul>
<li ng-repeat-start="post in posts">
pk: {{ post.pk }}
</li>
<li>
author: {{ post.author }}
</li>
<li ng-repeat-end>
category: {{ post.category }}
</li>
</ul>
</div>
<!-- Importing jQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</body>
</html>
I am trying to add directive in angular and use the same to display the values. However the values are not getting displayed.
My html code
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic|Oswald' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<script src="js/vendor/angular.min.js"></script>
</head>
<body ng-app="PizzaPlanetApp">
<div class="header" >
<h1><span>Pizza</span><span>Planet</span></h1>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<h1>Specials for {{ today | date }}</h1>
<h2>Appetizers</h2>
<div ng-repeat="appetizer in appetizers">
<div class="item col-md-9">
<pizza-info info=appetizer> </pizza-info>
</div>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<!--directives-->
<script src="js/directives/pizzaInfo.js"></script>
</body>
</html>
Controller
app.controller('MainController', ['$scope', function($scope) {
$scope.today = new Date();
$scope.appetizers = [
{
name: 'Caprese',
description: 'Mozzarella, tomatoes, basil, balsmaic glaze.',
price: 4.95
},
{
name: 'Mozzarella Sticks',
description: 'Served with marinara sauce.',
price: 3.95
},
{
name: 'Bruschetta',
description: 'Grilled bread garlic, tomatoes, olive oil.',
price: 4.95
}
];
}]);
Directive(pizzaInfo.js)
app.directive('pizzaInfo', function(){
return {
restirct:'E',
scope:{
info:'='
},
templateUrl: 'js/directives/pizzaInfo.html'
};
});
Directive html(pizzaInfo.html)
<h3 >{{info.name}} </h3>
<p > {{info.description}}</p>
<p >{{info.price | currency}} </p>
I am not getting any error in the console.log. What is that i am missing here?
Syntax Error :))
app.directive('pizzaInfo', function(){
return {
/****/restrict:'E',
scope:{
info:'='
},
templateUrl: 'js/directives/pizzaInfo.html'
};
});
this is my first time asking a question on stackoverflow because so far I was able to find all the answers that I needed. This time, I couldn't though. My problem is every time I try to use ngRoute I get an error in the console saying "Error:
[$injector:modulerr] Failed to instantiate module demoApp due to:
$routeProvider.$ is undefined".
Here is my html code:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title>AngularJS</title>
<meta charset='UTF-8'>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script>
</head>
<body>
<article>
<div ng-view>
</div>
</article>
</body>
</html>
And this is my Angular code:
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.controller('Ctrl', ['$scope', function($scope){
$scope.customers = [
{firstName: 'Fostata', lastName: 'Boklik'},
{firstName: 'John', lastName: 'Hoe'},
{firstName: 'Jane', lastName: 'Doe'}
];
$scope.addCustomer = function(){
$scope.customers.push({firstName: $scope.newCustFirstName, lastName: $scope.newCustLastName});
};
}]);
demoApp.config(function($routeProvider) {
$routeProvider
.$.when('/', {
templateURL: '/home/martin4o29/Documents/WebSites/angular practice/first steps/Partials/View1.html',
controller: 'Ctrl'
})
.$.when('.view2', {
templateURL: '/home/martin4o29/Documents/WebSites/angular practice/first steps/Partials/view2.html',
controller: 'Ctrl'
})
.otherwise({
redirectTo: '/'
});
});
View1.html:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<meta charset='UTF-8'>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script>
</head>
<body data-ng-app='demoApp'>
<article data-ng-controller="Ctrl">
<input type="text" data-ng-model='name'>
<br>
<div>
<ul>
<li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li>
</ul>
</div>
<input type="text" data-ng-model='newCustFirstName'>
<br>
<input type="text" data-ng-model='newCustLastName'>
<br>
<button data-ng-click="addCustomer()">AddCustomer</button>
</article>
View2
</body>
</html>
view2.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<meta charset='UTF-8'>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script type="text/javascript" src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script>
</head>
<body data-ng-app='demoApp'>
<article data-ng-controller="Ctrl">
<input type="text" data-ng-model='name'>
<br>
<div>
<ul>
<li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li>
</ul>
</div>
</article>
</body>
</html>
First of all fix your templates
remove head scripts
remote ng-app
remove controller
Example view:
<!DOCTYPE html>
<html>
<body>
<article>
<input type="text" data-ng-model='name'>
<br>
<div>
<ul>
<li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li>
</ul>
</div>
</article>
</body>
</html>
Views are defining only the part which should be changed, not the whole app.
Replace $routeProvider.$.when with $routeProvider.when