I'm starting learning angular js.
So i'm making very simple module and controller class. But it is not working.
Here is my sample code.
Can u point out what's wrong?
<html ng-app="demoApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script type="text/javascript">
var demoApp = angular.module('demoApp',[]);
var controllers = {};
<!-- create controller class -->
function SimpleController($scope){
$scope.customers = [
{name:'Terry.Cho',city:'Seoul'},
{name:'Cath',city:'Suwon'},
{name:'Carry',city:'Suwon'}
];
}
<!-- add the controller to controller array -->
controllers.SimpleController = SimpleController;
<!-- pass the controllers array to module -->
demoApp.controller(controllers);
</script>
</head>
<body>
<h3> Controller example </h3>
<ul>
<li ng-repeat="cust in customers | orderBy:'name' ">{{cust.name}}</li>
</ul>
</body>
</html>
You forgot to add ng-controller="SimpleController" to either your body tag or your ul tag. Add that and you should be good.
Related
I am trying to add more than one ng-app in a application ,how to register the both ng-app and let me know what is the use of using more than one ng-app?
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.
var app1 = angular.module('app1', []);
app1.controller('Ctrl1', function ($scope)
{
$scope.name = "Angular";
});
var app2 = angular.module('app2', []);
app2.controller('Ctrl2', function ($scope)
{
$scope.name = "Developer";
});
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('app2'), ['app2']);
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="app1">
<div ng-controller="Ctrl1">
<span>{{name}}</span>
</div>
</div>
<div id="app2">
<div ng-controller="Ctrl2">
<span>{{name}}</span>
</div>
</div>
</body>
</html>
I created a basic AngularJS app and it's not displaying the values on the live site declared on the controller.
The live site displays the expressions written on the controller file instead.
ie. - It displays:
{{ title }}
{{ paragraph }}
Instead of:
First Angular Title
First Angular Paragraph
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular Application</title>
<script src="js/shared/angular.min.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="MainController">
<h1> {{ title }} </h1>
<p> {{ paragraph }}<p>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
MainController.js
app.controller("MainController", ['$scope', function($scope) {
$scope.title = "First Angular Title";
$scope.paragraph = "First Angular Paragraph";
}]);
app.js
var app = angular.module("mainApp", []);
I don't know what I'm doing wrong. I'm completely new to this. I appreciate any help. Thanks for your time.
I have included the angular from cdn and updated the inline script the same working. please verify included files are loading properly.
<!DOCTYPE html>
<html>
<head>
<title>Angular Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="MainController">
<h1> {{ title }} </h1>
<p> {{ paragraph }}<p>
</div>
<!-- Modules -->
<script type="text/javascript">
var app = angular.module("mainApp", []);
app.controller("MainController", ['$scope', function($scope) {
$scope.title = "First Angular Title";
$scope.paragraph = "First Angular Paragraph";
}]);
</script>
</body>
</html>
</body>
</html>
I am looking at this tutorial. And I have such code:
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>SPA book_store</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("http://localhost:8080/book_store/rest/books_json/get")
.then(function(response) {
$scope.books = response.data;
});
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<input id="filter_input" type="text" ng-model="nameText"/>
<ul>
<li ng-repeat="book in books | filter:nameText | orderBy:'name'">
{{book.name}} - {{book.price}}
</li>
</ul>
</div>
</body>
</html>
http://localhost:8080/book_store/rest/books_json/get is returning following json:
[
{
"book_id":1,
"name":"Book1",
"bought":false,
"genre":"MR",
"price":20,
"users":[
],
"author":{
"author_id":1,
"name":"Gogol",
"books":[
]
}
},
//...
]
But I see in a browser networking that request wasn't fire. What have I done wrong?
Remove the ng-app="" from the html tag or provide the module name ng-app="MyApp".
Also remove one of the ng-app directives either from the the body tag or the html tag.
It is good practice to user the ng-app directive on the HTML tag if you are using just one angular app.
I just started AngularJS today; so I'm still very new to it. I have the following code:
<!DOCTYPE html>
<html ng-app>
<head>
<title>My first AngularJs</title>
</head>
</html>
<body data-ng-controller="SimpleController">
<div class="container">
<h3>Looping with the ng-repeat Directive</h3>
<input type="text" ng-model="nameText"/>{{ nameText}}
<ul>
<li data-ng-repeat="cust in customers | filter:nameText | orderBy:'name'">{{ cust.name | uppercase }} - {{ cust.city}}</li>
</ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function SimpleController($scope){
$scope.customers=[
{name:'Frank Ben',city:'Bamenda'},
{name:'Brize Tankanon',city:'Marous'},
{name:'Brendaline M.',city:'Bafoussam'},
{name:'Alexander Bings',city:'Buea'}
];
}
When I run the above code, this is what I get:
when I remove the controller directive from the body tag, I get this:
I don't know where the problem is coming from. I wish to display those names and cities. I will be grateful for your help. Thanks!
Try to register controller in angularjs app using build in dependency injection, in other words:
<script type="text/javascript">
var app = angular.module("app", []);
app.controller('SimpleController', ['$scope', function SimpleController($scope){
$scope.customers=[
{name:'Frank Ben',city:'Bamenda'},
{name:'Brize Tankanon',city:'Marous'},
{name:'Brendaline M.',city:'Bafoussam'},
{name:'Alexander Bings',city:'Buea'}
];
}]);
</script>
then change ng-app to ng-app="app".
Here is JSBin with working example: http://jsbin.com/ficozajena/1/edit?html,js,output
For some reason when I use ng-repeat the $scope variable does not bind its data to the view. It's been driving me insane because I figure out what i'm doing wrong in this case. In the when I console.log the $scope variable, its there but it just refuses to bind to the view when i'm using ng-repeat. In this case the word "movie" in the paragraph tag is repeated 3x but there's not data to go with it. Here is the code below:
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
After long sleepless nights lol I figured out the answer. Apparently the problem was with my node js express server using mustache as a middleware to template html. It uses the {{ }} symbols as well so angular never got to interpret what was going on. So I used $interpolateProvider to change the angular symbols and now it works beautifully.
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
To anyone else using a node.js backend and not using jade as a template language, I hope this helps!
It would be better to explicitly define the controller inside the module:
var myApp = angular.module("myApp", []);
myApp.controller('IndexCtrl', function($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
});
But.... I copied the code exactly, replaced angular resource path. And all is working.
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>