How to define controller in angularjs with IIFE - javascript

I have following code in my app.js in root directory /app.js
angular.module("ngClassifieds",[])
.controller("classifiedsCtrl", function($scope) {
$scope.name = "shekhar";
});
Currently this is working fine, then i shift my controller inside new directory components/classifiedCtrl.js like this
below is my app.js file
angular.module("ngClassifieds",[]);
below is my controller inside components/classifiedCtrl.js
(function () {
"use strict";
angular.module("ngClassifieds")
.controller("classifiedsCtrl", function($scope) {
$scope.name = "shekhar";
});
}) ();
Now it is gives me the error Error: [ng:areq] Argument 'classifiedsCtrl' is not a function, got undefined
I am using angular version 1.5.7
below is my index.html file
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
</head>
<body ng-app = "ngClassifieds" ng-controller="classifiedsCtrl">
<h1>{{name}}</h1>
<script src="node_modules/angular/angular.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>

You need to include your controller file below app.js
<script src="scripts/app.js"></script>
<script src="scripts/components/classifiedCtrl.js"></script>

Related

Getting an error that secondController is not registered

Hi Im trying to write an angular app from scratch. (New to it) Keep getting an error that secondController is not registered. Why?
These are my three files and for some reason it keeps saying "The controller with the name 'secondController' is not registered."
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./angular.js"></script>
<script src="./secondModule.js"></script>
<script src="./app.js"></script>
</head>
<body>
<div ng-controller="appController">
<p>App text : {{myAppText}}</p>
<p>secondControllerModule: {{ secondControllerText }}</p>
</div>
<div ng-controller="secondController">
Second Module : {{secondControllerText}}
</div>
</body>
</html>
app.js
angular.module("myApp", [])
.controller("appController",["$scope", function($scope){
$scope.myAppText = "Hello, I am appController text"
}])
secondModule.js
angular.module("myApp", [])
.controller("secondController",["$scope", function($scope){
$scope.secondControllerText = "Hello, I am seasdfsdfasdfacond Controller Text"
}])
I think as per your code you should take three files
1. Declare angular module in module.js file
var app = angular.module("myApp", []);
Add the first controller appController.js
app.controller("appController",["$scope", function($scope){
$scope.myAppText = "Hello, I am appController text";
}]);
Add second controller file secondController.js
app.controller("secondController",["$scope", function($scope){
$scope.secondControllerText = "Hello, I am seasdfsdfasdfacond Controller Text";
}]);
now put them in this heirarchy
- Add ref of Angular JS
then
1 module.js
2 appController.js
3 secondController.js
First of all, I would like to clarify that this is incorrect:
<div ng-controller="appController">
<p>App text : {{myAppText}}</p>
<p>secondControllerModule: {{ secondControllerText }}</p>// Defined in the wrong ng-controller,
so move it to the correct one.
</div>
The reason you are getting that error is that you're defining the app module twice in your js files. It's rather simple, all you need to do is take off the second parameter in your secondModule.js
angular.module("myApp")// Needs to be like this
.controller("secondController",["$scope", function($scope){
$scope.secondControllerText = "Hello, I am seasdfsdfasdfacond Controller Text"
}])
Then in your app.js file
angular.module("myApp", [])
.controller("appController",["$scope", function($scope){
$scope.myAppText = "Hello, I am appController text"
}])
Then in your HTML file, you need to fix the order of the script
<script src="./angular.js"></script>
<script src="./app.js"></script> // App module must be first because the module is defined here
<script src="./secondModule.js"></script>

Controller does not load in component - AngularJS

