I basically copied this code from a video tutorial from the official site. I wish '4' were shown on the screen, but it keeps showing '{{ totalTodos }}'.
Here index.js:
function TodoCtrl($scope) {
$scope.totalTodos = 4;
}
And here index.html:
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div ng-controller="TodoCtrl">
{{ totalTodos }}
</div>
</body>
</html>
It's good practice to start correctly if you are newbie in angularJs. Start by creating module and give it any name. I used app as a module name and then your controller and so on ..
angular.module("app", []).controller("TodoCtrl", function ($scope) {
$scope.totalTodos = 4;
});
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div ng-controller="TodoCtrl">
{{ totalTodos }}
</div>
</body>
</html>
Related
I am working on a simple application of AngularJs. I use cloud9 as an Ide and install Angular through bower in my project, but still get an error "angular not defined" in my .js file.
Here is my code please help me.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>BlogIt!</title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="myCtrl">
{{message}}
</body>
</html>
app.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Welcome to BlogIt!";
})
You are not able to load angular.min.js on your page.
Try by changing like this:
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
to
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Welcome to BlogIt!";
})
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>BlogIt!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="myCtrl">
{{message}}
</body>
</html>
You are missing ng-app
<body ng-app="myApp" ng-controller="myCtrl">
Add ng-app in your program.
It's the starting point of the application.
Below is the index.html file:
<html ng-app="myApp">
<head>
<title> My Contacts App </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="app.js"></script>
<link rel="shortcut icon" href="favicon.ico"></link>
</head>
<body>
<h1>My contact App </h1>
<div controller="contactCtrl as ctrl">
{{ ctrl.nm }}
</div>
</body>
</html>
app.js is as shown below:
var app = angular.module("myApp",[]);
app.controller("contactCtrl",createContacts);
function createContacts()
{
this.nm = "Hey";
console.log("INside controller");
}
Problem: When I start http-server from the same directory where the source files are and type http://127.0.0.1:8080 the browser just displays static html content. It neighter displays the value of the variable "nm" nor shows anything from console.log
I am at a beginner level.
TIA.
This should be ng-controller:
<div ng-controller="contactCtrl as ctrl">
{{ ctrl.nm }}
</div>
Here is an example on how to use the ng-controller directive in the html:
var app = angular.module("myApp",[]);
app.controller("contactCtrl",createContacts);
function createContacts()
{
this.nm = "Hey";
console.log("INside controller");
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<head>
<title> My Contacts App </title>
<script src="app.js"></script>
<link rel="shortcut icon" href="favicon.ico"></link>
</head>
<body>
<h1>My contact App </h1>
<div ng-controller="contactCtrl as ctrl">
{{ ctrl.nm }}
</div>
</body>
</html>
Answer by pritam is correct. Why not go traditional way.
var app = angular.module("myApp",[]);
app.controller("contactCtrl",function($scope){
$scope.nm = "Hey";
console.log("Inside controller");
});
and in the template just use {{ nm }}
my controller.js has the following code:
var myController = angular.module('myApp.controllers', [])
My Services.js has the following code:
angular.module('myApp.services', [])
When I run my application, the code "var myController = angular.module('myApp.controllers', [])" gives me the following exception:
0x800a1391 - JavaScript runtime error: 'angular' is undefined.
Can anyone please tell me what goes wrong? Your help will be appreciated :)
Btw, here is the html code of my web app
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PathFinding.js</title>
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./lib/themes/jquery.ui.all.css" />
<script src="./js/angular.js"></script>
<script type="text/javascript" src="path/to/bower_components/pathfinding/pathfinding-browser.min.js"></script>
<script type="text/javascript" src="./lib/raphael-min.js"></script>
<script type="text/javascript" src="./lib/es5-shim.min.js"></script>
<script type="text/javascript" src="./lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./lib/state-machine.min.js"></script>
<script type="text/javascript" src="./lib/async.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.draggable.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.accordion.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.slider.min.js"></script>
<script type="text/javascript" src="./lib/pathfinding-browser.min.js"></script>
<script type="text/javascript" src="./js/view.js"></script>
<script type="text/javascript" src="./js/controller.js"></script>
<script type="text/javascript" src="./js/Services.js"></script>
<script type="text/javascript" src="./js/mainApp.js"></script>
<script type="text/javascript" src="./js/panel.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<ion-modal-view>
<ion-content>
<ion-scroll zooming="true" overflow-scroll="false" direction="xy" style="width: 100%; height:100%;"
scrollbar-x="false" scrollbar-y="false">
<div class="scroll-container" id="draw_area" style="width: 100%; height:100%; background: url('PathFindingMap.png') no-repeat ">
</div>
</ion-scroll>
</ion-content>
</ion-modal-view>
<button style="margin-bottom:10px;margin-left:30px;margin-right:30px;" id="button1" class="control_button" type="button">Search!</button>
<div style="visibility: hidden;" id="algorithm_panel" class="panel right_panel">
<div class="accordion">
<h3 id="astar_header"></h3>
<div id="astar_section" class="finder_section">
</div>
</div>
</div>
<div style="visibility: hidden;" id="play_panel" class="panel right_panel">
</div>
<div id="stats"></div>
</body>
</html>
Wrong approach of building your angular app
This is how you need to define your module
var app = angular.module('myApp',[])
This is how you need to add your controller in your controller.js
As you have already define your module,no need to give dependency
var app = angular.module('myApp')
app.controller('myController',function(){
// Here is your controller content
})
Here is how you need to add your service in service.js
var app = angular.module('myApp')
app.service('myService',function(){
// Here is your service content (this.method);
})
Your code gives you error because you have defined your module 2 times, ie defining its dependency []
On your controller.js try to reference the angular.js script.
Simply drag the angular.js to you controller.js file. You code will look like this.
/// <reference path="../../../scripts/angular.js" />
On your html code. Include the angular.js and put it into first hierarchy then add your controller.js or else your code will not work.
<script src="scripts/angular.js"></script>
<script src="scripts/controller.js"></script>
I am trying angularjs for the first time and I am having trouble getting it to actually work..I think.
I am doing the exercises on a website and when I run it on the website it works, but when I try to follow along and write it myself in my own files I can't get it to work.
For example: when I type this "{{store.product.name}}" it prints exactly that including the braces, but on the site it prints out "Azurite"
my code:
index.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="app.js"></script>
<script src="angular.min.js"></script>
</head>
<body ng-controller="StoreController as store">
<div>
<h3>{{store.product.name}}</h3>
<h3>{{store.product.price}</h3>
</div>
</body>
</html>
app.js
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.product = gem;
});
})();
Your app name is incorrect.
<html ng-app="gemStore"> </html>
gemStore is the name for your app not test.
when you working with angular app .
You need angularJs script first and others should follow.
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<div>
<h3>{{store.product.name}}</h3>
<h3>{{store.product.price}</h3>
</div>
</body>
</html>
let me know if you need any help.
For reference you can see this plunker:
http://plnkr.co/edit/28gANOyhz5mLb7zkhu9W?p=preview
You shuld close the double curly brace
You have
<h3>{{store.product.price}</h3>
Should be
<h3>{{store.product.price}}</h3>
Regards
I am new to angular.js. I am getting the following error while executing a simple controller example.
Error: [ng:areq] http://errors.angularjs.org/1.4.7/ng/areq?p0=Mycontroller&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
index.html:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="Mycontroller">
<h1>{{message}}</h1>
</body>
</html>
script.js
var Mycontroller = function($scope){
$scope.message = "Hello Angular";
};
Output:
{{message}}
Where am i going wrong?
You should create a module, and then attach a controller to it. This is the angular way. Your code should look like this.
<html ng-app="my-app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="Mycontroller">
<h1>{{message}}</h1>
</body>
</html>
In your JavaScript file, you should have this
angular.module('my-app', [])
.controller('Mycontroller', function($scope) {
$scope.message = "Hello Angular";
});
Plunker: http://plnkr.co/edit/tYIQOlNALzco9zobAIO0?p=preview
try this it works
HTML page
<!doctype html>
<html ng-app="MyApp">
<head>
<title>HTML page</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>
<p>{{message}}</p>
</div>
</body>
hello.js
var app = angular.module("MyApp", []);
app.controller("Hello", function($scope, $http){Helloz($scope, $http);});
function Helloz($scope, $http) {
//$http.get('http://rest-service.guides.spring.io/greeting').
$http.get('/person').
then(function(data) {
$scope.greeting =angular.fromJson(data).data;
$scope.message=angular.fromJson(data).data;
},null);
}