I am a beginner to Angularjs. I am practicing by watching videos. I tried a program.
<!doctype html>
<html ng-app="store">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body >
<div ng-Controller="StoreController as store">
<h1>{{store.product.name}}</h1>
<h2>{{store.product.price}}</h2>
<p>{{store.product.lastname}}</p>
</div>
<script type="javascript" src="lib/angular.min.js"></script>
<script src="lib/app.js" type="javascript"></script>
</body>
</html>
saved as 'index.html' &
(function(){
var app= angular.module('store',[]);
app.controller('StoreController', function()
{this.product = gem;}
);
var gem = {
name : 'Deco',
price : 2.5,
lastname : 'ANIL KUMAR',
}
})();
Saved as app.js
but it is not showing data only showing
{{store.product.name}}
{{store.product.price}}
{{store.product.lastname}}
Check your console log for errors. I see at least one error, the gem variable is lost because controller is called in future. Declare gem inside controller.
(function () {
var app = angular.module('store', []);
app.controller('StoreController', function () {
var gem = {
name: 'Deco',
price: 2.5,
lastname: 'ANIL KUMAR',
}
this.product = gem;
});
})();
You have to declare the variable 'gym' as a scope variable inside the controller. Please check this fiddle
http://jsfiddle.net/ashraffayad/pdbrds7m/
var store = angular.module('myApp',[]);
store.controller('StoreController', ['$scope', function (scope) {
scope.gym = {
name: 'Deco',
price: 2.5,
lastname: 'ANIL KUMAR'}
}]);
<div ng-app="myApp" ng-Controller="StoreController">
<h1>{{gym.name}}</h1>
<h2>{{gym.price}}</h2>
<p>{{gym.lastname}}</p>
</div>
Thank-you Both of you. Both the codes are correct.
After Debugging at every step finally i found the mistake.
<div ng-Controller="StoreController as store">
<input type="text" ng-model="name"></input>
<h1>{{store.product.name}}</h1>
<h2>{{store.product.price}}</h2>
<p>{{store.product.lastname}}</p>
</div>
<script src="lib/angular.min.js"></script>
<script src="lib/app.js"></script>
&
(function(){
var app= angular.module('store',[]);
app.controller('StoreController', function()
{this.product = gem;}
);
var gem = {
name : 'Deco',
price : 2.5,
lastname : 'ANIL KUMAR',
}
})();
This is working now.
Related
I have a simple model with a list of names and corresponding images. I'm trying to click on the name of the image and load the corresponding image. I can't get the image to load. The list of names appears on the page, but when I click them nothing happens. Please help with code. Thx!
<!DOCTYPE html>
<html ng-app = "myApp">
<head>
<meta charset="UTF-8">
<title>Cat Clicker</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel ="stylesheet" type "text/css" href ="clicker.css">
<script type = "text/javascript" src="Libs/angular.js"></script>
<script type = "text/javascript" src="js/CatClickerMe.js"></script>
<body>
<div ng-controller = "MainController">
<div ng-repeat = "cat in options.catList">
<h3 ng-click = "MainController.selectCat($index)">{{cat.name}}</h3>
<h3>{{MainController.selectedCat.name}}</h3>
<img ng-src = "{{MainController.selectedCat.images}}" >
</div>
</div>
</div>
</body>
</html>
JS
(function() {
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('MainController', function($scope) {
var vm = this;
$scope.options = {
catList:[
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg'
}
],
};
vm.selectCat=function(pos) {
vm.selectedCat = angular.copy(vm.catList[pos]);
vm.selectedCat.pos = pos;
};
activate();
function activate() {
}
})
})();
You are mixing up $ scope and vm, go with one approach. You need to use controller as syntax in the template,
<div ng-controller = "MainController as vm">
DEMO
(function() {
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('MainController', function($scope) {
var vm = this;
vm.selectCat = selectCat;
this.options = {
catList:[
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg'
}
],
};
function selectCat(pos) {
vm.selectedCat = pos;
};
})
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app = "myApp">
<head>
<meta charset="UTF-8">
<title>Cat Clicker</title>
<body>
<div ng-controller = "MainController as vm">
<div ng-repeat = "cat in vm.options.catList">
<h3 ng-click = "vm.selectCat(cat)">{{cat.name}}</h3>
<h3>{{vm.selectedCat.name}}</h3>
<img ng-src = "{{vm.selectedCat.images}}" >
</div>
</div>
</div>
</body>
</html>
Exercise.js :
var myAppModule = angular.module("myFirstModule", []);
var MyAppController = function ($scope) {
$scope.message = "Welcome to Angular Tutorial";
};
myAppModule.controller = ("MyAppController", MyAppController);
Html file:
<!DOCTYPE html>
<html>
<head ng-app="myFirstModule">
<script src="Scripts/Excercise.js"></script>
<script src="~/Scripts/angular.js"></script>
</head>
<body>
<div ng-controller="MyAppController">
1+5 = {{ 1 + 5 }}
<br />
{{['nikhil','om','sai'] [2]}}
<br />
{{ {name:'nikhil',details:'om sai ' }.name }}
<br />
{{ message }}
</div>
</body>
</html>
When i am trying to solve this i am getting error. I Know its a small error but i am not able to figure this out.
In addition to #Sajeetharan's answer above, there is also one minor issue that your Exercises.js script may not be getting loaded:
<script src="Scripts/Excercise.js"></script>
<script src="~/Scripts/angular.js"></script>
The ~ is missing, so the code is dependent on where the HTML file is located(it'll look in the current directory). The angular.js script tag is not dependent.
There are few issues
(i) Change your controller as,
myAppModule.controller('MyAppController', function ($scope) {
$scope.message = "Welcome to Angular Tutorial";
});
(ii) Load angular.js script before loading your script.js
(iii) Place ng-app ahead of body
DEMO
var myAppModule = angular.module("myFirstModule", []);
myAppModule.controller('MyAppController', function ($scope) {
$scope.message = "Welcome to Angular Tutorial";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head >
</head>
<body ng-app="myFirstModule">
<div ng-controller="MyAppController">
1+5 = {{ 1 + 5 }}
<br />
{{['nikhil','om','sai'] [2]}}
<br />
{{ {name:'nikhil',details:'om sai ' }.name }}
<br />
{{ message }}
</div>
</body>
</html>
Change your controller to
myAppModule.controller('MyAppController', function ($scope) {
// your code goes here
});
or
var MyAppController = function ($scope) {
$scope.message = "Welcome to Angular Tutorial";
};
myAppModule.controller("MyAppController", MyAppController);
<html>
<head>
<title>
</title>
<script src="../../angular.min.js"></script>
<script type="text/javascript">
myApp = angular.module('myApp', []);
myApp.controller("empController", function($scope){
$scope.ename = {nm : "Harry"};
$scope.changeName = function(){$scope.ename.nm = "Ron";};
});
myApp.directive("empDirective", function(){
return {
scope : {employeeName : "=myEmpName", nameChange : "&click"},
template : 'Employee Name is {{employeeName.nm}}. <button ng-click="nameChange()">Change Name</button>'
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="empController">
<div emp-directive myEmpName="ename" click="changeName()" > </div>
{{ename.nm}}
</div>
</body>
When I am running the above code I am not getting the employeeName.nm value inside directive. Not sure what I am missing. I am new in AngularJS
In your template, change
myEmpName
to
my-emp-name
Angular requires hyphen separated attributes in templates and converts them to camel case itself via a process called normalisation.
Is there any way to bind anything you could have written on a form before bootstrapping an AngularJS application?
For example, in this form (also executable in https://jsbin.com/womuyi). How could bind to the controller the data I've written on the input before clicking the bootstrap button?
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Angular Bootstrap Call Example">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="MainCtrl as vm">
Please type something before bootstrapping AngularJS
<form>
<input type="text" ng-model="vm.sth"><br/>
You wrote {{ vm.sth }}
</form>
<button onclick="doBootstrap()">Bootsrap AngularJS</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script>
angular
.module('main', [])
.controller('MainCtrl', function(){
var vm = this;
// How to bind what I wrote on the input after bootstrap??
});
function doBootstrap() {
angular.bootstrap(document, ['main']);
document.querySelector('button').disabled = 'disabled'
}
</script>
</body>
</html>
Quite ugly, but you can use document to store the values (or any other object that you want) to wait until your app is bootstrapped.
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Angular Bootstrap Call Example">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="MainCtrl as vm">
Please type something before bootstrapping AngularJS
<form>
<input id="sthInput" type="text" ng-model="vm.sth"><br/>
You wrote {{ vm.sth }}
</form>
<button onclick="doBootstrap()">Bootsrap AngularJS</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script>
angular
.module('main', [])
.controller('MainCtrl', function(){
var vm = this;
vm.sth = document.myBootstrap.sth;
});
function doBootstrap() {
var sthValue = document.querySelector("#sthInput");
document.myBootstrap = {
sth: sthValue.value
};
angular.bootstrap(document, ['main']);
}
</script>
</body>
</html>
Use ng-app directive before controller as below:
<body ng-app="main" ng-controller="MainCtrl as vm">
This will automatically do the bootstrapping for you.
The official documentation for the same can be found at https://docs.angularjs.org/api/ng/directive/ngApp.
you just save value of text box before bootstrap Angular App:-
`beforeData = (document.querySelectorAll(".beforeBootstrap")[0]).value;
angular.bootstrap(document, ['myApp']);
$event.target.disabled = 'disabled';`
see this plunker
I would approach this by doing something along the lines of processing input data before Bootstrap like #elecash suggested, but I would add it to a constant.
(function() {
'use strict';
window.doBootstrap = function() {
window.values = {};
var inputs = document.querySelectorAll('input'),
input;
for (var i = 0; i < inputs.length; i += 1) {
input = inputs[i];
window.values[input.getAttribute('ng-model')] = input.value;
}
angular.bootstrap(document, ['main']);
}
}());
Then in your Angular code:
angular
.module('main', [])
.controller('MainCtrl', ['preBootstrap', function(preBootstrap){
var vm = this;
angular.forEach(preBootstrap, function(value, key) {
var modifiedKey = key.replace('vm.', '');
this[modifiedKey] = value;
}, vm);
}])
.constant('preBootstrap', window.values);
I can't able to find out the issue for the following code. I never written controller in html file. I did this for a testing purpose.
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>AngularJs</title>
</head>
<body ng-controller="sampleController">
<div>
<h2>Adding a sample controller</h2>
<ul>
<li ng-repeat="cust in customers">
{{cust.name}} - {{cust.city}}
</li>
</ul>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function sampleController($scope) {
$scope.customers = [
{name:'Smith', city:'New York'},
{name:'Alen', city:'Atlanta'},
{name:'Dan', city:'California'},
{name:'Thomas', city:'Phoenix'}
];
}
</script>
</body>
</html>
Thanks in advance.
You should create an application and define your controller through that app:
<html ng-app="sampleApp">
...
<script type="text/javascript">
var sampleApp = angular.module("sampleApp", []);
sampleApp.controller("sampleController", function($scope) {
$scope.customers = [
{name:'Smith', city:'New York'},
{name:'Alen', city:'Atlanta'},
{name:'Dan', city:'California'},
{name:'Thomas', city:'Phoenix'}
];
});
</script>
...
The support for global controls is removed from angular 1.3, if you are using version till 1.2, it should work, see this working Fiddle
var myApp = angular.module('myApp',[]);
function sampleController($scope) {
$scope.customers = [
{name:'Smith', city:'New York'},
{name:'Alen', city:'Atlanta'},
{name:'Dan', city:'California'},
{name:'Thomas', city:'Phoenix'}
];
}
If you are using angular 1.3, global controller should not work, see this fiddle with angular 1.3
Use following code if you need to use angular version 1.3:
var myApp = angular.module('myApp',[]);
myApp.controller('sampleController',function($scope) {
$scope.customers = [
{name:'Smith', city:'New York'},
{name:'Alen', city:'Atlanta'},
{name:'Dan', city:'California'},
{name:'Thomas', city:'Phoenix'}
];
})
See this Fiddle
It's better to declare the app and controller declaratively.
The next code works:
<!doctype html>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<title>AngularJs</title>
</head>
<body ng-controller="SampleController">
<div>
<h2>Adding a sample controller</h2>
<ul>
<li ng-repeat="cust in customers">
{{cust.name}} - {{cust.city}}
</li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
var app= angular.module('MyApp',[]);
app.controller('SampleController', function ($scope) {
$scope.customers = [
{name:'Smith', city:'New York'},
{name:'Alen', city:'Atlanta'},
{name:'Dan', city:'California'},
{name:'Thomas', city:'Phoenix'}
];
}
);
</script>
</body>
</html>
Both the answers posted can be used.
In both usages, the recommended approach is to inject $scope and use that (rather than using this, which you can do in the second approach as well).
The difference between approach one and two is in how to support minification. In the former, you can supply an array of injected arguments, whereas in the latter you modify $inject. This is of course a bit technical but it is highly recommended to support minification. See A note on minification in the documentation.
The former also does not name the function in the global scope, which is generally a good thing!