Typescript load module fail via AMD - javascript

I made AngularJs app by typescript. and use requireJs load 'js(compiled ts) file'
I made simple controller A
myCtrl.ts
module myApp {
'use strict';
interface myMessage extends ng.IScope {
message: string;
}
export class myCtrl {
constructor($scope: myMessage) {
$scope.message = "hello world";
}
}
}
and I load myApp file in main.ts
myApp.ts
import myController = require('./myCtrl');
module myApp{
'use strict';
angular.module('myApp',[]).controller('myCtrl',myCtrl);
}
angular.bootstrap(document,['myAppDo']);
load was success but $scope.message not changed.
'Cannot read property 'myCtrl' of undefined'
when I change myApp.ts it work's fine
angular.module('myApp', []).controller('myCtrl', ($scope, $http) => {
$scope.message = "hello";
});
angular.bootstrap(document,['myApp']);
how can I Solve?

I solved it. first, add 'export' the controller module
module myApp
to
export module myApp
then specify the path
import myCtrl = require('./myCtrl');
angular.module('myApp',[]).controller('myCtrl',myCtrl);
to
import myCtrl = require('./myCtrl');
angular.module('myApp',[]).controller('myCtrl',myCtrl.myApp.myCtrl);
it seems something is wrong, but it work

Steps
Add AMD-dependency
Import module
Result code
///<amd-dependency path="here path to your module"/>
import myController = require('myCtrl');

Related

Unknown provider error for filter in AngularJS ES6 syntax

