Please tell me why this very basic plunk is not working.
[https://plnkr.co/edit/alQf2gACkYFSirjCzBFs?p=preview][1]
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
I think there isn't any errors in this code.
Please explain me how to fix this.
Also let me know if anything needs to be known about Plunker.
Thanks for help.
Hi the plunk u created evrything is correct but the library for angular you mentioned have problem
http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
change to this
https://code.angularjs.org/1.3.20/angular.js
thats it try.
Replacing
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
with
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
solved my problem for my basic angular JS application.
Related
I am new to use angular.js.
I want to use gauge module ,but after i finish my html following Angular Gauge Document,it's not working(browser shows nothing).
I guess the problem is i didnt make the module work.
Can anybody tell me what is wrong with my code.
<!DOCTYPE HTML>
<html>
<body ng-app = "myApp">
<ng-gauge size="150" type="full" thick="5"
min="0" max="120" value="68.2"
cap="round" label="Speed" append="mph"
foreground-color="#ffcc66" background-color="#EEE">
</ng-gauge>
</body>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-gauge/dist/angularjs-gauge.min.js"></script>
<script>
angular.module('myApp', ['angularjs-gauge']);
</script>
</html>
Plus, in the document installation part,it says:
As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the chart.js module:
i didnt use chart.js module in my project,so which chart.js file this guide refer to ?
You need to include the script tags inside the body tag, also you included the angular.min.js twice.
<!DOCTYPE HTML>
<html>
<body ng-app = "myApp">
<ng-gauge size="150" type="full" thick="5"
min="0" max="120" value="68.2"
cap="round" label="Speed" append="mph"
foreground-color="#ffcc66" background-color="#EEE">
</ng-gauge>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://rawgit.com/ashish-chopra/angular-gauge/master/src/angularjs-gauge.js"></script>
<script>
angular.module('myApp', ['angularjs-gauge']);
</script>
</body>
</html>
I'm copying my code exactly from an egghead.io tutorial but it isn't working. The angular expression isn't posting to the view properly (it posts with the {{}} rather than evaluating). It works if I remove ng-controller from the <body> and the value "app" from ng-app in the <html> so I can't figure out where to pinpont the problem. I've tried moving the script for the angular module/controller all over the html page (header, bottom of page, etc.) and no luck.
As a side question I'm wondering if Stackoverflow is the proper place to post this. Supposedly you're not supposed to use the 'code-review' tag and reviews of "other-wise working code" belongs on codereview.stack. My code is working sooo...
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
angular.module("app", [])
.controller(FirstCtrl, function FirstCtrl()[
var first = this;
first.greeting = "First";
])
</script>
</head>
<body ng-controller="FirstCtrl as first">
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">
{{first.greeting}} {{World}}
</div>
</body>
</html>
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
angular.module("app", [])
.controller("FirstCtrl", [ function () {
var first = this;
first.greeting = "First";
}
])
</script>
</head>
<body ng-controller="FirstCtrl as first">
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">
{{first.greeting}} {{World}}
</div>
</body>
</html>
I made a slight change to your code.
The Controller name needed double qoutes around it see "FirstCtrl" also you had a missing square bracket and closing bracket. Copy and past the above code it should work.
It works for me. :)
Your copying went wrong somewhere , controller name should be a string
Change:
.controller(FirstCtrl...
to
.controller('FirstCtrl'...
You should have seen errors thrown in console to give you clues about this
I am having some trouble getting the popover element to work in an angular app using ui.bootstrap - here is some code:
in the app.js file, I am requiring ui.bootstrap
angular.module('developerPortalApp', [
'ui.bootstrap'
])
The html element I am trying to attach a popover to
<div ng-controller="LoginCtrl">
how do I register?
</div>
The popover content isn't going to be dynamic so there isn't anything in the controller for that. This is my first time using angular-bootstrap, so, is there something simple that I'm missing?
Any help is very much appreciated.
May be you are missing some script file:-
Here is working example of your question:-
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="LoginCtrl">
how do I register?
</div>
</body>
</html>
http://plnkr.co/edit/E2LbaCoHKHKzifeL5Hny?p=preview
The following code does not seem to work for me. I'm doing the official video tutorial from their website.
<!doctype html>
<html ng-app>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>
function TodoCtrl($scope){
$scope.totalTodos = 4;
}
</script>
</head>
<body>
<div ng-controller="TodoCtrl">
{{totalTodos}}
</div>
</body>
</html>
I also tried to do this tutorial here (http://www.ng-newsletter.com/posts/beginner2expert-how_to_start.html) and it does not work with 1.2.12 but when I changed it to 1.0.7 it did.
Am I doing something silly here or are these tutorials too old now?
I don't think this is an Angular version issue. Here is a plunker that is working with 1.2.12.
I think you are just missiong http: at the front of your source. The tutorial you reference looks like this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
So, your code should reference angular like this:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
How does any body know how to divide a single html page in different view with angular.js.
I have this working :
<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
....
</head>
<body>
<div ng-view></div>
</body>
</html>
But i would like to do something like this :
<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
....
</head>
<body>
<div ng-view Sidebar></div>
<div ng-view></div>
<div ng-view Footer></div>
</body>
</html>
In advance thanks.
I think what you're looking for is "ng-include" : http://docs.angularjs.org/api/ng.directive:ngInclude
The Angular UI router should be a newer better way to handle this problem. At least that's its goal, and it looks very promising, but I haven't used it yet myself.
Angular UI is restructuring their site right now, so the links are a little scattered:
https://github.com/angular-ui/ui-router/wiki
http://angular-ui.github.io/ui-router/sample/#/