I apologize for the poor formatting. Basically, "clientCount" is appearing as {{clientCount}} on my screen, rather than the integer '10'. Any ideas? Thank you!
var app = angular.module('metaDashboard', []);
/**This is for the meta-dashboard home page
*/
app.controller('TotalNumberController', ['$scope', function($scope) {
$scope.clientCount = '10';
$scope.campaignCount = '20';
$scope.accountCount = '10';
$scope.userCount = '100';
}
]);
--------------------------------------------------------------------
<html lang="en" ng-app="app">
<body class="page-body" data-url="http://neon.dev" ng-app="app">
<div class="row" ng-controller="TotalNumberController">
<div class="icon"><i class="entypo-globe"></i></div>
<div class="num"> {{clientCount}} </div>
<h3>Clients</h3>
<p></p>
</div>
</body>
</html>
Your app is called metaDashboard not app, you should change your code to the following:
<html lang="en" ng-app="metaDashboard">
Also ensure that you have angular.js files included in your head section.
Full snippet:
var app = angular.module('metaDashboard', []);
app.controller('TotalNumberController', ['$scope', function($scope) {
$scope.clientCount = '10';
$scope.campaignCount = '20';
$scope.accountCount = '10';
$scope.userCount = '100';
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="metaDashboard">
<div ng-controller="TotalNumberController">
<h1>{{clientCount}}</h1>
</div>
</body>
</html>
I have also included this Plunker here for you demonstrating it working:
https://plnkr.co/edit/t80RjCqjmE3y9bOkESo0?p=preview
As an additional note, it may be best to use the ViewModel syntax rather than $scope which I believe is best practice and may help you if you ever nested your AngularJS controllers.
Related
I am unsure why the input is not updating the name variable as undefined is always displayed
Here is my html code
<!DOCTYPE html>
<html>
<head>
<title>My First React Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="refscript.jsx" type="text/jsx"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
And this is my jsx file named refscript.jsx
var RefComponent = React.createClass({
display: function(){
var name = this.inputdemo.value;
document.getElementById('dispName').innerHTML = name;
},
render:function(){
return(
<div>
<h2>Name: <input type="text" ref ={input => this.inputdemo = input}/></h2><br/>
<button onClick={this.display}>Click</button>
<h1>Hi...<span id='dispName'></span></h1>
</div>
);
}
});
React.render(
<RefComponent/>, document.getElementById('content')
)
I want to move the angular to its own .js file, so I looked at Using an HTML button to call a JavaScript function.
<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />
As far as I understand, an event has to be triggered when I click on the button, so I tried following this example on w3schools
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click Me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
</body>
</html>
It simply counts the number of times a button has been clicked and it works. However, when I move the <script> to its own .js, the function is not found. Am I missing something? a dependency perhaps?
New files:
HTML:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click Me!</button>
<p>{{ count }}</p>
</div>
</body>
</html>
.js
<script>
var app = angular.module('myApp', ['ngRoute']);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
So two problems.
First, in your .js file you can remove the <script> tags. You only need this for javascript in html files.
Second, in your .html file, you need to add a reference to your script file. This needs to go below the angular script since it is dependent on that script, so just add, <script src="[link to your script file]"></script> to your html right below the angular script.
.html
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="app.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click Me!</button>
<p>{{ count }}</p>
</div>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
Hi I am new in reactjs when i am running server.js file from terminal it show blank page on browser. The code of index.html file is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/babel-
core/5.8.23/browser.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-
dom.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('app')
);
</script>
</body>
</html>
Thanks in advance.
This is a working example.
In your code, the wrong part is the CDN link to babel-core. You may always check your console when working with JS (on Google Chrome: Ctrl + shift + J on Windows, Cmd + Opt + J on IOS).
On the other hand, I thought this was a good opportunity to also introduce components (see ).
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
</head>
<body>
<div id="hello"></div>
<script src="https://unpkg.com/react#15.0.0/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.0.0/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel">
var Greeting = React.createClass({
render: function() {
return (
<p>Hello World</p>
)
}
});
ReactDOM.render(
<Greeting/>,
document.getElementById('hello')
);
</script>
</body>
</html>
I am trying to test angular v1.6.2 components and ui-router together but can't get it to work. Here is my
html:
<!DOCTYPE html>
<html lang="en" ng-app="rrrwamac">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <test></test> -->
<ui-view></ui-view>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="index.js"></script>
<script src="test.js"></script>
</body>
</html>
component:
angular.module('rrrwamac').component('test', {
template: '<h3>Its the UI-Router<br>testing..!</h3>'
})
and config:
var app = angular.module('rrrwamac', ['ui.router']);
app.config(function($stateProvider) {
$stateProvider
.state('test', {
url: '',
component: 'test'
});
});
NOTE: When I place component tag
<test></test>
everything works, but when I try using ui-router and ui-view it doesn't.
I am also using live-server that places an extra script into my html and connects to http://127.0.0.1:8080/.
Any help greatly appreciated. Thanx.
I am new to angularjs and I am using "emoji-min.js" and "emoji-min.css" to display the emoji in text field.
But I am not able to display. Here is my code:
<!doctype>
<html ng-app = "app">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="emoji.min.css">
<script src="angular.min.js"></script>
<script src="emoji.min.js"></script>
<script>
var app = angular.module("app", ["emoji"])
app.controller("AppCtrl", function ($scope) {
$scope.message = "String including Emoji codes :smiley:";
});
</script>
</head>
<body ng-controller="AppCtrl">
<textarea ng-model="message"></textarea>
<p ng-bind-html-unsafe="message | emoji"></p>
<pre>{{ message }}</pre>
</body>
</html>
Please tell where I am going wrong.
For ng-bind-html to work, you need to have ngSanitize module injected in your app.
checkout this