I am using two module in one page and second module is not working. If i removed first module then second one is working fine. I dont know why is this happening , because we can use the two or many module in one page.
<html>
<head>
<title>Angular JS</title>
<script src="angular.min.js"></script>
</head>
<body>
<p>------------ New Controller ------------</p>
<div ng-app="newApp" ng-controller="validateform" >
{{name}}
<form name="newForm">
Enter Name: <input type="text" id="firstName" name="firstName"
ng-model="firstName" ng-maxlength="20"> </br>
<button ng-click="show()" >Submit</button>
</form>
</div>
<script>
//Creating AngularJS controller here
var newApp = angular.module('newApp',[]);
newApp.controller('validateform',function($scope){
$scope.name="newApp";
$scope.show = function() {
if($scope.firstName == undefined || $scope.firstName == '')
alert('Name is Required');
else
alert('Hi - ' + $scope.firstName);
};
}
);
</script>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="myController">
{{name}}
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('myController',function($scope){
$scope.name="rishi";
});
</script>
</body>
</html>
You can only have one ng-app per page. If you want another module, then you can inject it into the first module:
var newApp = angular.module('newApp',['mainApp']);
This will give you access to that module's controllers etc...
And on the page, you could define that controller as the controller for a specific
<div ng-controller="myController">
...
</div>
The question is, why not just include the controller from the second module in the first module and have them all together?
Related
I created one sample application of Angular Js. It's working if I take only one controller. If I took tow controller then it's not working. It's showing Error: [$controller:ctrlreg] The controller with the name 'FirstNameController' is not registered. error. I referred this site
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<div ng-app="DemoApp">
<div ng-controller="FirstNameController">
First Name : <input type="text" ng-model="firstName"><br>
first Name: {{firstName}}
</div>
<div ng-controller="LastNameController">
Last name : <input type="text" ng-model="LastName"><br>
Last Name: {{LastName}}
</div>
</div>
<script>
angular.module('DemoApp',[]).controller('FirstNameController', function($scope){
$scope.firstName = "Anil";
});
angular.module('DemoApp',[]).controller('LastNameController', function($scope){
$scope.LastName = "Jagtap";
});
</script>
</body>
</html>
Angular.module("DemoApp") will create the module again.
So declare are
var module = Angular.module("DemoApp")
module.controller('FirstNameController', function($scope){
$scope.firstName = "Anil";
});
module.controller('lastNameController', function($scope){
$scope.firstName = "Anil";
});
Here is a snippet:
<!document html>
<html ng-app>
<head>
<title>First</title>
<script src="D:\Coding\angular.min.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="FirstController">
<input id="Text1" type="text" ng-model="user.name" />
<div>{{user.name}}</div>
</div>
<script>
function FirstController($scope){
$scope.user = {name: ""};
};
</script>
</body>
</html>
Open the .html file with Chrome, the '{{user.name}}' shows on the screen. I think the {{}} position should be the same with the textbox content, what's wrong?
You need to use like this :
<ng-app="Your Module Name ">
In controller write
var app=angular.module("your module name (can be anything)",[]).controller("myCtrl", function("your dependencies "){});
Hope it will work
In the ng-app attribute you need to add app name like as ng-app="myApp"
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
If you are using angular version below 1.3 it should work
DEMO
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://code.angularjs.org/1.2.3/angular.js"></script>
</head>
<body>
<div ng-controller="FirstController">
<input id="Text1" type="text" ng-model="user.name" />
<div>{{user.name}}</div>
</div>
<script>
function FirstController($scope){
$scope.user = {name: "test"};
};
</script>
</body>
</html>
You need to add like this
ng-app="yourappname"
Refer ng-app directive in documentation
Following Code is not showing or updating the value of nam in <p> tag. Kindly help !
<html ng-app>
<head></head>
<body>
<input ng-model = "nam.a" ng-controller = "myControl">
<p> Hello {{nam.a}} </p>
<script>
function myControl($scope){
$scope.nam = {
a : "abcdefg"
};
};
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
</body>
</html>
You should specify the app module in html page.
<html ng-app="Test">
<body ng-controller = "myControl">
<input ng-model = "nam.a"/>
<p> Hello {{nam.a}} </p>
Then inject the module and controller like as below.
var app = angular.module('Test', []);
app.controller('myControl', function($scope) {
$scope.nam = {
a : "abcdefg"
};
});
In your code there is no ng-app created, ng-controller is binded in wrong way also. This is the right implementation. Look at the example.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myControl">
<input ng-model="nam.a" >
<p> Hello {{nam.a}} </p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myControl', function ($scope) {
$scope.nam = {
a: "abcdefg"
};
});
</script>
</body>
</html>
you should write like this
<body ng-controller="myControl">
<input ng-model = "nam.a">
<p> Hello {{nam.a}} </p>
</body>
https://plnkr.co/edit/M5n5Zb3v3J9W9Mx65cub?p=preview
<html>
<body ng-app="yourAppName">
<div ng-controller="myControl">
<input ng-model="nam.a">
<p> Hello {{nam.a}} </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script>
angular.module('yourAppName', [])
.controller('myControl', function($scope) {
$scope.nam = {
a: 'abcdefg'
}
});
</script>
</body>
</html>
use angular to create a module (in the example, I called it yourAppName), which you reference in the HTML in the ng-app directive
move the ng-controller directive to a parent element for wherever you reference things on $scope
create a controller by using angular.module(...).controller() instead of just creating a random JavaScript function
The following code is not hiding span, How can i hide the span.i am asking this question as i am new to angularjs.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
$scope.myVar=true;
</script>
<body ng-app="" >
<span ng-hide="myVar">
Click here for admin role
</span>
</body>
</html>
You need a module first, then a controller or a directive.
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module("myApp")
.controller("myController", function ($scope) {
$scope.myVar = true;
});
</script>
<body ng-controller="myController">
<span ng-hide="myVar">
Click here for admin role
</span>
</body>
</html>
You haven't bootstrapped your application properly to make it an Angular app.
You need to create a main module
You need to attach the main module to the shell/index.html
You need a Controller to perform data-binding, user interactions, etc
You need to write your very first "Hello, World!" app using AngularJS as it very common writing a "Hello, World!" application when you're getting started with any technology.
ng-app directive is used to define the part of the HTML which will be an Angular app, it's value is an optional application module name to load. See this post about using-ng-app-without-a-value
Show or hide content using Angular 1.0.1 without specifying the main module in the ng-app directive
//angular
//.module('demo', [])
//.controller('DefaultController', DefaultController);
//DefaultController.$inject = ['$scope'];
function DefaultController($scope) {
$scope.isAdmin = true;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="">
<div ng-controller="DefaultController">
<span ng-show="isAdmin">
Click here for admin role
</span>
<span ng-hide="isAdmin">
Click here for user role
</span>
</div>
</div>
Please check the below example using $scope object to show or hide content by specifying the main module.
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
DefaultController.$inject = ['$scope'];
function DefaultController($scope) {
$scope.isAdmin = true;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController">
<span ng-show="isAdmin">
Click here for admin role
</span>
<span ng-hide="isAdmin">
Click here for user role
</span>
</div>
</div>
Please check the below example using controller aliasing syntax, to show or hide content by specifying the main module.
angular
.module('demo', [])
.controller('DefaultController', DefaultController);
function DefaultController() {
var vm = this;
vm.isAdmin = false;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl">
<span ng-show="ctrl.isAdmin">
Click here for admin role
</span>
<span ng-hide="ctrl.isAdmin">
Click here for user role
</span>
</div>
</div>
Here is my code there are two different applications in which two different controllers but the later one is not running. Why is this happening both of these are two different modules?
<!DOCTYPE html>
<html>
<head>
<title>EggHead IO</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/lib/angular.js"></script>
<script>
var app=angular.module('ctrldemo', []);
app.controller('FirstCtrl', function($scope){
$scope.name="yashdeep",
$scope.age="21"
});
var papa=angular.module('anodemo', []);
papa.controller('anoFirstCtrl', function($scope){
$scope.name="yamini";
$scope.age="22"
});
</script>
</head>
<body>
<div ng-app="ctrldemo" ng-controller="FirstCtrl">
<input type="text" ng-model="greeting"/>
<div>
{{greeting+" "+name+" "+age}}
</div>
</div>
<div ng-app="anodemo" ng-controller="anoFirstCtrl">
<input type="text" ng-model="greeeting">
<div>
{{greeeting+" "+name+" "+age}}
</div>
</div>
</body>
</html>
If you want to run multiple angular apps, you will need to manually bootstrap the apps using angulars .bootstrap()
var app = angular.module('ctrldemo', []);
app.controller('FirstCtrl', function ($scope) {
$scope.name = "yashdeep",
$scope.age = "21"
});
angular.bootstrap(document.getElementById('ctrldemo'), ['ctrldemo']);
var papa = angular.module('anodemo', []);
papa.controller('anoFirstCtrl', function ($scope) {
$scope.name = "yamini";
$scope.age = "22"
});
angular.bootstrap(document.getElementById('anodemo'), ['anodemo']);
You will also need to remove the ng-app from the HTML
<div id="ctrldemo" ng-controller="FirstCtrl">
<input type="text" ng-model="greeting" />
<div>{{greeting+" "+name+" "+age}}</div>
</div>
<div id="anodemo" ng-controller="anoFirstCtrl">
<input type="text" ng-model="greeeting">
<div>{{greeeting+" "+name+" "+age}}</div>
</div>
Fiddle: http://jsfiddle.net/03qj5pwf/
Whether or not this is a good idea, I'm not too sure. I think it would be better to inject the modules into the app.
There can only be one ng-app in a page and angular can only be bootstrapped once.
In order to use separate modules you need to have one master module and inject other modules into it as dependencies
var app=angular.module('ctrldemo', ['anodemo']);
<html ng-app="ctrldemo">
Now you can use controllers, services, directives etc from either module
If you are going to do it at all the best way would be by using a directive. Which is what I did. It's called ngModule. Here is what your code would look like using it:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Bob A";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Steve B";
});
</script>
</head>
<body>
<div ng-modules="MyModuleA, MyModuleB">
<h1>Module A, B</h1>
<div ng-controller="MyControllerA">
{{name}}
</div>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
<div ng-module="MyModuleB">
<h1>Just Module B</h1>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>