I'm getting quite crazy here... I'm trying to use Bootstraps collapse functionality (https://angular-ui.github.io/bootstrap/#/collapse). I'm new to AngularJS. I get the error "Module 'myapp' is not available!". I can't seem to find what's wrong with this code:
<html>
<head></head>
<body>
<script type="text/javascript" src="/js/angular.js"></script>
<script type="text/javascript" src="/js/ui-bootstrap-tpls-0.13.2.min.js"></script>
<script>
angular.module('myapp').controller('CollapseDemoCtrl', function ($scope) {
$scope.isCollapsed = false;
});
</script>
<div ng-app="myapp">
<div ng-controller="CollapseDemoCtrl">
<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
</div>
</body>
</html>
Thank you!
In Angular the syntax for declaring a module is as below, where the modules dependencies are listed in the brackets.
angular.module('myapp', [])
When you want to retrieve a reference to the module, you do this - note how this time the brackets are not used.
angular.module('myapp')
You need to change your code so that it is like this:
angular.module('myapp', []).controller('CollapseDemoCtrl', function ($scope) {
$scope.isCollapsed = false;
});
Plunker here: http://plnkr.co/edit/?p=preview
Related
http://codepen.io/krabbypattified/pen/oYxmKz
View above Codepen. The Chrome DevTools console returns Error: [$injector:modulerr]. The same error occurs when script area is commented.
However, when script area is commented and the (identical) JS section is uncommented, Angular works fine with no errors. Why does this happen??
Note: I have a large application and isolated the bug to this phenomenon. I'm using a Prepros server and I'm getting this same annoying $injector error.
<div ng-app="testApp">
<div ng-controller="testController">
<h1>{{title}}</h1>
</div>
</div>
<script>
var app = angular.module('testApp',[]);
app.controller('testController', function($scope){
$scope.title = "Hello, World!";
});
</script>
<div ng-app="testApp">
<div ng-controller="testController">
<h1>{{title}}</h1>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
var app = angular.module('testApp', []);
app.controller('testController', function($scope) {
$scope.title = "Hello, World!";
});
</script>
Your angularjs library reference is not applied to your code.
In codepen,Attach your script in HTML rather than mentioning in settings window,
CODEPEN DEMO
Problem is codepen in HTML window you can have only HTML code,
Check here it works,
<body>
<div ng-app="testApp">
<div ng-controller="testController">
<h1>{{title}}</h1>
</div>
</div>
<script>
var app = angular.module('testApp', []);
app.controller('testController', function($scope) {
$scope.title = "Hello, World!";
});
</script>
</body>
DEMO
Codepen adds the code after the HTML, so the script you have initializing Angular won't have access to angular. If you change to this it will work.
<div ng-app="testApp">
<div ng-controller="testController">
<h1>{{title}}</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script>
var app =
angular.module('testApp', []).controller('testController', function($scope){
$scope.title = "Hello, World!";
});
</script>
I have a problem while I'm making an angularjs app.
I create a controller and bind it in routeProvider. With a function to initialize values for the controller like this.
angular.module('app.Login', ['app.rpc','ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {
templateUrl: '/static/tour/app/login/login.html',
controller: 'loginController'
});
}])
.controller('loginController', function($scope, $location, rpc) {
$scope.init = function() {
$scope.error = "";
console.log("Login Initialized");
}
$scope.init();
});
for login.html like this
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="page-header">Login</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="alert alert-danger alert-dismissable" role="alert" ng-show="error">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Error: </strong>
<span>{{error}}</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<form>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" ng-model="username" placeholder="Username">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" ng-model="password" placeholder="Password">
</div>
<button class="btn btn-primary action-btn" ng-click="login()">Login</button>
</form>
</div>
</div>
</div>
When I run the app, it call init() 3 times like this.
login
Find out in this stackoverflow that many people also get this troble. All of them solved by make sure that controller doesn't bind more than one time (in routProvider and in template), and check that only one ng-app in the template.
My main html like this.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Touring</title>
<!--Bootstrap-->
<link rel="stylesheet" href="/static/tour/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/tour/css/bootstrap-theme.min.css">
<!--/Bootstrap-->
</head>
<body>
<ng-view><ng-view>
<!--Angular-->
<script src="/static/tour/js/angular.min.js"></script>
<script src="/static/tour/js/angular-route.min.js"></script>
<script src="/static/tour/js/angular-cookies.min.js"></script>
<!--/Angular-->
<!--App-->
<script src="/static/tour/app/app.js"></script>
<script src="/static/tour/app/rpc/app-rpc.js"></script>
<script src="/static/tour/app/login/app-login.js"></script>
<script src="/static/tour/app/dashboard/app-dashboard.js"></script>
<script src="/static/tour/app/memo/app-memo.js"></script>
</body>
</html>
For my main app like this.
angular.module('app',
['ngCookies',
'ngRoute',
'app.Login',
'app.Dashboard',
'app.Memo',
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
resolve: {
"check": function($cookies, $location) {
if(!$cookies.get("user_id")) {
$location.path("/login");
}
else {
$location.path("/dashboard");
}
}
}
})
.when('/logout', {
resolve: {
"check": function($cookies, $location) {
if($cookies.get("user_id")){
alert("You have been Logout");
}
$cookies.remove("user_name");
$cookies.remove("user_id");
$cookies.remove("token");
$cookies.remove("dbname");
$location.path("/login");
}
}
});
}]);
It ok for this controller, I just want to initialize a text but it's not ok for init in some controller that need some AJAX request to server side, could make too many request for noting. Anyone can solve this please help me. Thanks.
PS1. My practice base on angular-seed https://github.com/angular/angular-seed
PS2. At first, I also used jquery and it show WARNING: Tried to load angular more than once. Once I remove jquery it never show warning again, but it didn't fix my problem
I already solve it
<ng-view><ng-view>
use this instead
<div ng-view></div>
Concerning your multiple method call, are you sure your current URL is exactly the same as defined in the $routeProvider config? (maybe ngRoute redirects from /login/ to /login and calls your controller twice)
PS2. At first, I also used jquery and it show WARNING: Tried to load angular more than once. Once I remove jquery it never show warning again, but it didn't fix my problem
AngularJS already contains a lite version of jQuery: jqLite. If jQuery is loaded before Angular, this last one will use it. If not, it use the built-in lite version.
In your case, the error is probably due to a jQuery loading after the Angular loading. Angular already loads its version and you load it again.
Try to load jQuery before Angular or do not load it at all.
I had already declared my app and controller in separate file and below is how i am loading my controller html DOM but it is not showing that message. Can someone please guide how to achieve this.
HTML:
<div id="bnProblemList">
<div ng-controller="problemListCtrl" data-ng-init="init()">
<div ng-view="">this is my message = {{message}}</div>
</div>
</div>
JS:
html = $j('#bnProblemList').html();
$compile(html)(scope);
Please let me know how to inject or load ng-controller html dynamically.
Your controller declaration is wrong. You should do it like this:
var myApp = angular.module('myApp',[]);
myApp.controller('problemListCtrl', ['$scope',
function($scope) {
$scope.message = "This is my message :-)";
}
]);
A proper way is to declare your Controller into an anonymous function, and add it to a module. Then, you have to set your ngApp.
Controller.js
Here, we will declare our controller, and create an app module. Then, we will declare ctrl as our controller into our app module.
(function(){
function Controller($scope) {
$scope.name = 'toto';
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
HTML
<body ng-app='app' ng-controller="ctrl">
<p>My name is {{name}}</p>
</body>
And don't forget to include your script tag :
<script src="controller.js"></script>
You can try Like below Example:-
Html Page:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title> Controller</title>
<script src="../Js/angular.min.js"></script>
<script src="../Js/Controller.js"></script>
</head>
<body>
<div ng-controller="MyFirstController">
{{ Msg }}
</div>
</body>
</html>
ControllerJs Page:
var MyApp=angular.module("MyApp",[]);
MyApp.controller("MyFirstController",function($scope){
$scope.Msg="Hello First Conroller";
})
i was able to load/ inject controller dynamically by the help of below code
<div id="bn" ng-controller="myCtrl as vm">
<div ui-view=''></div>
</div>
<script>
angular.element(document).injector().invoke(function($compile, $state) {
$state.go('myCtrl');
var scope = angular.element($j("#bn")).scope();
$compile($j("#bn"))(scope);
});
</script>
When I inspect $scope I see firstForm but I don't see secondForm in the object. I am at a loss as to why this is happening.
Here's the sandbox code:
index.html
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script>
var firstController = function ($scope){ };
</script>
</head>
<body>
<div ng-controller="firstController">
<form name="firstForm"></form>
<div ng-include="'second_form.html'"></div>
</div>
</body>
</html>
second_form.html
<form name="secondForm"></form>
Thanks to #charlietfl for this suggestion:
Might consider a simple directive to switch with ng-include that just has templatetUrl then won't have that child scope
index.html
<html ng-app="myModule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script>
var myModule = angular.module('myModule', []);
myModule.directive('secondForm', function () {
return{
templateUrl: 'secondform.html'
}
});
var firstController = function ($scope){
console.log($scope);
};
</script>
</head>
<body>
<div ng-controller="firstController">
<form name="firstForm">
</form>
<div second-form></div>
</div>
</body>
This works!
ng-include will create another $scope. If you want firstController() to handle both forms the do the following:
<div>
<form ng-controller="firstController" name="firstForm"></form>
<div ng-include="'second_form.html'"></div>
</div>
Then in second_form.html do:
<form ng-controller="firstController" name="secondForm"></form>
use other controllers in for ng-include directives.
In secondForm.html specify controller name as
<div ng-controller="secondCtrl">
</div>
So wen you use ng-inculde inside main controller all controllers of the subtemplates inside ng-include will inherit from the main controller,i.e it will have parent-child relationsship..
More more info go to this link
ng-include and ngRoute: how to make them work together? (i.e. route to a view wihin a ng-include)
In my html page I get the below error
Error: [ng:areq] Argument 'quickReportController' is not a function, got undefined
I searched and found a lot of solutions but not none of them was helping
The html file
<html>
<head>
...
<script src="~/Scripts/jquery-2.1.3.js"></script>
...
<script src="~/Scripts/angular.js"></script>
<script>
</script>
</head>
<body style="font-family: tahoma;" ng-app>
<div class="container bootcards-container" ng-module="myModule">
<div class="row" ng-controller="quickReportController">
<h3>{{name}}</h3>
</div>
</div>
<script type="text/javascript">
(function () {
var module = angular.module('myModule', []);
module.controller("quickReportController", ['$scope', function ($scope) {
$scope.name = "dd";
}]);
}());
</script>
</body>
</html>
you have missed to define ng-app, it should be ng-app='myModule',
only using
<body style="font-family: tahoma;" ng-app>
will try to find global controller named quickReportController, ehich is not global.
Replace with this:
<body style="font-family: tahoma;" ng-app='myModule'>
Also You are trying to define ng-module and nd ng-app, so read this https://stackoverflow.com/a/22865917/3556874
Have you tried to use ng-app="myModule" and remove ng-module from your html?