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
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>
This code should evaluate the part in between the double curly braces according to a tutorial I'm following. I'm new to angularjs. So, pardon me if I'm asking silly question. Here's the link to plnkr http://plnkr.co/edit/sFhDiA?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#2.0.0" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-snapshot/angular2.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
<div> {{ 78 + 8 }} </div>
</body>
</html>
You are missing your ng-app directive name on your html. Which means Angular won't run on your page.
Look into the ngApp documentation here. You can get a clear idea from there!
Similar SO question is also available here
I am trying to include a processing Canvas inside a angularjs view.It works inside the index.html but not work inside a view.Sample is given below.
https://plnkr.co/edit/3ZaLzswnnVcf71bwrrgp?p=preview
Home.html
<div class="container">
<canvas data-processing-sources="hello.pde" ></canvas>
Back
</div>
Index.html
<!DOCTYPE html>
<html>
<head lang="en">
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing.min.js"></script>
</head>
<body>
<div ng-app="mainApp">
<ng-view></ng-view>
</div>
</body>
</html>
ng-view is a directive from ngRoute. What you should do instead is just include your template:
<div ng-include="Home.html"></div>
If you want to use ng-view you must setup your app to work with ngRoute.
Example
I am learning angular.. I tried to run a small example,but wasn't able to render correct output.Can anybody help?
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-app='app' ng-controller='MainController as main'>
<div class='container'>
<h1>{{ title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
</div>
</body>
</body>
</html>
app.js
angular.module('app', []);
angular.module('app').controller("MainController", function($scope){
$scope.title = 'AngularJS Nested Controller Example';
});
angular.module('app').controller("SubController", function(){
this.title = 'Sub-heading';
});
I am not able to figure out why angular variables are getting displayed as normal text instead of its assigned value. kindly help...
It looks like you are missing a link to your app.js file.
Just a tip when referencing your .js files, make sure you reference any javascript which uses Angular AFTER the line where you reference angular.js
So your references should look something like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script> <!-- this is the one you are missing -->
Please, plunkr
It works
<h1>{{main.title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
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>