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.
Related
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>
When i click on the href the url change but nothing seems to happens.
really i don't know where is the problem.
Here the index html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<meta charset="utf-8">
<title>APP</title>
</head>
<body>
<div>
<p>addRecord</p>
<ng-view></ng-view>
</div>
<script>
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/show', {
templateUrl: 'views/addRecord.html',
});
});
</script>
</body>
</html>
this is folder structure
enter image description here
You have nowhere mentioned ng-app
<head ng-app="myApp">
DEMO
I am building an angular single page app using node, bower, and express. But, for some odd reason, I cannot seem to get ngRoute to work. Nothing seems to be appearing in my .ng-view div. Here's my code:
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<title>Node, NPM and Bower</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
</head>
<body ng-app="app">
<h1>My App</h1>
<div class="ng-view"></div>
<script src="bower_components/angular/angular.js"></script>
<script src="./app/app.js"></script>
</body>
</html>
APP.JS
angular.module("app", ["ngRoute"]).
config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Home</h1>"
})
.when("/about", {
template : "<h1>About</h1>"
});
});
Thanks in advance for any and all help!
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);
}
I am new to angular js
I was trying to load another html dyamically, below is the code i was trying
My Base HTML include
<!DOCTYPE html>
<html data-ng-app="LoginModule">
<head>
<title></title>
<script src="Resource/jquery-1.10.2.min.js"></script>
<script src="Resource/angular.min.js"></script>
</head>
<body>
<div ng-view></div>
<script src="Module/app.js"></script>
</body>
</html>
and my app JS
var app = angular.module('LoginModule', []);
app.config(function ($routeProvider) {
$routeProvider
.when('/login',
{
controller: '',
templateUrl: '/Module/View/Login/Login.html'
})
.otherwise({ redirectTo: '/login' });
});
Put your jquery and angular script in the body tag:
<!DOCTYPE html>
<html data-ng-app="LoginModule">
<head>
<title></title>
</head>
<body>
<div ng-view></div>
<script src="Resource/jquery-1.10.2.min.js"></script>
<script src="Resource/angular.min.js"></script>
<script src="Resource/angular-route.js"></script>
<script src="Module/app.js"></script>
</body>
</html>
Also I would set ng-view with ng-view=""
<div ng-view=""></div>
EDIT:
You forgot to include the ngRoute module. Please look at the following plnkr to more detail: http://plnkr.co/edit/A5X4BNsnuXxhmgPVOXpv
var app = angular.module('LoginModule', ['ngRoute']);