Learning to use angularJS,
I have this particular code in my index.html. Dynamic typing works in the upper part, but the injection doesn't. What possibly might have been gone wrong?
Code :
<!DOCTYPE html>
<html>
<head>
<title>Test1</title>
</head>
<body ng-app="">
<!-- Dynamic Type -->
<input type="text" ng-model="name1" /><br>
<h1>Hello {{name1}}</h1>
<!-- End dynamic Type -->
<!-- Scope Injection begin-->
<div class="container" ng-controller="myController">
<input type="text" ng-model="naam" /><br>
<h3>Looping</h3>
<ul>
<li data-ng-repeat="cust in customerlist | filter:naam | orderBy:'city'"> {{cust.name | uppercase}} - {{cust.city}} </li>
</ul>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
function myController ($scope) {
$scope.customerlist = [
{name: 'Raj Bannerjee', city: 'Zaire'},
{name: 'Prasun Bannerjee', city: 'Udaipur'},
{name: 'Raj Malhotra', city: 'Dubai'},
{name: 'Prasun Joshi', city: 'Mumbai'}
];
}
</script>
</body>
</html>
From version 1.3 angular disabled using global controller constructors:
https://github.com/angular/angular.js/commit/3f2232b5a181512fac23775b1df4a6ebda67d018
With the exception of simple demos, it is not helpful to use globals
for controller constructors. This adds a new method to
$controllerProvider to re-enable the old behavior, but disables this
feature by default.
BREAKING CHANGE: $controller will no longer look for controllers on
window. The old behavior of looking on window for controllers was
originally intended for use in examples, demos, and toy apps. We found
that allowing global controller functions encouraged poor practices,
so we resolved to disable this behavior by default.
So you must refactor it like so:
angular.module('app',[])
.controller('myController', ['$scope', function($scope) {
$scope.customerlist = [
{name: 'Raj Bannerjee', city: 'Zaire'},
{name: 'Prasun Bannerjee', city: 'Udaipur'},
{name: 'Raj Malhotra', city: 'Dubai'},
{name: 'Prasun Joshi', city: 'Mumbai'}
];
}]);
And also refer to your module:
<body ng-app="app">
Related
Markup:
<!DOCTYPE html>
<html ng-app="test">
<head>
<script data-require="angular.js#1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ctrl">
<h1>Hello Plunker!</h1>
<select ng-model="user.item_id">
<option ng-selected="i.id == user.item_id" ng-repeat="i in items" value={{i.id}}>{{i.name}}</option>
</select>
</body>
</html>
JS:
var module = angular.module("test", []);
module.controller('ctrl', function($scope){
$scope.items = [
{id: 1, name: 'foo'},
{id: 2, name: 'bar'},
{id: 3, name: 'baz'},
];
$scope.user = {};
$scope.selectedItem = {id: 1};
$scope.user.item_id = $scope.selectedItem.id;
});
Plunker: https://plnkr.co/edit/7oi4KwzMhGi3kdltSklg?p=preview
Problem: if you inspect the html code of the select, you will see that the HTML selected attribute is properly placed.
However, it doesn't show as the highlighted option. Why?
== EDIT ==
That plunker code is working as expected on angular 1.3.20, but it's broken in 1.4.x or 1.5.x
Working plunker: https://plnkr.co/edit/0ApQeZ6Kar2yQisELXfT?p=preview
== EDIT2 ==
I've issued a ticket on angularjs queue: https://github.com/angular/angular.js/issues/14876#issuecomment-231010972
Basically, they say we should stick to ngOptions, though they don't know why ngSelected got broken.
Well, you could use ng-options instead...
<select ng-model="user.item_id" ng-options="i.id as i.name for i in items">
</select>
Check here https://plnkr.co/edit/G4Hu4ZpShaUPCE5zTsdV
I don't see this working on any version that you mention. Anyway, check this plunker
https://plnkr.co/edit/V0ybr70kRpkcaxLKBHTK?p=preview
The way that you wrote the select, i can reproduce the same thing on any input. And the reason is because it is not how angular binding works, your select doesn't know anything about his model, unless you change the model (i.e. using ng-init).
Using this way:
<option ng-selected="i.id == user.item_id" ng-repeat="i in items" value={{i.id}}>{{i.name}}</option>
doesn't mean that your model will update, it only updates the dom element.
I have a simple example where I am exptecting my paragraphs to filter out values based on unique age, but I get the unknown provider error. How ?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p ng-repeat="x in persons | unique: 'age'">{{x.name}}</p>
<script>
//App declaration
var app = angular.module('myApp',[]);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.persons = [{name: "Peter",age:23},{name:"Laila",age:25},{name:"Rosy",age:23}];
});
</script>
</body>
</html>
You need to inject 'ui.directives' and 'ui.filters' module to your app
var app = angular.module('myApp',['ui.directive', 'ui.filters']);
Since ui.directives and ui.filters modules are present in AngularUI, you will also need to refer angular-ui.js in your application
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
Your full code should look something like this
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p ng-repeat="x in persons | unique: 'age'">{{x.name}}</p>
<script>
//App declaration
var app = angular.module('myApp',['ui.directives','ui.filters']);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.persons = [{name: "Peter",age:23},{name:"Laila",age:25},{name:"Rosy",age:23}];
});
</script>
</body>
</html>
That because the unique filter can currently be found as part of AngularJs UI Utils.
To make this work you must include it as an additional reference in your module angular.module('myApp', ['ui', 'ui.filters']);
Hope this help you.
here is my code.. where I made problem.. please help me out.. I am trying to create a controller what fill fetch data and show in html li part.. but I don't understand where is the error.. I have tried with adding jQuery min library and without it.. but failure.. kindly help me to short out this problem..
<html data-ng-app="myApp">
<head>
<title>First Angular application</title>
</head>
<body>
checkNames:
<input type="text" data-ng-model="namek">
<div class="container" data-ng-controller="SimpleController">
<ul>
<li data-ng-repeat="cast in castomers | filter:namek">{{cast.name|uppercase}} - {{cast.city}}</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.castomers = [{ name: 'krishnendu sarkar', city: 'kolkata' },
{ name: 'chanchal sarkar', city: 'bangalore' },
{ name: 'nilava chakraborty', city: 'pune' }]
};
</script>
</body>
</html>
thanks in advance..
You should create and angular module first with name myApp then you could have data-ng-controller="SimpleController" to be move it over body tag so that the namek input field included inside the SimpleController controller context.
Add ng-app="myApp" on the body tag. so that angular module gets initialize on page.
Markup
<body data-ng-controller="SimpleController">
checkNames:
<input type="text" data-ng-model="namek">
<div class="container">
<ul>
<li data-ng-repeat="cast in castomers | filter:namek">{{cast.name|uppercase}} - {{cast.city}}</li>
</ul>
</div>
</div>
Controller
angular.module('myApp', []).controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.castomers = [{
name: 'krishnendu sarkar',
city: 'kolkata'
}, {
name: 'chanchal sarkar',
city: 'bangalore'
}, {
name: 'nilava chakraborty',
city: 'pune'
}]
};
Demo PLunkr
please see this link here to see the whole code.
You should create angular module "myApp" which define the application then controller inside it.
While i am trying to click on show its not showing any thing, i have wasted lot of time on this, but no luck can some one help.
Files....
app.js
controller.js
index.html
show.html
index.html
<html ng-app='Java4sApp'>
<head>
<title>Angular Js Tutorials _ Java4s</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers.js"></script>
</head>
<body>
<div ng-controller='Java4sController'>
Settings :
Add Details | Show Details
<div ng-view></div>
</div>
</body>
</html>
show.html
<html ng-app='Java4sApp'>
<head>
<title>Angular Js Tutorials _ Java4s</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers.js"></script>
</head>
<body>
<div ng-controller='Java4sController'>
<input type="text" ng-model="myModel" />
<ul>
<li ng-repeat='person in people | filter:myModel'>{{person.name}}</li>
</ul>
</div>
</body>
</html>
controller.js
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/add', {
controller: 'Java4sController',
templateUrl: '/add.html'
}).
when('/show', {
controller: 'Java4sController',
templateUrl: '/show.html'
}).
otherwise({
redirectTo: '/index.html'
});
}]);
app.controller("Java4sController",function($scope){
$scope.people = [
{name: 'Siva', city: 'Cary'},
{name: 'Teja', city: 'Raleigh'},
{name: 'Reddy', city: 'Durham'},
{name: 'Venky', city: 'Denver'},
{name: 'Arun', city: 'Texas'}
];
});
app.js
var app = angular.module("Java4sApp",[]);
Thank you.
You need to inject the 'ngRoute' dependency when you are creating your module.
var app= angular.module('Java4sApp', [
'ngRoute'
]);
Also make sure you obtain Angular routing js and add a reference to it, in your index.html
<script src="scripts/angular-route.js"></script>
A good example can be found here
Please let me know if this doesn't fix your problem
UPDATE
This is a simple plunker that shows AngularJS Routing
My module isn't loading, and I can't figure out why. Could someone help me to find out what I am doing wrong?
The following is my HTML in a file named index.html:
<html ng-app="demoApp">
<head>
<title>Using AngularJS Directives and Data Binding</title>
<script type="text/javascript" src="_Script.js"></script>
<script src="angular.min.js"></script>
</head>
<body>
<!-- Get name out of array with controller using a module-->
<h3>Get names out of an array with controller using a module:</h3>
<div class ="container" ng-controller="SimpleController">
<input type="text" ng-model="search" /> {{ search }}
<ul>
<li ng-repeat="naam in namen | filter:search" >{{ naam }}</li>
</ul>
</div>
</body>
</html>
And this is the Javascript in a file named _Script.js:
var demoApp = angular.module('demoApp', []);
function SimpleController($scope) {
$scope.namen = [
'John',
'Will',
'Alex'
];
}
demoApp.controller('SimpleController', SimpleController);
I've looked for everything, so maybe it is simple. But I can't find it and got stuck with it.
Regards,
You're currently loading your _script.js first, and angular JS second. If you reorder them your script should work: