I'm new with AngularJS. I have a simple simple code segment using ng-controller. But it does not works for me. How can I fix this code?
<!DOCTYPE html>
<html ng-app="">
<head>
<title>AngularJS Demo App </title>
</head>
<body ng-controller="simpleController">
<br />
Tags:
<br />
<input type="text" ng-model="tags" />{{tags}}
<ul>
<li ng-repeat="FriendName in friends|filter:tags | orderBy:'-age'">{{tag.FriendName}}--{{tag.age}}</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<!--<script src="Scripts/angular.min.js"></script>-->
<script>
function simpleController($scope) {
$scope.friends =
[{ name: 'John', phone: '555-1212', age: 10 },
{ name: 'Mary', phone: '555-9876', age: 19 },
{ name: 'Mike', phone: '555-4321', age: 21 },
{ name: 'Adam', phone: '555-5678', age: 35 },
{ name: 'Julie', phone: '555-8765', age: 29 }];
}
</script>
</body>
</html>
Angular team just removed the global controller on window. so you have to define you angular module
And also do what #tymeJV told you
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Demo App </title>
</head>
<body ng-controller="simpleController">
<br />
Tags:
<br />
<input type="text" ng-model="tags" />{{tags}}
<ul>
<li ng-repeat="FriendName in friends|filter:tags | orderBy:'-age'">{{FriendName.name}}--{{FriendName.age}}</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<script>
angular.module("myApp", []).controller("simpleController", function($scope) {
$scope.friends =
[{ name: 'John', phone: '555-1212', age: 10 },
{ name: 'Mary', phone: '555-9876', age: 19 },
{ name: 'Mike', phone: '555-4321', age: 21 },
{ name: 'Adam', phone: '555-5678', age: 35 },
{ name: 'Julie', phone: '555-8765', age: 29 }];
});
</script>
</body>
</html>
Related
Here is simple HTML with Angular js controller
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
</head>
<body>
//Applied Controller for interacting with view
<div data-ng-controller="SimpleController">
<h3>Adding Simple Controller</h3>
<ul>
//Binded with data-ng-repeat
<li data-ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Pheonix'},
{name: 'Alan David', city: 'England'},
{name: 'John Hello', city: 'Arizona'},
{name: 'John Fosay', city: 'Lester'}
];
}
</script>
</body>
</html>
Here result is not displayed. Error in debugger The controller with the name 'SimpleController' is not registered.
What is wrong here?
It is because you need to wrap the entire thing into a module as below
HTML
<!DOCTYPE html>
<html ng-app="sampleMod">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body>
//Applied Controller for interacting with view
<div data-ng-controller="SimpleController">
<h3>Adding Simple Controller</h3>
<ul>
//Binded with data-ng-repeat
<li data-ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
</body>
</html>
Javascript Controller
var app = angular.module('sampleMod', []);
app.controller('SimpleController', function SimpleController($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Pheonix'},
{name: 'Alan David', city: 'England'},
{name: 'John Hello', city: 'Arizona'},
{name: 'John Fosay', city: 'Lester'}
];
});
LIVE DEMO
As #charlietfl has already given you the point that you need to register angular module first.
See an updated example here
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="SimpleController" >
<h3>Adding Simple Controller</h3>
<ul>
//Binded with data-ng-repeat
<li data-ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
<script>
angular.module("myapp", [])
.controller("SimpleController", function($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Pheonix'},
{name: 'Alan David', city: 'England'},
{name: 'John Hello', city: 'Arizona'},
{name: 'John Fosay', city: 'Lester'}
];
});
</script>
</body>
</html>
This code registers a controller function named "SimpleController" in the angular module named "myapp".
You cannot bind a controller to an angular application as what you did. You need to create an app module and add that you your code. Only inside that app you can specify your controller. I have corrected the code here.
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
</head>
<body ng-app="TestApp">
//Applied Controller for interacting with view
<div data-ng-controller="SimpleController">
<h3>Adding Simple Controller</h3>
<ul>
//Binded with data-ng-repeat
<li data-ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module("TestApp", []);
angular.module("TestApp").controller('SimpleController', function ($scope) {
$scope.customers = [{ name: 'John Smith', city: 'Pheonix' },
{ name: 'Alan David', city: 'England' },
{ name: 'John Hello', city: 'Arizona' },
{ name: 'John Fosay', city: 'Lester' }];
})
</script>
</body>
</html>
As you are using angular version 1.4.8 you can't use global functions as controllers without registering them as part of the module as already suggested by charlietfl to you in the comment.
working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('SimpleController',function($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Pheonix'},
{name: 'Alan David', city: 'England'},
{name: 'John Hello', city: 'Arizona'},
{name: 'John Fosay', city: 'Lester'}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app= "myApp" ng-controller="SimpleController">
<h3>Adding Simple Controller</h3>
<ul>
<li ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>
//Applied Controller for interacting with view
<div data-ng-controller="SimpleController">
<h3>Adding Simple Controller</h3>
<ul>
//Binded with data-ng-repeat
<li data-ng-repeat="cust in customers">
{{cust.name +' '+ cust.city}}
</li>
</ul>
</div>
<script>
var app = angular.module('app', []);
app.controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Pheonix'},
{name: 'Alan David', city: 'England'},
{name: 'John Hello', city: 'Arizona'},
{name: 'John Fosay', city: 'Lester'}
];
}
</script>
</body>
</html>
I am very novice learning Angular js . I am following a video tutorials and made the following example. This doesn't show any output. can annyone let me know what am I missing.
<!DOCTYPE html>
<html >
<head>
<title>Directives with Databinding</title>
<meta charset="utf-8" />
<script src="scripts/angular.min.js"></script>
</head>
<body ng-app="ngcontrollereg">
<div ng-controller="SimpleController">
Name: <input type="text" ng-model="name" />
<br />
<ol>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name | uppercase}}-{{cust.city}}</li>
</ol>
</div>
<script>
function SimpleController($scope) {
$scope.customers = [
{ name: 'John Does', city: 'Phoenix' },
{ name: 'Lake Oswere', city: 'Phoenix' },
{ name: 'Raman', city: 'Kanchira' },
{ name: 'Alvaro', city: 'Kanchira' }
];
}
</script>
</body>
</html>
You need to create the angular module and register the controller with the module:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ngcontrollereg">
<div ng-controller="SimpleController">
Name:
<input type="text" ng-model="name" />
<br />
<ol>
<li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name | uppercase}}-{{cust.city}}</li>
</ol>
</div>
<script>
var app = angular.module('ngcontrollereg', []);
app.controller('SimpleController', function($scope) {
$scope.customers = [{
name: 'John Does',
city: 'Phoenix'
}, {
name: 'Lake Oswere',
city: 'Phoenix'
}, {
name: 'Raman',
city: 'Kanchira'
}, {
name: 'Alvaro',
city: 'Kanchira'
}];
});
</script>
</body>
Or you can create it like this :
angular.module('ngcontrollereg',[]).controller('SimpleController' ,function_Controller)
function function_Controller($scope) {
$scope.customers = [
{ name: 'John Does', city: 'Phoenix' },
{ name: 'Lake Oswere', city: 'Phoenix' },
{ name: 'Raman', city: 'Kanchira' },
{ name: 'Alvaro', city: 'Kanchira' }
];
}
I am getting following error while trying to list contents from controller function in angular JS. I am pretty new to Angular JS. I checked one the video
tutorial and tried code by my own. I written the same code as it was there in the tutorial but though it is showing this error. Unable to understand what cause this to happen.
Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=simpleController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at file:///F:/Study/angular/angular.min.js:6:417
at Rb (file:///F:/Study/angular/angular.min.js:19:510)
at sb (file:///F:/Study/angular/angular.min.js:20:78)
at $get (file:///F:/Study/angular/angular.min.js:75:396)
at file:///F:/Study/angular/angular.min.js:57:100
at r (file:///F:/Study/angular/angular.min.js:7:408)
at B (file:///F:/Study/angular/angular.min.js:56:471)
at g (file:///F:/Study/angular/angular.min.js:51:335)
at g (file:///F:/Study/angular/angular.min.js:51:352)
My code is as below -
<head>
<title>Angular ng-controller</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div data-ng-controller="simpleController">
<input type="text" data-ng-model='name' />
<ul>
<li data-ng-repeat='customer in customers | filter:name | orderBy:"city"'>{{customer.name | uppercase}} - {{customer.city|lowercase}}</li>
</ul>
</div>
<script type="text/javascript">
function SimpleController($scope) {
$scope.customers = [{
name: 'John Doe',
city: 'Pheonix'
}, {
name: 'John Smith',
city: 'New York'
}, {
name: 'Jane Doe',
city: 'San Fransisco'
}];
}
</script>
</body>
You must inject your controller into application module.
Give your app a name:
<html ng-app='myApp'>
Inject controller:
var app = angular.module('myApp', []);
app.controller('SimpleController', function($scope) {
$scope.customers = [
{ name:'John Doe',city : 'Pheonix'},
{ name : 'John Smith',city: 'New York'},
{ name : 'Jane Doe',city : 'San Fransisco'}
];
}
Controller simpleController should be registered under angular app.
see the working code below.
var app = angular.module('app', []);
app.controller('simpleController', function($scope) {
$scope.customers = [{
name: 'John Doe',
city: 'Pheonix'
}, {
name: 'John Smith',
city: 'New York'
}, {
name: 'Jane Doe',
city: 'San Fransisco'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
<div data-ng-controller="simpleController">
<input type="text" data-ng-model='name' />
<ul>
<li data-ng-repeat='customer in customers | filter:name | orderBy:"city"'>{{customer.name | uppercase}} - {{customer.city|lowercase}}</li>
</ul>
</div>
</div>
Your code is absolute correct for the angular version less than 1.3 except the function name spelling. It should be data-ng-controller="SimpleController" while calling as you have declared.
You can try after including following cdn
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js
jsfiddle: http://jsfiddle.net/samirkumardas/3tt3p09h/
You are not defined angular.module in your script.
<head>
<title>Angular ng-controller</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app='filterApp'>
<div ng-controller="simpleController">
<input type="text" data-ng-model='name' />
<ul>
<li ng-repeat='customer in customers | filter:name | orderBy:"city"'>{{customer.name | uppercase}} - {{customer.city|lowercase}}</li>
</ul>
</div>
<script type="text/javascript">
var app = angular.module('filterApp', []);
app.controller('SimpleController', function($scope) {
$scope.customers = [{
name: 'John Doe',
city: 'Pheonix'
}, {
name: 'John Smith',
city: 'New York'
}, {
name: 'Jane Doe',
city: 'San Fransisco'
}];
}
</script>
</body>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script data-require="ng-table#*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
<script data-require="ng-table-export#0.1.0" data-semver="0.1.0" src="http://bazalt-cms.com/assets/ng-table-export/0.1.0/ng-table-export.js"></script>
<link data-require="ng-table#*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
<link data-require="bootstrap-css#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="main" ng-controller="DemoCtrl">
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'">
<span ng-if="!user.$edit">{{user.name}}</span>
<div ng-if="user.$edit"><input class="form-control" type="text" ng-model="user.name" /></div>
</td>
<td data-title="'Age'" width="200">
<span ng-if="!user.$edit">{{user.age}}</span>
<div ng-if="user.$edit"><input class="form-control" type="number" ng-model="user.age" /></div>
</td>
<td data-title="'Actions'" width="200">
<a ng-if="!user.$edit" href="" class="btn btn-default btn-xs" ng-click="user.$edit = true">Edit</a>
<a ng-if="user.$edit" href="" class="btn btn-primary btn-xs" ng-click="user.$edit = false">Save</a>
</td>
</tr>
</table>
</body>
</html>
I have this simple example..it works.
but when I wanted to do any like this
var App = angular.module('App', ['ngRoute']).controller('tableController', function ($scope, ngTableParams, $sce) {
$scope.data = [{ name: "Moroni", age: 50 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 }];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: $scope.data.length, // length of data
getData: function ($defer, params) {
$defer.resolve($scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
App.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: function ($scope) {
}
})
.when('/about', {
templateUrl: 'about.html',
controller: 'tableController'
});
});
});
<html ng-app="App">
<head>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script data-require="ng-table#*" data-semver="0.3.0" src="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.js"></script>
<script data-require="ng-table-export#0.1.0" data-semver="0.1.0" src="http://bazalt-cms.com/assets/ng-table-export/0.1.0/ng-table-export.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular-route.min.js"></script>.
<link data-require="ng-table#*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
<link data-require="bootstrap-css#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link href="style.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<ul class="nav navbar-nav">
<li> home</li>
<li> about</li>
</ul>
</nav>
<div ng-view></div>
</body>
</html>
something go wrong.
you aren't loading ngRoute, and you have syntax errors in your javascript.
As well, you've got your ng table scripts loading BEFORE your angular scripts.
Here is the code.
Working version - Grid displays and page load.
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid Example</title>
<link href="http://localhost:4090/Content/ng-grid.min.css" rel="stylesheet" type="text/css" />
<script src="http://localhost:4090/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://localhost:4090/Scripts/angular.js" type="text/javascript"></script>
<script src="http://localhost:4090/Scripts/ng-grid-2.0.6.min.js" type="text/javascript"></script>
<script>
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [{ name: "Moroni", age: 50 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData' };
});
</script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions">
</div>
</body>
</html>
Non working version. Moved the grid code under a button click.
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid Example</title>
<link href="http://localhost:4090/Content/ng-grid.min.css" rel="stylesheet" type="text/css" />
<script src="http://localhost:4090/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://localhost:4090/Scripts/angular.js" type="text/javascript"></script>
<script src="http://localhost:4090/Scripts/ng-grid-2.0.6.min.js" type="text/javascript"></script>
<script>
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.LoadGrid = function () {
alert('');
$scope.myData = [{ name: "Moroni", age: 50 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData' };
}
});
</script>
</head>
<body ng-controller="MyCtrl">
<button id="click" ng-click="LoadGrid()">
Load Grid</button>
<div class="gridStyle" ng-grid="gridOptions">
</div>
</body>
</html>
Getting the error : - TypeError: Cannot set property 'gridDim' of undefined
Your ng-grid is initializing before you instantiate $scope.gridOptions, as as such it throws the undefined error. Also, if you change a $scope property programatically, you may need to use $apply to get your changes to display on the templates.
So what you need to do is make sure the data structures exist (even if they're empty) and call $apply when "starting" the data-grid:
app.controller('MyCtrl', function ($scope) {
$scope.myData = [];
$scope.gridOptions = { data: 'myData' };
$scope.LoadGrid = function () {
alert('');
$scope.myData = [{ name: "Moroni", age: 50 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34}];
$scope.$apply();
}
});
Here is an edited plunkr from the ngGrid examples page, to show this working:
http://plnkr.co/edit/SnJ9J0?p=preview
Move the Tag at the end before the last (will also load faster).
I presume the error is because the javascript is loading before the html is ready.
Does the console error log says anything else?
It's OK to define your gridOptions before the data actually gets there. That's the gorgeous part about the way Angular binds data - just set the data to the $scope object that will eventually have data & your grid will be smart enough to update itself by an internal $watch on the data item.