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>
Related
<html ng-app="notesapp">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body>
<script type="text/javascript"></script>
NAME:<input ng-model="name" type="text"> <br/>
Hello: <span ng-bind="name"></span>
</body>
</html>
Edit
For making small code like this work, we can actually define an empty ng-app.
Eg: <html ng-app = "">
If you however want to define ng-app with some value, we need to load that ng-app in javascript. It can be done in a separate js file or in the same html file with <script></script> tag. Please see below:
<script>
var app = angular.module('notesapp', []);
</script>
Please close the script tag in your head. Also angular needs ng-app for its functioning. Please use ng-app on the tag which encloses your angular content.
<html ng-app="notesapp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<script>
var app = angular.module('notesapp', []);
</script>
<body>
<script type="text/javascript"></script>
NAME:<input ng-model="name" type="text"> <br/>
Hello: <span ng-bind="name"></span>
</body>
</html>
Also, as you know, Sublime is just an editor. It has nothing to do with angular. Cheers.
I am only a few days into AngularJS, and have been having trouble trying to print out this simple message. I have 2 files, one is "index.html" and the other is "app.js". They are mind-numbingly simple:
<!--index.html:-->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Testing Angular</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="maryCtrl">
<p>{{mary}}</p>
</div>
</body>
</html>
<<!--end of index-->
//app.js:
var myApp = angular.module('myApp', []);
myApp.controller('maryCtrl', function ($scope) {
$scope.mary = 'had a little lamb.';
});
//end of app.js
The output on the page should be "had a little lamb." but I get "{{mary}}" instead. What really pisses me off is that I have a separate computer where it works just fine. I figure I must have a character wrong or am missing an extension, but I find that hard to believe since I just downloaded Visual Studio 2015 on this machine which has AngularJS and Angular-intellisense pre-loaded. Any help or criticism would be greatly appreciated.
you need a reference to the angular.js code.
make sure it is at the top of your script references.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
The link I provided is for a copy of the code that is hosted on a Google CDN. There are tons of benefits for using the CDN as opposed to having a local copy of angular.js on your computer (as long as you aren't trying to test your code offline).
You can find the CDN link on angularjs.org; Just click on the big blue download button and you will see options for obtaining the most recent version or legacy versions of angular.js
as #Pankaj Parkar commented, you should have angular.js file referenced before your app.js file:
<!--index.html:-->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Testing Angular</title>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="maryCtrl">
<p>{{mary}}</p>
</div>
</body>
</html>
<<!--end of index-->
//app.js:
var myApp = angular.module('myApp', []);
myApp.controller('maryCtrl', function ($scope) {
$scope.mary = 'had a little lamb.';
});
//end of app.js
you can download it from https://github.com/angular/angular.js
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
I've been sitting with this problem for a few hours and found a few answers, none of which have worked for me so far (AngularJs ReferenceError: angular is not defined). For some reason I can't seem to get my app to use Angular.JS. After adding the required js-files, my main file looks like this:
<!DOCTYPE html>
<html ng-app="AppName">
<head>
<title></title>
<link rel="stylesheet" href="/stylesheets/main.css">
</head>
<body>
<!-- Wrapper-->
<div id="wrapper">
<div id="page-content-wrapper">
<div class="page-content inset" ng-view>
</div>
</div>
</div>
<!-- /WRAPPER-->
<!-- ANGULAR CUSTOM -->
<script src="libs/angular/angular.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="javascripts/AngularApp.js"></script>
<script src="javascripts/appRoutes.js"></script>
<script src="javascripts/controllers/MainCtrl.js"></script>
<script src="javascripts/controllers/SettingsCtrl.js"></script>
<script src="javascripts/services/SettingsService.js"></script>
</body>
</html>
When I run the app it never seems to finish loading (see the image: http://imgur.com/FIAH4tH) and then crashes. In Firefox, I get the following error: http://imgur.com/UT3g7wY
Does anyone know how I can solve this problem?
--EDIT--
I've updated the position of the scripts in the app.
My AngularApp.js file looks like this:
angular.module('AppName', ['ngRoute', 'appRoutes', 'MainCtrl', 'SettingsCtrl', 'SettingsService']);
If your module AppName is defined in AngularApp.js, that needs to come before MainCtrl js.
Are your .js files separate angular modules? If so, they should not be listed as modules in your angular.module dependencies.
angular.module('AppName', ['ngRoute']);
Definitely include any of the libs/ files before your own custom code.
So put <script src="libs/angular/angular.js"></script> and <script src="libs/angular-route/angular-route.min.js"></script> before your other javascripts files and you should find the problem fixed.
I was having the same problem. Declaring the angular script tag in html's <head> tag worked for me. Therefore:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>AngularJS tryout</title>
<script src="../../node_modules/angular/angular.js"></script>
</head>
<body>
<h1>AngularJS tryout</h1>
<p>Nothing here so {{ 'far' + '!' }}</p>
</body>
</html>
I am trying to get angularstrap working but have not had any luck yet. here is my angular code
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//oss.maxcdn.com/angular.strap/2.0.0/angular-strap.min.js"></script>
<script src="//oss.maxcdn.com/angular.strap/2.0.0/angular-strap.tpl.min.js"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
{{understand}}
</div>
<script>
var app = angular.module('MyTutorialApp',['mgcrea.ngStrap']);
app.controller("MainController", function($scope){
$scope.understand = "I now understand how the scope works!";
});
</script>
</body>
</html>
I get this error
Uncaught object ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:33
when I take mgcrea.ngStrap out from
var app = angular.module('MyTutorialApp',['mgcrea.ngStrap']);
then it works. Any help will be appreciated!
angularstrap depends on angular animate..
include this
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.min.js"></script>
It is already answered here : $injector:modulerr using angular-strap?
AngularStrap is lighter and faster than ever as it does leverage the
power of ngAnimate from AngularJS 1.2+!
https://github.com/mgcrea/angular-strap/issues/651