I am new to Angular JS and I am facing some issues in the ng-controller which is not sending values to the browser screen. I am using angular 1.5.8. How can I get this code to display values.Attached is my output as well
Here is my code :
script.js
(function () {
var gem = {
name: "Dodecahedron",
price: 2.95,
description: "great stone"
};
var app = angular.module('store', []);
app.controller('StoreController', function () {
this.product = gem;
});
})();
html file
<!DOCTYPE html>
<html data-ng-app="store">
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="script.js" ></script>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap/css/bootstrap.min.css">
<meta charset="UTF-8">
<title>Angular Demo</title>
</head>
<body >
{{"Hello" + "Angular"}}
<br />
Here is Where our gem information will be displayed through the controller.
<div ng-controller="StoreController">
{{"Hello" + "Angular"}}
<h1>Product name : {{StoreController.product.name}}</h1>
<h2>Produce Price : {{StoreController.product.price}}</h2>
<p>Product Description : {{StoreController.product.description}}</p>
</div>
</body>
</html>
You can use $scope variable inside controller
app.controller('StoreController', function ($scope) {
$scope.product = gem;
});
in html you can access $scope variables directly like this
<div ng-controller="StoreController">
{{"Hello" + "Angular"}}
<h1>Product name : {{product.name}}</h1>
<h2>Produce Price : {{product.price}}</h2>
<p>Product Description : {{product.description}}</p>
</div>
You are missing "StoreController as StoreController".
<div ng-controller="StoreController as StoreController">
{{"Hello" + "Angular"}}
<h1>Product name : {{StoreController.product.name}}</h1>
<h2>Produce Price : {{StoreController.product.price}}</h2>
<p>Product Description : {{StoreController.product.description}}</p>
</div>
Working plunker here.
You should use $scope variable
app.controller('StoreController', function ($scope) {
$scope.product = gem;
});
DEMO
else you can use the Controller as syntax.
In case you don't want to use $scope, you can use controller as systax.
<div ng-controller="StoreController as ctrl">
{{"Hello" + "Angular"}}
<h1>Product name : {{ctrl.product.name}}</h1>
<h2>Produce Price : {{ctrl.product.price}}</h2>
<p>Product Description : {{product.description}}</p>
</div>
Related
I have built a small application to switch languages
I create a controller where I get the value from ng-model and then assign the value to a variable. I need help to pass this value in app.config.
Code:
var app = angular.module("myApp", ['pascalprecht.translate']);
var name = 'Anuj';
app.controller("translateController", ["$scope", "$translate", function($scope, $translate) {
$scope.changeValue = function() {
name = $scope.textname;
$translateProvider.translations('en', en_translations);
}
$scope.changeLanguage = function(lang) {
$translate.use(lang);
}
}]);
app.config(["$translateProvider", function($translateProvider) {
var en_translations = {
"language": name,
"greeting": "Welcome Dinesh"
}
var sp_translations = {
"language": "Selected Language Spanish",
"greeting": "Bienvenida Dinesh"
}
$translateProvider.translations('en', en_translations);
$translateProvider.translations('sp', sp_translations);
$translateProvider.preferredLanguage('en');
}]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.3.8" data-semver="1.3.8" src="https://code.angularjs.org/1.3.8/angular.js"></script>
<script data-require="angular-translate#*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.0/angular-translate.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="translateController">
<h1>Demo for angularJS translator</h1>
<input type="text" name="" ng-model="textname" /> {{textname}}
<button ng-click="changeValue()">Change</button>
<div>
<button ng-click="changeLanguage('en')">English</button>
<button ng-click="changeLanguage('sp')">Spanish</button>
</div>
<h2>{{'language' | translate}}</h2>
Hello!!!
<p>{{'greeting' | translate}}</p>
</div>
</body>
</html>
You can see code in plunker
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>
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}}
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
Okay so I'm following an AngularJS online beginner course, and wrote my first app :
HTML :
<html ng-app>
<head>
<script src="lib/angular.min.js"></script>
<script src="lib/app.js"></script>
</head>
<body>
<div ng-controller="mainController">
<h1>Hello {{ name }}!</h1>
</div>
</body>
</html>
app.js :
var myApp = angular.module("myApp",[]);
myApp.controller('mainController',['$scope',function($scope){
$scope.name = 'Elliot';
}]);
I don't get the desired outcome from this small app, I only get "Hello {{ name }}!".
What am I doing wrong here?
Change your html tag too:
<html ng-app="myApp">