I'm having trouble using a filter in my app after bundling and deploying to a remote server. It works fine locally, but if I run my app remotely i get the error:
"Error: [$injector:unpr] Unknown provider: eProvider <- e <- filterByQueryFilter"
This is my code:
app.js:
import myFilters from "./shared/filters";
import myModule from "./myModule";
export default angular.module('app', [
lots-of-modules...,
myFilters,])
.config(defaultRouting)
.run(["$http", "$rootScope", "$state", function($http, $rootScope, $state){ //code.. }]);
index.js(in shared/filters folder):
import filterByQuery from "./filterbyquery.filter.js";
import highlightQuery from "./highlightquery.js";
import dateFormatter from "../formatter/dateFormatter";
export default angular.module("my.filters", [])
.filter("filterByQuery", filterByQuery)
.filter("highlightQuery", highlightQuery)
.filter("dateFormatter", dateFormatter)
.name;
another-module.js (where i try to use the filter):
export default class anotherModule{
constructor() {
this.restrict = 'E';
this.replace = false;
this.template = require('./template.html');
this.scope = {};
this.controller = AnotherModule;
this.controllerAs = 'ctrl';
}
}
class AnotherModule{
constructor($scope, $filter) {
this.$filter = $filter;
}
}
AnotherModule.$inject = [..., "$filter"];
Using the filter in the controller:
res = this.$filter("filterByQuery")(res, this.filterString);
I'm not really sure what I'm doing wrong here considering it works fine locally. Also, the highlightQuery filter works by using the pipe syntax in the template.html
Anyone have any idea what is happening here?
Minified AngularJS applications should be properly annotated in order to perform dependency injection.
filterByQuery filter factory function wasn't annotated. Since it's contained in separate file, it makes sense to use $inject annotation in order to keep it in same module as the function itself. It is the preferable way of annotation in ES6 with ES modules and proposed by John Papa style guide

Angular + Requirejs - how to return multiple modules?

How can I return multiple angular modules in requirejs environment?
this is my app.js,
define([
'angular',
'angular-route',
'jquery'
], function (ng,ngRoute,$) {
'use strict';
console.log($('h1').length);
return ng.module('myApp', ['ngRoute']);
});
And I need a few more modules to return,
ng.module('myAppModule1', ['ngRoute']);
ng.module('myAppModule2', ['ngRoute']);
ng.module('myAppModule3', ['ngRoute']);
a controller example, for instance I want to get 'myAppModule3' in app.js,
define(['app'], function (app) {
var myAppModule = angular.module('myAppModule3');
myAppModule.controller('welcomeController', ['$scope', function($scope) {
//your minsafe controller
$scope.message = "Message from WelcomeController";
}]);
});
You could change app.js to return an object whose fields are the modules:
define([
'angular',
'angular-route',
'jquery'
], function (ng,ngRoute,$) {
'use strict';
console.log($('h1').length);
return {
myApp: ng.module('myApp', ['ngRoute']),
myAppModule1: ng.module('myAppModule1', ['ngRoute']),
myAppModule2: ng.module('myAppModule2', ['ngRoute']),
myAppModule3: ng.module('myAppModule3', ['ngRoute'])
};
});
And change your controller like this:
define(['app'], function (app) {
app.myAppModule3.controller('welcomeController', ['$scope', function($scope) {
//your minsafe controller
$scope.message = "Message from WelcomeController";
}]);
});
The generic (non-Angular specific) way is to use an object:
return {module1: /*..*/, module2: /*...*/ };
Then you just access to the values:
define(['app'], function (app) {
var module1 = app.module1;
});
However in Angular you just registered 'myAppModule1' in the Angular global. There is no need to do the object return, you can retrieve the registered module using the angular object:
define(['angular'], function (angular) {
var module1 = angular.module('myAppModule1');
// without extra parameter it tells angular to retrive an existing
// module
});
Update: I just realize that you did it in your code. It didn't worked? Maybe be you have a dependency issue, make sure that app.js is loaded first.

AngularJS why can't I use share a provider with another module?

I have a App module that has many component modules that are injected into the App module. The App module has a provider that I would like to use inside of the component modules, but I am receiving an injector error: Error: $injector:modulerr Module Error
Here is what I am trying
var App = angular.module('App', [
'ngRoute',
'Blog',
'Media',
'Pages',
]);
App.provider('Core', function() {
this.baseDirectory = '/test';
this.$get = function() {
var baseDirectory = this.baseDirectory;
}
});
App.config(['$routeProvider', 'CoreProvider', function($routeProvider, CoreProvider) {
$routeProvider
.when(CoreProvider.baseDirectory + '/admin', {
templateUrl: baseUrl + '/backend/scripts/angular/index.html'
})
.otherwise({
template: ""
});
}]);
All of the above code works, its when I try to use the CoreProvider inside of another module, such as Blog (has been injected into App module)
var Blog = angular.module('Blog', ['ngRoute']);
Blog.config(['$routeProvider', 'CoreProvider', function($routeProvider, CoreProvider) {
$routeProvider
.when(CoreProvider.baseDirectory + '/admin/blog', {
templateUrl: CoreProvider.baseDirectory + '/blog/blog.html',
controller: 'BlogController'
});
}]);
I receive the error Error: $injector:modulerr Module Error and the Angular docs state that this error occurs when a module fails to load due to an exception.
Why can't I use CoreProvider inside of my Blog module?
If sharing a base directory is all you need, why not use a Constant?
var shared = angular.module('Shared',[]);
shared.constant('baseDirectory', '/test');
// Use the constant on your modules:
var module1 = angular.module('Module1', ['Shared']);
module1 .config(['baseDirectory', function(baseDirectory) {
console.log(baseDirectory + '/admin2');
}]);
var module2 = angular.module('Module2', ['Shared']);
module2.config(['baseDirectory', function(baseDirectory) {
console.log(baseDirectory + '/admina');
}]);
Here is a working plunkr: http://plnkr.co/edit/wktdqCMZuvDbk7sz1mMi?p=preview
I guess that this is a better practice, for more info please refer to: https://docs.angularjs.org/guide/providers

ngLocale error with TypeScript routing

I am getting an error when trying to attach my config class to my angular app. I get a message saying: $injector:nomod] Module 'ngLocale' is not available! I have a reference to angular.js and angular-route.js
Here is my Config Code.
module TSApplication {
export class Config {
static $inject = ["$routeProvider"];
constructor($routeProvider: ng.route.IRouteProvider) {
this.registerRoutes($routeProvider);
}
private registerRoutes(rProvider: ng.route.IRouteProvider) {
rProvider.when("/", { templateUrl: "/partials/example.html", controller: "ExampleCtrl" });
}
}
}
(function () {
var app = TSApplication.App.angularModule;
app.config(TSApplication.Config);
})();
And here is my App Module code:
module TSApplication {
"use strict";
export class App {
static angularModule = angular.module("App", ['ngRoute']);
}
}
(function () {
// Toaster Junk
})();
Am I missing something simple? If I don't include the config I do not receive an error.
It looks like you are passing TSApplication.Config to the angular config function which is treating it as a function. Therefore, in your "constructor" this isn't actually what you think it is because no instance of TSApplication.Config was created. You could remedy this by changing registerRoutes to a static method and then calling it in your constructor like this Config.registerRoutes($routeProvider);.

AngularJS - Uncaught Error: Service name expected from myApp

I'm trying to implement a Facebook provider (angular-facebook.js) as show in the below plnkr:
http://plnkr.co/edit/dDAmvdCibv46ULfgKCd3?p=preview
However, I've made a bit of a hash with my config files. The plnkr example doesn't use a route provider so I'm unsure how to structure my .config to both utilize the route provider and initialize my Facebook implementation:
Current but Not Working
'use strict';
var myApp = angular.module('myApp ', ['facebook'])
.config(
['FacebookProvider',
function(FacebookProvider){
var myAppId = '4605923966';
FacebookProvider.init(myAppId);
},
function($routeProvider)
{
$routeProvider.when('/admin/area',
{
templateUrl: 'app/admin/area/index.html'
});
}]
);
The method config only takes one function as a parameter, so you need to inject both FacebookProvider and $routeProvider into it like this:
'use strict';
var myApp = angular.module('myApp ', ['facebook'])
.config(['FacebookProvider', '$routeProvider',
function(FacebookProvider, $routeProvider) {
var myAppId = '4605923966';
FacebookProvider.init(myAppId);
$routeProvider.when('/admin/area', {
templateUrl: 'app/admin/area/index.html'
});
}]);

Categories