AngularJS tutorial not binding data - javascript

I have a very basic example that isn't working: I have two aspects, the index.html and the main.js. They are in the same folder:
<!DOCTYPE html>
<html>
<head>
<title> AngularJS Tutorials </title>
<link rel="stylesheet" href="css/foundation.min.css">
<script src="main.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
</body>
</html>
main.js
function FirstCtrl($scope) {
$scope.data = {message: "Hello"};
}
my page shows this:
{{data.message}}

You need to add the controller to the angular module. you can use the controller function to add the js function for your controller.
var FirstCtrl = function FirstCtrl($scope) {
$scope.data = {message: "Hello2"};
};
angular.module("myApp",[]).controller("FirstCtrl",FirstCtrl);
If you already had the angular module defined somewhere else in the page, Use this version.
angular.module("myApp").controller("FirstCtrl",FirstCtrl);
Here is a working sample http://jsbin.com/tiroteharu/edit?html,js,console,output

<script src="~/Scripts/angular/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', ['$scope', function ($scope) {
$scope.data = { message: "Hello" };
}]);
</script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
More help read: https://docs.angularjs.org/guide/controller

Related

Assign objects to properties in angular js, in attempt to reuse in another script tag

I am trying to create an interactive experience using angular js. I was wondering if I could create properties, assign objects then instantiate them in a script tag in the 'index.html'?
for example
var app = angular.module('myApp');
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'Barry Bounce';
$scope.barry = {
test1: function() {
return "My name is slim shady"
}
}
}]);
index.html is as follows
<!doctype html>
<html>
<head>
<title>Barry bounce</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
</head>
<body ng-app="myApp">
<div class="main" ng-controller="MainController">
<script> document.write(barry.test1)</script>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
Then instantiate the {{ Barry }} with all the properties in a script tag in the index.html.
Is there a better way to approach this e.g using directive or factories
P.S I am new to angular js any guidance would be appreciated.
There is no need for instantiating in HTML.It will automatically instantiate once declared in controller. And to Get that value in index.html you can use ng-model for binding.
var app = angular.module('myApp');
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'Barry Bounce';
$scope.barry = [
{test1:'"My name is slim shady"'},
];
}
}]);
<!doctype html>
<html>
<head>
HTML
<title>Barry bounce</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
</head>
<body ng-app="myApp">
<div class="main" ng-controller="MainController">
<span ng-model="barry.test1"> </span
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>

html and script tag not linking

I am new in angularjs and going through Egghead.io videos..but i could not link js page into html page.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular</title>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h4>{{ "data.message"}}</h4>
<div class="{{data.message}}">
Wrap me up in component
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
and my main.js file is
function FirstCtrl($scope) {
$scope.data = {message: "panel"};
}
You need to define your app as var VARIABLE_NAME=angular.module('APP_NAME') and your controller as VARIABLE_NAME.controller('CONTROLLER_NAME', FUNCTION_EXPRESSION)
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "panel"
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h4>{{data.message}}</h4>
<div class="{{data.message}}">
Wrap me up in component
</div>
</div>
</div>
Note: You should not have quotes("") in your expressions or else, it will be treated at string.
Move these links inside tag
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"> </script>
<script type="text/javascript" src="main.js"></script>
and you cannot use $scope with module and controller this must be
var app = angular.module('myApp', []);
app.controller('FirstCtrl', function($scope) {
$scope.data = {"message": panel};
});
and in html
<div ng-app="myApp">
to first div
and use
{{data.message}}

AngularJS error loading Controller

