Can someone tell me why this simple angularjs jsfiddle not working?
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope', function MyCtrl($scope) {
$scope.name = 'Superhero';
}]);
and
<div ng-app="myApp" ng-controller="MyCtrl">
Hello, {{name}}!
</div>
results in
Hello, {{name}}!
https://jsfiddle.net/cbdrow8u/1/
Click on JAVASCRIPT settings in the code panel and change LOAD TYPE from OnLoad to NoWrap in body.
Remove ng-app="myApp" from the div tag.
Click the gear icon in the top right corner of HTML and in the BODY TAG field enter <body ng-app="myApp">.
Click the gear icon in the top right corner of JavaScript and in the LOAD TYPE select No wrap - in <body>
Click Update then Run.
Profit!
Related
I'm trying some initial stuff to get used to AngularJS. My current source is SoloLearn. I tried to recreate their app, which adds +1 to a counter when a button is clicked.
I have tried checking the code from their app, and I've also copied and pasted their work onto my HTML file and it still doesn't work, I tried an online tool for ascii diffs and my code should be identical, yet my inspector yields this:
http://errors.angularjs.org/1.6.4/$controller/ctrlreg?p0=clickCounter
at angular.js:38
at angular.js:10839
at ba (angular.js:9931)
at n (angular.js:9701)
at g (angular.js:9055)
at g (angular.js:9058)
at g (angular.js:9058)
at angular.js:8920
at angular.js:1919
at m.$eval (angular.js:18161)
I checked the site and as I understand, my code should still be working, yet it's not.
My code:
<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>
Their code:
<div ng-app="myApp" ng-controller="clickCounter">
<button ng-click="count=count+1">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('clickCounter', function($scope) {
$scope.count = 0;
});
</script>
Thanks for the help!
I have added both in different plunker, both are working
http://plnkr.co/edit/Pk8bY3jMiRqwiyWhxEkn?p=preview
http://plnkr.co/edit/aJZTXMQ1dATZI4XUSCmc?p=preview
<div ng-app="myApp" ng-controller="clickCounter">
<button ng-click="count=count+1">Click me!</button>
<p>{{ count }}</p>
var app = angular.module('myApp', []);
app.controller('clickCounter', function($scope) {
$scope.count = 0;
});
As #Lex mentioned, I needed to define the Angular app specifically for the app I was running and not have it all generically crammed in the same place.
The code on the first URL I posted is working now. Basically changing the body tag to this: <body ng-app=""> and naming each div app made everything work as should.
Thank you all for your help.
https://plnkr.co/edit/U9tL95qS5AgsPu6nNwVD/
I am able to change ng-view with templateUrl. But it is not updating {{msg}} when I am updating it using $scope.msg in every new controller.
Is there a way to update it without using $rootscope. Since I have heard that $rootScope practise is bad.
I guess I Am not registering the controller ??
I am new to Angular.
I dont know how to use services
in index.html
app.controller("redCtrl", ['$scope', '$route', function($scope, $route) {
$scope.msg = "I love red"; //NOT WORKING **************
}]);
check out this plnkr https://plnkr.co/edit/rvIZouNydPpwFgsIiVaf
#Rohitas Behera The reason is simple you are using
<div ng-app="myApp" ng-controller="mainController">
<p>Main</p>
Red
Green
Blue
<div ng-view>
</div>
{{msg}} <!-- why using here !>
</div>
so this time the msg is in scope of maincontroller . There are not other controller in scope
To do so remove {{msg}} from index.html and place it in there respective page.
Like this.
blue.html
<div style="background-color:#2196f3;">
<h1>Blue {{msg}}</h1>
</div>
same for all html page.
To alter the value {{msg}} in different context/controller, you will need to write {{msg}} in individual .html files where you have set the scope of respective controller.
As of now the variable is accessible only to your mainController as it is seen in index.html only, hence the value never changes.
You need to remove it from index.html and put it in every html.
here is the fixed plunkr
you have to add {{msg}} in every template.like this
<div style="background-color:#f44336;">
<h1>Red</h1>
{{msg}}
</div>
and remove {{msg}} form index.html page because maincontroller is working for index page and the modified page like this
<div ng-app="myApp" ng-controller="mainController">
<p>Main</p>
Red
Green
Blue
<div ng-view>
i use phonegap and onsen-ui in my application.
how to create loading with onsen in my app?
Thank you
sorry for my poor english.
Or you could use modal to show loading screen like this.
<ons-modal var="modal">
<ons-icon icon="ion-load-c" spin="true"></ons-icon>
<br><br>
Please wait.<br>Loading...
</ons-modal>
then call the modal.show(); in your controller to show the modal and modal.hide(); to hide it.
Use ngShow or ngHide.
The following is the sample code.
<script>
var myApp = angular.module('myApp', [ 'ngTouch', 'onsen.directives']);
myApp.controller('SampleCtrl', function($scope, $timeout){
$scope.isShow = true;
$timeout(function(){
//If page content was loaded, set the false to $scope.isShow.
$scope.isShow = false;
},'2000')
});
</script>
</head>
<body ng-controller="SampleCtrl">
<div ng-show="isShow">
<!--Define your loading screen animation with HTML and CSS.-->
</div>
</body>
</html>
You need to define css animation by yourself. However, there are many useful tools to create loading animation like this.
You can also use the placeholder..
https://onsen.io/reference/ons-loading-placeholder.html
I am trying to create a tooltip based from from this post
Angular-UI-Bootstrap custom tooltip/popover with 2-way data-binding
I successfully created the popup but I have trouble delivering the content to my popover.html
I added this to my script.js
var app = angular.module('myApp', ['ui.bootstrap', 'ian.bootstrap']);
app.controller('myCtrl', function ($scope) {
$scope.item = {
title: 'Original Title',
content:'content 1' //newly added item
};
$scope.text = 'Click me';
});
and I want to display it in my popover.html
<div class="popover-content">
{{item.content}}
</div>
It doesn't show anything. Can someone help me about it? thanks a lot!
my plunker
http://plnkr.co/edit/5pBZ9qq79OPl2tGEeYYV?p=preview
Here is your updated working Plunkr
Basically you have to pass the attr iantooltip-content with the binding of the content item, not the raw text, and after in the directive pass in the directive isolate scope options the binding of the content like :
iantooltipContent: '='
Just change the appenToBody variable and you're done.
You should read the docs for more infos about Angular directive :)
You can add the ng-controller in your div and then specify the controller name like so :
<div class="popover-content" ng-controller='myCtrl'>
{{item.content}}
</div>
Before the use cases, the basic syntax to create a custom directive.
For all the code samples in this page I started from the angular-seed template.
Starting from the angular-seed skeleton is quite easy to extract a model to begin to implement custom directives.
<html ngApp="myApp">
...
<div my-first-directive></div>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/directives.js"></script>
...
</html>
How do I make a jsfiddle out of the following code:
<html>
<head>
</head>
<body>
<div ng-app ng-controller="MainCtrl">
<ul>
<li ng-repeat="num in nums">
{{num}}
</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script type="text/javascript" charset="utf-8">
function MainCtrl($scope) {
$scope.nums = ["1","2"];
}
</script>
</body>
</html>
My non working attempt: http://jsfiddle.net/zhon/3DHjg/ shows nothing and has errors.
You need to set some things up in jsFiddle for this to work.
First, on the left panel, under "Frameworks & Extensions", select "No wrap - in <body>".
Now, under "Fiddle Options", change "Body tag" to <body ng-app='myApp'>
In the JS panel, initiate your module:
var app = angular.module('myApp', []);
Check it out: http://jsfiddle.net/VSph2/1/
#pkozlowski.opensource has a nice blog post about how to use jsFiddle to write AngularJS sample programs.
You've defined your controller in a function scope that is not accessible to angular (angular is not yet loaded). In other words you are trying to call angular library's functions and helpers like below example before getting angular library loaded.
function onload(){
function MainCtrl(){}
}
To resolve this, switch your angular load type to be No wrap - in <body> like shown in screenshot.
here is a working example in jsfiddle
Click JAVASCRIPT button, choose angular version and place where u want include loaded script:
Then click HTML button and add ng-app in body tag. Its all:)
I am writing my answer for those who land on this page , I was used to use ng-module directive but in jsfiddle after half an hour I realized that ng-module is not allowed and you see no error , and when changed that ng-module to ng-app fiddle worked very well .I just wanted to share this .And no wrap (body) is required too.
<div ng-app="appX" ng-controller="appCtrl">
<p>{{greeting}}
</p>
</div>
var app=angular.module("appX",[]);
console.log(app);
app.controller("appCtrl",function($scope){
$scope.greeting="Hello World";
});
https://jsfiddle.net/cloudnine/trgrjwf1/7/
Since Angular 1.4.8 has been chosen by JSFiddle as the top option for Angular V1 in its JAVASCRIPT setting panel, more restriction applies: both ng-app and ng-controller should be declared in HTML to make it work.
Sample HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="sample" placeholder="type something here...">
<span>{{sample}}</span>
</div>
Sample JS:
angular.module('myApp', [])
.controller('myCtrl', function($scope) {});
https://jsfiddle.net/y170uj84/
Also tested with the latest Angular 1.6.4, by setting as External Resource.
For little experiments in angular 5, you can use https://stackblitz.com/.
This site is used in angular documentation to run live demo. For example, https://stackblitz.com/angular/eybymjopmav