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"
Related
I just started learning AngularJS and facing a problem. When I run the follwing code {{ cust.name }} - {{ cust.city }} gets printed instead of the actual data that I pass.
My code:
<html data-ng-app="">
<head>
<title>Using angularJS directive and 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"> {{ cust.name }} - {{ cust.city }}
</li>
</ul>
</div>
<script src="Scripts/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [{
name: 'Abhijeet Singh',
city: 'New Delhi'
}, {
name: 'Dhiraj Mehta , city: New Delhi '
}];
}
</script>
</body>
</html>
A few things are missing from your code.
First it is good practice to name your app and a controller:
<body data-ng-app='myApp' data-ng-controller='myCtrl'>
Second whenever you refer to anything in Angular is has to be in scope of the controller. Currently your $scope is in scope of the "SimpleController" function and not of Angular's controller (you need an angular controller to have $scope available both within the controller and within your html e.g. the double curly brackets):
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//$scope is available anywhere within this scope
}
Here is an example of your code working: https://jsfiddle.net/AKMorris/03hshn5m/
You will need to declare the app name and see the other settings.
Rest of the things are same.
var myApp = angular.module("MyApp", []);
var simpleController = angular.module("SimpleController", SimpleController);
simpleController.$inject = ['$scope'];
function SimpleController($scope){
$scope.customers = [{
name: 'Abhijeet Singh',
city: 'New Delhi'
}, {
name: 'Dhiraj Mehta , city: New Delhi '
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html data-ng-app="MyApp">
<head>
<title>Using angularJS directive and 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"> {{cust.name }}-{{cust.city}}
</li>
</ul>
</div>
</body>
</html>
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
I am new to angular js
Controller is not working correctly in my code
i am trying to run following code
<!DOCTYPE html>
<html data-ng-app >
<head>
<title>Using AngularJS Directives and Data binding</title>
</head>
<body>
name
<br />
<div data-ng-controller="SimpleController">
<input type="text" data-ng-model="name"/>{{name}}
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:city"> {{cust.name | uppercase}}-{{cust.city | lowercase}} </li>
</ul>
</div>
<script src= "angular/angular.min.js"></script>
<script>
var demoApp = angular.module('demoApp',[]);
demoApp.controller('SimpleController', function($scope){
$scope.customers=[
{name:'John Smith', city:'kashipur'},
{name:'John fds' , city:'san francisko'},
{ name:'shubham', city:'giarhineg'},
{name:'batra', city:'world'}];
});
</script>
</body>
</html>
</html>
but its not giving desire output .
please tell me if i am doing something wrong .
You are missing to add value in your ng-app directive that tell angular to run demoApp module on the page.
ng-app="demoApp"
You should add the name of your app.
ng-app="demoApp"
var demoApp = angular.module('demoApp', []);
demoApp.controller('SimpleController', function($scope) {
$scope.customers = [{
name: 'John Smith',
city: 'kashipur'
}, {
name: 'John fds',
city: 'san francisko'
}, {
name: 'shubham',
city: 'giarhineg'
}, {
name: 'batra',
city: 'world'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp">
name
<br />
<div data-ng-controller="SimpleController">
<input type="text" data-ng-model="name" />{{name}}
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:city">{{cust.name | uppercase}}-{{cust.city | lowercase}}</li>
</ul>
</div>
</div>
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>
This is a simple inline controller which isn't working. I am unable to find the bug. I have tested this with ng-init and printed out with ng-repeat, works fine. With ng-controller, it doesn't.
<html data-ng-app>
<head>
<title></title>
</head>
<body data-ng-controller="SimpleController">
Name:
<br />
<input type="text" data-ng-model="name">
<ul>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name}} ---- {{cust.city}}</li>
</ul>
<script src="Scripts/angular.min.js"></script>
<script>
function SimpleController($scope){
$scope.customers=[{name:'John Doe', city:'New York'},{name:'Jane Doe', city:'Melbourne'},{name:'Jack Daniels',city:'Atlanta'}];
}
</script>
</body>
</html>
You need to have the app initiated in javascript using
angular.module
for the app name you specifying in data-ng-app
Working Fiddle
Javascript Code:
angular.module("myApp", [])
.controller('SimpleController', function ($scope) {
$scope.customers = [{
name: 'John Doe',
city: 'New York'
}, {
name: 'Jane Doe',
city: 'Melbourne'
}, {
name: 'Jack Daniels',
city: 'Atlanta'
}];
});
Lots of chatter in the comments so I'll sum this in an answer.
As #squiroid correctly stated, the use of global controllers (meaning define a function and then just reference it) has been removed in recent Angular versions and in 1.3 specifically.
You have to define your module and register your controller to it, so in overall you need:
var myApp = angular.module("myApp", []);
function SimpleController($scope){
$scope.customers=[{name:'John Doe', city:'New York'},{name:'Jane Doe', city:'Melbourne'},{name:'Jack Daniels',city:'Atlanta'}];
}
myApp.controller("SimpleController", SimpleController); //This is a must now
And in your view you need to refer to your module:
<html data-ng-app="myApp">
Your code works fine in angular 1.2 version.
but in case if you are using angular 1.3+ it will not.
With angular 1.3 you can no longer use global controller declaration on the global scope. You would need to define the controller using inline declaration.
In your HTML:
<html data-ng-app="app">
In js:
angular.module('app', []).controller('SimpleController', function($scope){
$scope.customers=[{name:'John Doe', city:'New York'},{name:'Jane Doe', city:'Melbourne'},{name:'Jack Daniels',city:'Atlanta'}];
});
or with your existing controller:
angular.module('app', []).controller('SimpleController', SimpleController)
V31,
You definitely need to bootstrap your module since you are using 1.3 because using controller as a global function like you've done has been deprecated in 1.3.
See a complete working example below. Try it out and see if it helps you.
<html data-ng-app="customersApp">
<head>
<title></title>
</head>
<body data-ng-controller="SimpleController">
Name:
<br />
<input type="text" data-ng-model="name">
<ul>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name}} ---- {{cust.city}}</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<script>
var app = angular.module('customersApp', [])
app.controller('SimpleController', ['$scope', function ($scope) {
$scope.customers = [
{ name: 'John Doe', city: 'New York' },
{ name: 'Jane Doe', city: 'Melbourne' },
{ name: 'Jack Daniels', city: 'Atlanta' }
];
}]);
</script>
</body>
</html>
SO1
For best practice in angular use module (I am not considering Angular 2.0 where module is dead):-
And for controllers use "controller as " and bind data on controller not on $scope.
<body data-ng-app="myApp" data-ng-controller="SimpleController as ctrl">Name:
<br />
<input type="text" data-ng-model="ctrl.name">
<ul>
<li ng-repeat="cust in ctrl.customers | filter:ctrl.name | orderBy:'city'">{{ cust.name}} ---- {{cust.city}}</li>
</ul>
</body>
Ctrl:-
angular.module("myApp", [])
.controller('SimpleController', function () {
this.customers = [{
name: 'John Doe',
city: 'New York'
}, {
name: 'Jane Doe',
city: 'Melbourne'
}, {
name: 'Jack Daniels',
city: 'Atlanta'
}];
});
Fiddle
I did 2 examples using Angular 1.2.26 and 1.3.12
Example using 1.3.12
<!DOCTYPE html>
<html ng-app="test">
<head>
<!--<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
</head>
<body ng-controller="SimpleController">
Name:
<br />
<input type="text" data-ng-model="name">
<ul>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name}} ---- {{cust.city}}</li>
</ul>
<script>
var app = angular.module('test', []);
app.controller('SimpleController', function($scope){
$scope.customers=[{name:'John Doe', city:'New York'},
{name:'Jane Doe', city:'Melbourne'},
{name:'Jack Daniels',city:'Atlanta'}];
});
</script>
</body>
</html>
The main changes here were the use of module and controller inside script
Example using version 1.2.26
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-app="" data-ng-controller="SimpleController">
Name:
<br />
<input type="text" data-ng-model="name">
<ul>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name}} ---- {{cust.city}}</li>
</ul>
<script>
function SimpleController($scope){
$scope.customers=[{name:'John Doe', city:'New York'},
{name:'Jane Doe', city:'Melbourne'},
{name:'Jack Daniels',city:'Atlanta'}];
}
</script>
</body>
</html>
here the only change I did was add ng-app="" in body