I have a really dumb problem but I don't know how to fix it. I have this index.html file with AngularJS loaded. I'm using Plunker to test the code:
<!DOCTYPE html>
<html ng-app="">
<head>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="BodyController">
<h1>{{ message }}</h1>
</body>
</html>
And this script.js file with this information:
var BodyController = function($scope) {
$scope.message = "Hi Angular!"
}
In the inspector it says:
Error: [ng:areq] Argument 'BodyController' is not a function, got undefined
The script is loaded. I have defined the controller in the JS file and attach the ng-controller directive, so I don't know where this can fail.
This is very basic of AngularJS.
You first need to create a module:
var fooApp = angular.module("foo", [])
And then, register your controller there:
var BodyController = function($scope) {
$scope.message = "Hi Angular!"
}
fooApp.controller("BodyController", BodyController);
And, in your HTML tag, change your ng-app like this:
<html ng-app="foo"></html>
You need to add the controller to your Angular module.
angular.module('app', [])
.controller('BodyController', function($scope) {
$scope.message = "Hi Angular!"
})
More info on how to setup a controller
https://docs.angularjs.org/guide/controller
In HTML, add
<html ng-app="myapp">
and the script is
angular.module('myapp', []).controller('BodyController',BodyController)
There were several errors
ng-app was not set
angular module was not defined
the controller was not defined
angular.module('app', [])
.controller('BodyController', function($scope) {
$scope.message = "Hi Angular!"
});
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="BodyController">
<h1>{{ message }}</h1>
</body>
</html>

Why doesn't my variable render in my view after populating it in my controller?

What am I doing wrong? angular.min.js is in the folder js. I am using the book from O'Reilly. There is an example like this. But on my PC it doesn't work.
//controller.js
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body ng-app="">
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
I think you are referring to old book. Please update your controller as below
//controller.js
var app = angular.module('myApp', []);
app.controller('HelloController', function($scope) {
$scope.greeting = { text: 'Hello' };
});
and in HTML
ng-app="myApp"
Please try and let us know whether it is working or not

Error in Angular JS

I included angular js in my asp.net mvc project but when i call object in controller
the angular js expressions do not evaluate
here is the app.js code please suggest
var app = angular.module('app', []);
app.controller('createController', createController);
and here is the createController code
var createController = function ($scope) {
$scope.mydata = 'I work!';
}
here is what i include in html
<html ng-app="app">
<script src="~/Scripts/angular.min.js"></script>
<script src="~/appAjs/app.js"></script>
<script src="~/appAjs/controllers/createController.js"></script>
<div ng-controller="createController">
{{scope.mydata}}
{{6+9}}
from your code, I can only suspect two things
your javascript does not have the proper scope
do not use the word scope in your "scope" code
first part: javascript scope:
Always use an IIFE, in your case your code should look like:
(function(){
var app = angular.module('app', []);
var createController = function ($scope) {
$scope.mydata = 'I work!';
};
app.controller('createController', createController);
}());
second part: don't use the word scope
in your HTML, you should not use the word scope as it's already inherit in your controller as that's the model you are passing to the "view"
hence, your code should look like:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-controller="createController">
{{mydata}}
{{6+9}}
</div>
</body>
</html>
the result is:
I work! 15
live code in JSBIN so you can check it out.
your HTML page, all together should look like this:
if you have only one file
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>My AngularJs App</title>
</head>
<body>
<!-- HTML -->
<div ng-controller="createController">
{{mydata}}
{{6+9}}
</div>
<!-- AngularJS required -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- AngularJS code -->
<script>
(function(){
var app = angular.module('app', []);
var createController = function ($scope) {
$scope.mydata = 'I work!';
};
app.controller('createController', createController);
}());
</script>
</body>
</html>
if you're using 2 files
file index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>My AngularJs App</title>
</head>
<body>
<!-- HTML -->
<div ng-controller="createController">
{{mydata}}
{{6+9}}
</div>
<!-- AngularJS required -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- AngularJS extra files -->
<script src="createController.js"></script>
</body>
</html>
file createController.js (in the same folder as index.html)
(function(){
var app = angular.module('app', []);
var createController = function ($scope) {
$scope.mydata = 'I work!';
};
app.controller('createController', createController);
}());
I think the problem may well be the order in which you are including your scripts:
Try the following:
<script src="~/Scripts/angular.min.js"></script>
<script src="~/appAjs/controllers/createController.js"></script>
<script src="~/appAjs/app.js"></script>
Reasoning is that app.js tries to define a controller using a function that has not been defined when the function is run.
Points that {{scope.data}} should be {{data}} are correct, but do not explain {{6+9}} not working.
You need to create the controller in the context of the app module.
Your app.js should just have
angular.module('app', []);
and your createController code should look similar to this
angular.module('app')
.controller('createController', function ($scope) {
$scope.mydata = 'I work!';
});
You need to change the expression from
{{scope.mydata}}
to
{{mydata}}
Expression have access to scope and no keyword is required to access a scope object.

Categories