index.html: this is the html
<html ng-app="myapp">
<head>
<title>shruthi reddy</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--<script type="text/javascript">window.NRUM ||(NREUM={}),__nr_require=function(e,t...</script>-->
<script src="js/app.js"></script>
</head>
<body ng-controller="Controller">
<h1> ASHOK KUMAR PETLA</h1>
<P>VIJAYAWADA IS KING IS VANGAVEETI MOHAN RANGA. </P>
<button type="submit" ng-click="create()">swathi</button>
<button type="submit" ng-click="subject()">srisha</button>
<button type="submit" ng-click="delete()">ramya</button>
<button type="submit" ng-click="edit()">sunitha</button>
</body>
</html>
APP.JS: ui bootstrap in js file . u can send the correct answer or code. i have tried but not come the popup.
this is script of index.html
var app=angular.module('myapp', ['ui.bootstrap']);
app.controller('Controller',['$scope', '$modal',function($scope,$modal){
$scope.create=function(){
var modalInstance=$modal.open({
templateUrl:'views/prakash.html',
});
}
}]);
index.html and app.js .
pop up is not coming if the swathi is clicked.
Are you sure the templateUrl you have given that is correct or the html file is available?
Or make sure you have initialized all the required dependent modules like ui-bootstrap-tpls-0.12.1.js
I have created a plunkr for your code and that is working.
var app=angular.module('myapp', ['ui.bootstrap']);
app.controller('Controller',['$scope', '$modal',function($scope,$modal){
$scope.create=function(){
var modalInstance=$modal.open({
templateUrl:'mypage.html',
});
}
}]);
See the plunkr here-
http://plnkr.co/edit/GRgjv8fyquOQirXwWaWQ?p=preview
You need to include the -tpls.js file aswell, that file will make your own templates go into $templates.cache so you can use your own.
I can't see that you've installed the tpls file.
Also shouldn't it be $uibModal instead of $modal?like so
var app=angular.module('myapp', ['ui.bootstrap']);
app.controller('Controller',['$scope', '$uibModal', function($scope, $uibModal) {
$scope.create=function(){
var modalInstance=$modal.open({
templateUrl:'views/prakash.html',
});
}
}]);
Related
We had to update the Bootstrap version (bs3 to bs4). We have some issues with Angularjs modal.It only works in bs3.4.1 version not even 3.4.2. Below is a similar piece of code, the problem is,
It looks like a template has been added to the dom, but the modal doesn't appear and behave like a modal. How can I solve this problem. Any help will be really appreciated.
<html>
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript">
var app = angular.module("app", ['ui.bootstrap']);
app.controller("democontroller", ["$scope", "$modal", function($scope, $uibModal){
$scope.click = function(){
$uibModal.open({
templateUrl: "modal.html",
controller: "modal",
scope: $scope
});
}
}]);
app.controller("modal", modal);
function modal() {
console.log("in modal controller")
}
</script>
</head>
<body>
<div ng-app="app" ng-controller="democontroller">
<button type="button" class="btn btn-default" ng-click="click()">
Open modal
</button>
<script type="text/ng-template" id="modal.html">
<h1>modal</h1>
</script>
</div>
</body>
</html>
If you change your style link to this (in the shaded area below) the modal should work. I got the link from here fyi:
https://getbootstrap.com/docs/3.3/getting-started/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
I'm trying to build a firebase+angularfire application, however i'm unable to use angularfire because of this error. I'm able to connect to firebase and load angular without using angularfire.
ReferenceError: $firebaseObject is not defined
Stack trace:
#http://localhost:5000/scripts/controllers.js:5:13
invoke#http://localhost:5000/components/angular/angular.js:5003:16
$controllerInit#http://localhost:5000/components/angular/angular.js:10866:24
nodeLinkFn#http://localhost:5000/components/angular/angular.js:9746:35
compositeLinkFn#http://localhost:5000/components/angular/angular.js:9055:13
compositeLinkFn#http://localhost:5000/components/angular/angular.js:9058:13
compositeLinkFn#http://localhost:5000/components/angular/angular.js:9058:13
publicLinkFn#http://localhost:5000/components/angular/angular.js:8920:30
bootstrapApply/<#http://localhost:5000/components/angular/angular.js:1919:11
$eval#http://localhost:5000/components/angular/angular.js:18161:16
$apply#http://localhost:5000/components/angular/angular.js:18261:20
bootstrapApply#http://localhost:5000/components/angular/angular.js:1917:9
invoke#http://localhost:5000/components/angular/angular.js:5003:16
doBootstrap#http://localhost:5000/components/angular/angular.js:1915:5
bootstrap#http://localhost:5000/components/angular/angular.js:1935:12
angularInit#http://localhost:5000/components/angular/angular.js:1820:5
#http://localhost:5000/components/angular/angular.js:33367:5
trigger#http://localhost:5000/components/angular/angular.js:3431:5
controllers.js
angular.module('ghfzero',['firebase'])
.controller('testController', ['$scope',function($scope) {
var ref = firebase.database().ref();
var obj = $firebaseObject(ref);
ref.set({
first:"hello",
last:"world"
});
}])
index.html
<!DOCTYPE html>
<html lang="en" ng-app="ghfzero">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
</head>
<body>
<h1>firebase working ok with angular prelims</h1>
<form ng-controller="testController">
<input type="text" name="test" ng-model="angtest">
<input type="submit" value="add test">
<h2>{{angtest}}</h2>
<button ng-click="addMessage()">test db</button>
</form>
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
<script>
// Initialize Firebase
var config = ......
.........
firebase.initializeApp(config);
</script>
<!--Firebase 3.0.0 and above require angularfire ver ^2.3.0!-->
<!--Initializing Angular, Angular Ui Router, Angular Fire, jQuery!-->
<script src="components/angular/angular.js"></script>
<script src="components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="components/angularfire/dist/angularfire.js"></script>
<script src="components/jquery/dist/jquery.js"></script>
<script src="scripts/controllers.js"></script>
</body>
</html>
inject de $firebaseObject in controller like this:
...
.controller('testController', function($scope, $firebaseObject) {
...
I have come across a lot of similar issues here on SF and did everything as expected. Yet, I can't seem to get this simple Angular app working. Console throws up this exception
angular.min.js:6 Uncaught Error: [$injector:modulerr]
AngularJS site docs gave some suggestions which I followed. Yet, I still get that same exception. Here is my code.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dead Simple Proj</title>
<link rel="stylesheet" href="content/css/styles.css">
<script scr="app\app.js"></script>
<script src="app\lib\angular.min.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
</html>
I have this in the App.js
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
I double checked file paths and other possibly obvious mistakes, but no joy.
I am definitely missing out something here? Thanks.
Your paths referencing the libraries and the app.js are wrong and in the wrong order . You should load the angular reference first and then the relative js referencing the module.
Change
From
<script scr="app\app.js"></script>
<script src="app\lib\angular.min.js"></script>
To
<script src="app/lib/angular.min.js"></script>
<script scr="app/app.js"></script>
DEMO
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dead Simple Proj</title>
<link rel="stylesheet" href="content/css/styles.css">
<script type=" text/javascript " src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
</html>
I dont think you added your angular files properly. I made a plunker out of your code and it worked. you can cross check with my code.
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="GreetingController">
<h1>Hello {{greeting}}!</h1>
</body>
</html>
Hey guys i got a problem with implementing ngDialog in my current project.
For testing i have created following working code:
test.php
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog-theme-plain.min.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.21/angular.js" data-semver="1.2.21"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.1.6/ng-dialog.min.js"></script>
<script src="neuejs.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="openDialog($event)">Open Me!</button>
<script type="text/ng-template" id="templateId">
<div id="target" ng-click="test()" ng-controller="tt">
Bilder
</div>
</script>
</body>
</html>
and in a seperate neuejs.js:
var app = angular.module('myapp', ['ngDialog']);
app.controller('MainCtrl', function($scope, ngDialog) {
$scope.openDialog = function($event) {
var dialog = ngDialog.open({
template: 'templateId',
scope: $scope,
controller: 'FileController',
$event: $event,
className: 'ngdialog-theme-plain'
});
};
});
This works just fine. Exactly what i want.
My existing project has an app.js file with
var iMPULS = angular.module('iMPULS', []);
and the project works fine as well, but if i want to use ngDialog and change the module to:
var iMPULS = angular.module('iMPULS', ['ngDialog']);
the whole layout is kind of messed up, no link in my iMPULS.conf work anymore plus i got "Error: No module: ngDialog" concerning to angular.min.js in Firefox-Browserconsole.
How could this be? I just addes the 'ngDialog' to the module in app.js just like in the testfiles above.
I downloaded the seed project from git. Basically, changed the code in following three files -
app.js
angular.module('app', []);
index.html
<!DOCTYPE html>
<html ng-app="app">
<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-controller="MessageController">
<div class="container">
<h1>{{title}}</h1>
</div>
</body>
</html>
MessageController.js
angular.module('app').controller("MessageController",function(){
alert("inside message controller");
var vm = this;
vm.title = 'AngularJS Tutorial Example';
});
When I run http://localhost:8000/app/index.html, it displays {{title}} and not the value inside controller.
I am new bie in angular and trying to learn but unable to figure out whats wrong here.
You appear to have two different things happening.
First you appear to have missed adding your javascript dependencies to your html file.
<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>
<script src="app.js"></script>
<script src="MessageController.js"></script>
</head>
An additional note
Because you are using multiple files (which is fine), make sure you include the app.js file before the MyController.js file.
You also need to correctly access the scope. Even if you add the javascript dependencies you will get a blank page if not bound correctly.
Because you are using var vm = this; format you need to be sure to use the control as annotation
<body ng-controller="MessageController as myctrl">
<div class="container">
<h1>{{myctrl.title}}</h1>
</div>
</body>
Working Plunker Example
Another options is to directly extend $scope in your controller. You could then just have {{title}} on your page and it should bind correctly.
angular.module('app').controller("MessageController",['$scope',function($scope){
alert("inside message controller");
$scope.title = 'AngularJS Tutorial Example';
}]);
var yourapp = angular.module('app', []);
yourapp .controller('MessageController', function ($scope) {
alert("inside message controller");
$scope.title = 'AngularJS Tutorial Example';
});