I have this directory structure
--- js/app.js
------- components
----------- header
-------------- headerComponent.html
-------------- headerComponent.js
-------------- headerController.js
in index.html, i have this
<!DOCTYPE html>
<html en="us" ng-app="app">
<head>
<title>Jogo da Memória - DB1</title>
<!-- bootsrap css-->
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css">
<script src="lib/angular/angular.min.js"></script>
<script src="js/app.js"></script>
<!-- components -->
<script src="js/components/header/headerComponent.js"></script>
</head>
<body>
<div class="container" ng-controller="HomeCtrl as $ctrl">
<h1>{{$ctrl.message}} </h1>
<header></header>
</div>
</body>
</html>
js/app.js
(function() {
var app = angular.module('app', []);
app.controller('HomeCtrl', function() {});
})();
component/header/headerComponent.js
(function() {
'use strict';
var app = angular.module('app');
app.component('header', {
templateUrl: '/js/components/header/headerComponent.html',
controller: 'headerController'
});
})();
component/header/headerController.js
var app = angular.module('app', []);
app.controller('headerController', ['$scope', function($scope) {
$scope.titulo = "teste";
}])
component/header/headercomponent.html
<h1>{{titulo}}</h1>
The problem is that the variable "titulo" is not rendered.
I would not like to use in the component file the controller: function () {} structure. And i have this error: Uncaught Error: [$injector:modulerr] I would call the external controller. How can I do this?
You're defining your module twice, the second time in component/header/headerController.js.
var app = angular.module('app', []);
This should change to:
var app = angular.module('app');
It also doesn't look like component/header/headerController.js is included in your index.html via script tag.

Angular Django Hello World

I cannot use Angular inside Django. Here is my code:
angularapp.js
var APP = angular.module('APP', []);
APP.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]')};
APP.ApplicationCtrl = function ($scope) {
$scope.name = 'World';
};
angular.html
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="angularapp.js" type="text/javascript"></script>
<body>
<div ng-app="APP" ng-controller="APP.ApplicationCtrl">
<h1>Hello [[ name ]]!</h1>
</div>
</body>
</html>
Both files are in the same folder. When the project starts, the terminal shows:
[02/Jun/2016 17:30:35] "GET /django-sb-admin/angularapp.js HTTP/1.1" 200 297"
In the browser I see only:
Hello [[ name ]]!
What is wrong?
The code has a typo as you forgot to close the function brace ).
APP.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]')
};
Correct code:
APP.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
Plunker
Try to see at verbatim for change brackets in django, not in angular

angular doesn't render $scope

I try to display some variable of my controller, but the output is just {{UserCtrl.user}} instead of the content of UserCtrl.user.
I got the following file structure:
index.html
scripts/app.js
This is the code of index.html:
<!doctype html>
<html lang="en" ng-app="birdsnest">
<head>
<meta charset="utf-8">
<title>Birdsnest</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css">
</head>
<body>
<div ng-controller="UserController as UserCtrl">
{{UserCtrl.user}}
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
scripts/app.js:
(function() {
var app = angular.module('birdsnest', []);
app.controller('UserController', ['scope', function($scope) {
$scope.user = 'Michael';
}]);
})();
Change this line:
app.controller('UserController', ['scope', function($scope) {
To:
app.controller('UserController', ['$scope', function($scope) {
Edit:
If you're using controllerAs then I think you should rewrite your code:
app.controller('UserController', function() {
this.user = 'Michael';
});
When you're using the ControllerAs syntax in your HTML, the values that end up getting bound to the controller instance is actually on your this object.
What this means is that your code that attaches user to the scope object is incorrect; instead you should do the following:
app.controller("UserController", function() {
this.user = "Michael";
});

Argument 'AdamState' is not a function, got undefined

Searched far and wide, most of the answers were "you forgot to include your controller".
"Error: [ng:areq] Argument 'AdamState' is not a function, got undefined"
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Adam Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="Scripts/AdamState.js"></script>
</head>
<body ng-app="">
<div ng-controller="AdamState">
</div>
</body>
</html>
JS:
function AdamState($scope, $http) {
$scope.test = 1;
}
Also, when calling that function from the console it will be called.
Angular 1.3+ global controller functions are turned off.
So you need to bind your controller to module,
Controller
var app = angular.module('app',[])
app.controller('AdamState',[`$scope`, `$http`, AdamState])
function AdamState($scope, $http) {
$scope.test = 1;
}
Or you need to declare controller as global controller then do allow global controller function manually form app.config() that is in angular config phase, the below code will make your code working.
CODE
app.config(['$controllerProvider', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
Thanks.
You miss lots of code there, this should eventually help you get started:
var myApp = angular.module("myApp", []);
myApp.controller("AdamStateCtrl", function($scope) {
$scope.test = 1;
});
<!DOCTYPE html>
<html>
<head>
<title>Adam Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="Scripts/AdamState.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="AdamStateCtrl">
{{test}}
</div>
</body>
</html>

Categories

Resources