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:
Related
I'm attempting to establish a basic Angular app with a module, controller, and view. I'm struggling to get angular to interpret the content within "{{}}".
I'm running Browserify which is pushing everything to "./js/bundle.js".
Here is my code:
index.html
<!DOCTYPE html>
<html ng-app="showNames">
<head>
<script src="./js/bundle.js"></script>
<title> Help </title>
</head>
<body>
<h1>Show Those Names</h1>
<ul ng-controller="namesController as namesCtrl">
<li ng-repeat="name in namesCtrl">{{name.names}}</li>
</ul>
</body>
</html>
app.js
"use strict";
var app = angular.module('showNames', []);
app.controller('namesController', ['$scope', function($scope){
$scope.names = ["jeff", "jim", "jay", "Please show up"];
}]);
My browser only renders {{name.names}}.
Any idea what's going on here, what I'm missing, or how I can improve my approach?
Thanks!
The problem is that in your ng-repeat you are trying to get names form controller, you should use your model which is part of your controller ie: "name in names" not "name in namesCtrl".
"use strict";
var app = angular.module('showNames', []);
app.controller('namesController', ['$scope', function($scope){
$scope.names = ["jeff", "jim", "jay", "Please show up"];
}]);
<!DOCTYPE html>
<html ng-app="showNames">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<title> Help </title>
</head>
<body>
<h1>Show Those Names</h1>
<ul ng-controller="namesController as namesCtrl">
<li ng-repeat="name in names">{{name}}</li>
</ul>
</body>
</html>
Wrong way to work with ng-repeat.
<li ng-repeat="name in names">{{ name }}</li>
Your code is a mess.
Your controller is referenced as namesCtrl in your template yet you assign names to $scope. Pick one approach and stick to it
You're repeating over namesCtrl?
Your array entries are strings only, they have no name property
Use $scope...
<ul ng-controller="namesController">
<li ng-repeat="name in names track by $index">{{name}}</li>
</ul>
or use "controller as"
app.controller('namesController', function() {
this.names = ["jeff", "jim", "jay", "Please show up"];
});
and
<ul ng-controller="namesController as namesCtrl">
<li ng-repeat="name in namesCtrl.names track by $index">{{name}}</li>
</ul>
Changed your code. There are multiple mistakes. try this
<!DOCTYPE html>
<html ng-app="showNames">
<head>
<script src="./js/bundle.js"></script>
<title> Help </title>
</head>
<body>
<div ng-controller="namesController as namesCtrl">
<h1>Show Those Names</h1>
<ul>
<li ng-repeat="name in names">{{name}}</li>
</ul>
</div>
</body>
</html>
Your app.js is okay. I am hoping it is being pushed into bundle.js
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.
I am learning Angular and adding a controller to my module only works when all the code is inline on the page. If I replace it with <script src="myModuleFile.js"></script> it fails with
"Error: [$injector:unpr]
http://errors.angularjs.org/1.3.11/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-%20personController
var app = angular.module('app', [])
.config([function(injectables){
console.log('configuring app');
}]).run([function(injectables){
console.log('running app');
}]).controller("personController", function($scope){
$scope.firstName = "John";
$scope.lastName = "Doe";
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="web/stylesheets/app.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<!-- wont work if I include it this way -->
<script src="web/js/app.min.js"></script>
<!-- but works if I put it in here -->
<script></script>
</head>
<body>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here"><hr />
<h1>Hello {{ yourName }}!</h1>
<div ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
<p>My first expression: {{ 5 + 5 }}</p>
<div ng-controller="personController">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<div ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</body>
</html>
As Claies mentioned in the comments, the error message looks like it is trying to find a provider for a dependency "a", which is probably a result of minification.
If you do like:
angular.module(..).controller("SomeCtrl", function($scope){});
It might minify $scope to just a. So instead you should use:
angular.module(..).controller("SomeCtrl", ["$scope", function($scope){}]);
Because the string will not be minified, Angular will know which dependency is which. Another way would be to use $injector of course, as Claies also mentioned.
I am very new to angularjs . I am stuck in ng-repeat directives.
Here is my code :
<html ng-app>
<head>
<title>Looping Example</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular.js"></script>
<script type="text/javascript">
function helloWorldExampleCtrl($scope){
$scope.userName = "Vicky!"
$scope.contacts = ["hi#email.com", "hello#email.com"];
}
</script>
</head>
<body>
<div>
<h1 ng-controller="helloWorldExampleCtrl">Welcome {{userName}} ! <br/>
Emails : <br>
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</h1>
</div>
</body>
</html>
Output I am getting :
Welcome Vicky! !
Emails :
hi#email.com
hi#email.com
hello#email.com
hello#email.com
But excepted is :
Welcome Vicky! !
Emails :
hi#email.com
hello#email.com
What i am doing wrong?.....
You have two versions of the AngularJS Library added to your page using the script tag. Remove one to solve the issue:
<html ng-app>
<head>
<title>Looping Example</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript">
function helloWorldExampleCtrl($scope){
$scope.userName = "Vicky!"
$scope.contacts = ["hi#email.com", "hello#email.com"];
}
</script>
</head>
<body>
<div>
<h1 ng-controller="helloWorldExampleCtrl">Welcome {{userName}} ! <br/>
Emails : <br>
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</h1>
</div>
</body>
</html>
A Plunker with only one AngularJS import that works
A Plunker with two AngularJS Library Imports that duplicates your problem
I keep trying to set my ng-include as follows:
<!DOCTYPE html>
<html ng-app>
<head>
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<h1>Airports</h1>
<div ng-controller="AppCtrl">
<div>
<div>
<ul>
<li ng-repeat="airport in airports">
<a href="" ng-click="setAirport(airport.code)">
{{airport.code}} - {{airport.name}}
</a> -
<a href="" ng-click="editAirport(airport.code)">
Editar
</a>
</li>
</ul>
<p ng-show="currentAirport">Current airpot: {{currentAirport.name}}</p>
</div>
<!--el ng include le indica que puede incluir un scope (.html)-->
<div ng-include src="formURL"></div>
</div>
</div>
</body>
</html>
My JS script (app.js):
function AppCtrl ($scope){
$scope.airports={
"STL":{
"code":"STL",
"name":"Lambert-St Airport",
"city":"san louis",
"destinations": [
"LAX",
"MKE"
]
}
};
$scope.formURL= 'partials/form.html';
$scope.currentAirport = null;
$scope.setAirport = function (code) {
$scope.currentAirport = $scope.airports[code];
};
$scope.editAirport = function (code) {
$scope.editing = $scope.airports[code];
};
}
And finally form.html
<div ng-show="editing">
<h3>Edit Airport</h3>
<input ng-model="editing.name" value="" class="input-xlarge"/>
</div>
I have tried to show the form, changing the url, writing the complete url but it doesn't seems to work. Although when I click on the airports, the page shows correctly.
If anyone can point me in the right direction that'd be great. Sorry for the huge post, it needed a bit of explaining to make it coherent. Hopefully it makes sense. Thanks.
My directory:
exampleAngular
|_css
|_img
|_js
|_controllers
|_app.js
|_lib
|_angular.min.js
|_angular-resource.min.js
|_partials
|_form.html
|_airport.html
|_index.html
The plunker provided by Andyrooger works fine without modification, there are however a few thing you should change.
1) ng-include is used without src when using the directive as an attribute, so it should be ng-include="formUrl"
2) Use object properties rather then the entire object on ng-show
Change HTML to,
<div ng-show="editing.airport">
<h3>Edit Airport</h3>
<input ng-model="editing.name" value="" class="input-xlarge"/>
</div>
Also be aware of scope inheritances, change Controller
$scope.editing = {};
// Inside function
$scope.editing.airport = $scope.airports[code]
Going by your comments it seems your formURL is incorrect...
You set it on this line
$scope.formURL= 'partials/form.html';
but then you say your form.html is in the same directory as your index.html. formURL is a path relative to the directory that index.html is in. So either
Put form.html in a partials directory (angularexample/partials/form.html)
or
Set formURL as so
$scope.formURL= 'form.html';