I've started moving my angularJS controllers into separate files for the sake of readability, however I found this causes the controller defined in a separate file to not run at all. However, I'm wondering if this has to do with my MakeGray.html being in a separate folder from MakeGray.js?
http://imgur.com/2XWf8Ge
When the drop down menu item selected is MakeGray it will inject the following html
<html ng-app="app">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/opencv_css.css" />
</head>
<body ng-controller="MakeGray">
<div class="row">
<div class ="col-md-4 col-md-offset-5">
<!--<button type="button" class="btn btn-primary" ng-model-->
<button ng-click="MakeGray_Button()">Make Gray</button>
</div>
</div>
<script src="../../js/jQuery.js"></script>
<script src="../../js/angular.js"></script>
<script src="../../js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="../../js/MakeGray.js"></script>
<script src="../../js/app.js"></script>
</body>
</html>
js app
var app = angular.module("app", [
"MakeGray",
"ui.bootstrap"
]);
js MakeGray
var MakeGray = angular.module("MakeGray", ["ui.bootstrap"]);
MakeGray.controller("MakeGray",["$scope", "$http", function($scope, $http){
alert("HELLO"); // Doesn't even get to hello when I click on the MakeGray button
}]);
My firebug outputs no errors
I'm not sure what you mean by the title, you're only trying to access one controller on this page. Anyway the functionality you're trying to get works.. heres a plnkr. I will note that you have to wrap the alert in a $scope function to make it fire with the button.
var MakeGray = angular.module("MakeGray", ["ui.bootstrap"]);
MakeGray.controller("MakeGray",["$scope", "$http", function($scope, $http){
$scope.MakeGray_Button = function(){
alert("HELLO"); // Does get to hello when I click on the MakeGray button
}
}]);
Related
I am trying to add more than one ng-app in a application ,how to register the both ng-app and let me know what is the use of using more than one ng-app?
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.
var app1 = angular.module('app1', []);
app1.controller('Ctrl1', function ($scope)
{
$scope.name = "Angular";
});
var app2 = angular.module('app2', []);
app2.controller('Ctrl2', function ($scope)
{
$scope.name = "Developer";
});
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('app2'), ['app2']);
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="app1">
<div ng-controller="Ctrl1">
<span>{{name}}</span>
</div>
</div>
<div id="app2">
<div ng-controller="Ctrl2">
<span>{{name}}</span>
</div>
</div>
</body>
</html>
I have a problem. In my html file I have a following content:
<div ng-controller='nav'>
<ul >
<li ng-show="sh" >
<a ui-sref="problems">name</a>
</li>
</div>
My controller is:
app.controller('nav', function($scope, $state, $http){
$(function(){
$scope.sh=true;
//$http.get('something');
});
});
If
$http.get('something')
is commented, ng-show does not work. However, if I uncomment it, it starts to work. I cannot understand the reason of this. Did you have a similar problem?
Try this below code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div ng-controller='nav'>
<ul>
<li ng-show="sh">
<a ui-sref="problems">name</a>
</li>
</ul>
</div>
<script src="../lib/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('nav', function ($scope, $state, $http) {
$scope.sh = true;
$http.get('something')
});
</script>
</body>
</html>
I dont know why you included the jquery part. It is always good to not to use jquery in AngularJS projects. You will get almost all things in AngularJS one way or the another.
There is no need for jquery function there you can directly use $scope.sh=true;
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 want to save the current state of check box and reload it when open the page next time.
AngularJS:
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope, $window) {
var init = function () {
$scope.check = $window.localStorage.getItem("app3");
};
init();
$scope.Save = function () {
$window.localStorage.setItem("app3", $scope.check);
}
});
HTML:
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular-1.4.9.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyController">
<input id="check1" type="checkbox" ng-model="check" />
<input type="button" value="Save" ng-click="Save()" />
</div>
</body>
</html>
Dont use jquery with angular.
Attach a ng-model to your input box like so : and you can access the value of the input in your controller using $scope.check
your local storage setting will be like so :
$window.localStorage.setItem('app3',$scope.check);
Thats it! Kindly go through angular tutorials or their documentation to understand how angular works.
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',
});
}
}]);