How to use Angular with Require in javascript classes - javascript

I have been playing around with angular and would like to add it to application using require. I have a class called Test that is wrapped around a require for Angular. The problem is that if I do not initialize the angular.module directly under the require statement for angular, I get an error saying Uncaught Error: [$injector:modulerr]
<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>
<script>
require.config({
paths: {
"angular": "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min"
}
});
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
<script>
require(['angular'], function () {
var Test = class Test {
constructor() {
this.setAngular();
};
setAngular() {
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
}
}
});
var test = new Test();
</script>
</body>
</html>
However, if I move the require statement down to inside the setAngular function like so:
setAngular() {
require(['angular'], function () {
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
});
}
Then everything works fine. Am I missing something here?

Related

AngularJS + Typescript controller cant be found

I am trying to add typescript to AngularJS and I'm getting the following error
Error: [$controller:ctrlreg] The controller with the name 'MyController' is not` registered
Has anyone clue on what I am doing wrong?
I have created the following class
/// <reference path='references/_all.ts' />
var app = angular.module('shop', []);
class MyController {
constructor($scope: any) {
$scope.message = { title: "Hello World!!" };
};
}
app.controller('MyController', MyController);
and html:
<html>
<head>
...
</head>
<body ng-app="shop">
<div ng-controller="MyController">
{{message.title}}
</div>
</body>
</html>
I am using grunt to compile it:
/// <reference path='references/_all.ts' />
var app = angular.module('shop', []);
var MyController = (function () {
function MyController($scope) {
$scope.message = { title: "Hello World!!" };
};
return MyController;
})();
app.controller('MyController', MyController);
Do you have link file with app?
<script src="./app.js"></script>
Here is my solution:
var app = angular.module('shop', []);
var MyController = (function () {
function MyController($scope) {
$scope.message = { title: "Hello World!!" };
}
return MyController;
})();
app.controller('MyController', MyController);
<head>
<meta charset="utf-8" />
<title>AngularJS + Typescript controller cant be found</title>
<script src="https://code.angularjs.org/1.5.4/angular.js"></script>
<script src="./app.js"></script>
</head>
<body ng-app="shop">
<div ng-controller="MyController">
{{message.title}}
</div>
</body>
</html>

Error: $controller:ctrlreg The controller with the name '{0}' is not registered

app.js
(function(){
'use strict';
angular
.module('app', ['ngRoute', 'ngCookies'])
.config(config)
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider){
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'home/home.html',
controllerAs: 'vm'
})
}
})();
home.controller.js
(function () {
'use strict';
angular
.module('app')
.controller('HomeController', HomeController);
HomeController.$inject = ['UserService', '$rootScope'];
function HomeController(UserService, $rootScope) {
$rootScope.bodylayout ='main_page_que';
var vm = this;
}
})();
home.js
var app = angular.module('app', []);
app.controller('RedCtrl', function($scope) {
$scope.OpenRed = function() {
$scope.userRed = !$scope.userRed;
$scope.userBlue = false;
}
$scope.HideRed = function() {
$scope.userRed = false;
}
$scope.OpenBlue = function() {
$scope.userBlue = !$scope.userBlue;
$scope.userRed = false;
};
$scope.HideBlue = function() {
$scope.userBlue = false;
};
});
home.html
<div ng-controller="RedCtrl">
Show Red
<div hide-red="HideRed()" class="loginBox" ng-show="userRed"></div>
Show Blue
<div hide-blue="HideBlue()" class="loginBoxBlue" ng-show="userBlue"></div>
</div>
Index.html
<html lang="pl" ng-app="app">
<body class="{{bodylayout}}">
<div class="content">
<div ng-view style="margin:auto"></div>
</div>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.0/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.6.0/angular-cookies.min.js"></script>
<script src="home.js"></script>
<script src="app.js"></script>
<script src="authentication.service.js"></script>
<script src="flash.service.js"></script>
<script src="user.service.local-storage.js"></script>
<script src="home/home.controller.js"></script>
</body>
</html>
Hey, this is part from application when I use ngRoute and dynamically add home.html, but I think I have wrong app.js or home.controller.js beacuse when I add external file home.js (when is ng-controller=""RedCtrl. I get error [$controller:ctrlreg] RedCtrl is not register. Have you ideas why? I am new in Angular and I think the main reason is lack of my knowledge.
You are overwriting app module in home.js thus getting the error
Use
var app = angular.module('app'); //Get previously defined module
instead of
var app = angular.module('app', []); //It declares new module
You also need to change the sequence of JavaScript files
<script src="app.js"></script>
<script src="home.js"></script>

ng-include after application load

I currently have a server using handlebars to create an initial HTML page. In this page, I wish to have a ng-include to update the page on the client.
However, whenever my application runs, it loads the page, so the data-ng-include="template.url" loads template.url as it normally would. Is there anyway for ng-include to load this data after my application loads?
Here is a plunker. Look at the code inside index.html!
you can use
ng-if directive
just check for it initial loading , it will make your life easy
<ANY ng-if="expression">
//your code goes here
</ANY>
such as
<ANY ng-if="false">
// code will not execute
</ANY>
i hope this will help you
on your code
<body>
<div data-ng-controller="ctrl">
<div data-ng-include="template.url" ng-if="false">
Here is some stuff that I wish to remain until I press the button below.
</div>
<button type="button" data-ng-click="second()">Press me!</button>
</div>
based on your answer you should use your condition at your .js file here is your modified code
angular.module('myApp', [])
.controller('ctrl', ['$scope', function ($scope) {
$scope.templates =
[ { name: 'first.html', url: 'first.html'},
{ name: 'second.html', url: 'second.html'} ];
if (false){
$scope.template = $scope.templates[0];
}
$scope.second = function () {
$scope.template = $scope.templates[1];
};
$scope.first = function () {
$scope.template = $scope.templates[0];
};
}]);
Alternatively, you can use $location for your case, but for no more edited for your code, i can provide this solution for you:
Remove your code inside index.html file, so your code become like this:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div data-ng-controller="ctrl">
<div data-ng-include="template.url"></div>
</div>
</body>
</html>
2.Replace your script.js become like this:
angular.module('myApp', [])
.controller('ctrl', ['$scope', function ($scope) {
$scope.templates =
[ { name: 'init.html', url: 'init.html'},
{ name: 'first.html', url: 'first.html'},
{ name: 'second.html', url: 'second.html'} ];
$scope.template = $scope.templates[0];
$scope.second = function () {
$scope.template = $scope.templates[2];
};
$scope.first = function () {
$scope.template = $scope.templates[1];
};
}]);
3.Create file init.html with code inside:
Here is some stuff that I wish to remain until I press the button below.
<button type="button" data-ng-click="second()">Press me!</button>
Run it.

Angular: Controller is undefined when adding a directive

I get the following error when adding a directive to my site:
Error: [ng:areq] Argument 'MainController' is not a function, got undefined
The error only occurs when I include the welcome-directive (welcome.js) in my site. If the import is removed the controller works.
Body of my index.html
<body ng-app="my-app">
<div ng-controller="MainController">
<welcome></welcome>
</div>
<!-- Angular -->
<script src="bower_components/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/mainController.js"></script>
<!-- Without this line the controller works -->
<script src="js/directives/welcome.js"></script>
</body>
app.js
(function() {
var app = angular.module('my-app', []);
})();
mainController.js
angular.module('my-app', [])
.controller('MainController', ['$scope', function($scope) {
console.log('Controller working');
}]);
welcome.js
angular.module('my-app', [])
.directive("welcome", function() {
return {
restrict: "E",
template: "<div>Test test.</div>"
};
});
You are redefining the module. Define module only once.
when used as angular.module('my-app', []) it defined the module this should be used only once. When you want retrieve it. then use angular.module('my-app')
Use
angular.module('my-app') //Notice remove []
.directive("welcome", function() {
});
passing a 2nd argument like this angular.module('my-app', []) creates a new module, use it only once.
To retrive a module use var module = angular.module('my-app') and use module.controller(... or module.directive(.... etc.,

AngularJS: Browser ignores my Controller Definition (Dependency Injection)

I am using angular-translate in my project but I am unable to define a controller that has a dependency injection of $translate. The code isn't executed in the browser. I checked JSHint already...
index.html
<html ng-app='ngApp'>
<body>
<div ng-controller="orderFormCtr">
<ul>
<li>{{'TITLE' | translate}}</li>
<li translate="TITLE"></li>
</ul>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
angular.module('ngApp', ['pascalprecht.translate']);
// this code works
angular.module('ngApp').config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello'
});
$translateProvider.translations('de', {
TITLE: 'Hallo'
});
}]);
// the browser ignores this code
angular.module('ngApp').controller('orderFormCtr', ['$scope', '$translate', function ($scope, $translate) {
alert("Controller Code executed");
}]);
var app = angular.module('ngApp', ['pascalprecht.translate']);
// this code works
app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello'
});
$translateProvider.translations('de', {
TITLE: 'Hallo'
});
$translateProvider.preferredLanguage('en');
//or translateProvider.determinePreferredLanguage()
}]);
// the browser ignores this code
app.controller('orderFormCtr', ['$scope', '$translate', function ($scope, $translate) {
alert("Controller Code executed");
}]);
http://jsbin.com/miqazola/1/

Categories