I trying to add angularjs filter with requirejs in my view, but I receive an error:
Error: $injector:unpr Unknown Provider
http://docs.angularjs.org/error/$injector/unpr?p0=localizationFilterProvider%20%3C-%20localizationFilter
Whats wrong?
My Files:
index.html
<!DOCTYPE html>
<html>
<head>
<script data-main="/static/js/application/main" src="/static/js/libs/require.min.js"></script>
</head>
<body>
<div class="page" ng-view></div>
</body>
</html>
app.js
'use strict';
define(
[
'angularAMD',
'angular-route',
'angular-animate'
],
function (angularAMD) {
var app = angular.module('FilmOrder', ['ngRoute', 'ngAnimate']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/',
angularAMD.route({
templateUrl: 'static/js/application/views/success.html',
controllerUrl: 'application/controllers/Success',
controller: 'Success'
})
)
.otherwise({redirectTo: '/'});
}]);
angularAMD.bootstrap(app);
return app;
});
main.js
require.config({
baseUrl: "static/js",
paths: {
'angular': 'libs/angular.min',
'angular-route': 'libs/angular-route.min',
'angular-animate': 'libs/angular-animate.min',
'angularAMD': 'libs/angularAMD.min'
},
shim: {
'angularAMD': ['angular'],
'angular-route': ['angular'],
'angular-animate': ['angular']
},
deps: ['application/app']
});
views/success.html
<div class="success">
<div class="success_head">
{{"Пожалуйста, убедитесь в правильности указанных данных." | localization:'index'}}
</div>
</div>
filters/localization.js
'use strict'
define(['application/app'], function (app) {
app.filter('localization', function () {
return 'test';
});
});
controllers/Success.js
define(
[
'application/app',
'application/filters/localization',
'application/services/Application'
],
function (app) {
'use strict';
app.register.controller('Success', function ($scope) {
var Success = {};
$scope.Success = Success;
});
});
Your filter is called after bootstrapping so you should be using app.register instead:
filters/localization.js
define(['application/app'], function (app) {
'use strict'
app.register.filter('localization', function () {
return 'test';
});
});
If this does not help, setup a plunker and I will try to help further.
Related
I want to load controllers on the fly when needed rather than loading them in one go. So, for the I've implemented dynamic approach which works fine without any error. It also works well with Ui-Router.
But the problem is in Index.html page. I want to put global (super parent) controller name "appCtrl". As this appCtrl should be initialized when I run my app. For that I need to write like ng-controller="appCtrl" or ng-controller="appCtrl as vm" at body tag.
But when I do it, it gives error that appCtrl is a function, got undefined. I tried sever ways but still unable to identify exact error. I have working on this issue since two to three days but still not able to identify it.
I have made this plunker.
look at body tag of index.html.
main.js
require.config({
paths: {
"angular": "//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0-rc.1/angular",
"ui-router": "//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router"
},
shim: {
"angular": {
exports: 'angular'
},
"ui-router": {
deps: ['angular']
}
}
});
define(
['angular',
'app',
'controllers/appCtrl'],
function (angluar, app) {
angular.bootstrap(document, ['MyApp'])
});
app.js
define([
'angular',
'ui-router'
], function (angular) {
var app = angular.module('MyApp', ['ui.router']);
function lazy () {
var self = this;
this.resolve = function (controller) {
return {
ctrl: ['$q', function ($q) {
var defer = $q.defer();
require(['controllers/' + controller], function (ctrl) {
app.register.controller(controller, ctrl);
defer.resolve();
});
return defer.promise;
}]
};
};
this.$get = function (){
return self;
};
}
function config ($stateProvider, $urlRouterProvider,
$controllerProvider, $compileProvider,
$filterProvider, $provide, lazyProvider) {
$stateProvider
.state("home", {
url: "/",
controller: 'homeCtrl',
controllerAs: 'vm',
templateUrl: 'views/homeView.html',
resolve: lazyProvider.resolve('homeCtrl')
});
app.register = {
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service,
constant: $provide.constant
};
}
app.provider('lazy', lazy);
app.config(config);
return app;
});
Index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.js" data-main="main.js"></script>
</head>
<body ng-controller="appCtrl as vm"> // I want this to work correctly but it is not getting loaded dynamically. I don't know why. Help me to resolve it.
<a ui-sref="home">go home</a>
<ui-view></ui-view>
{{vm.appVar}}
</body>
</html>
You are actually missing the controller statement in your controller code.
Use the following code
define(['app'], function (app){ //Updated Line
console.log('app controller loaded');
app.controller('appCtrl',ctrl); //New Line added
ctrl.$inject = ['$http'];
function ctrl ($http) {
this.appVar = 'hi from appCtrl';
};
return ctrl;
});
See the plunker
I'm trying to use angular with requirejs. Here is my index.html file
<!DOCTYPE html>
<html>
<head>
<script data-main="/js/app.js" src="/bower_components/requirejs/require.js"></script>
</head>
<body >
<div ng-view ng-controller="accountController"></div>
</body>
</html>
app.js file
require.config (
{
appDir : '',
baseUrl : '/js/',
paths :
{
// Configure alias to full paths
'angular': '/bower_components/angular/angular.min',
'ngRoute': '/bower_components/angular-route/angular-route.min',
'main': 'main'
},
shim :
{
'main':{
deps: ["angular", 'ngRoute']
},
'ngRoute':{
deps: ["angular"]
}
}
});
require( [ "main" ], function( app )
{
// Application has bootstrapped and started...
});
main.js file
define([
'common/RouteManager'
], function(RouteManager){
var appName = 'elara',
depends = ['ngRoute'],
app = angular.module(appName, depends).config(RouteManager)
angular.bootstrap(document.getElementsByTagName('body')[0], [ ]);
return app;
});
RouterManager.js
(function ( define ) {
define([
'controllers/account'
], function(){
var RouteManager = $routeProvider.when("/", angularAMD.route({
templateUrl: '/html/tmpl/test.html', controller: 'registerController',
controllerUrl: 'controllers/account.js'
})).otherwise({redirectTo: "/"});
return ["$routeProvider", RouteManager ];
})
});
And finally my controller:
define(['common/settings'], function(settings){
var accountController = function($scope, $http){
$scope.username = "";
$scope.password = "";
$scope.register = function(){
$http.post(config.apiAddress + "account/login/", {username: $scope.username, password: $scope.password}).then(
function(data){
console.log(data);
}, function(response){
console.log(response);
})
}
};
return accountController;
});
I'm getting
Argument 'accountController' is not a function, got undefined
exception. When i check network tab, my account.js file is not loaded. So angular don't know anything about accountController
Brackets
You are returning a function in your controller so it should be
return accountController();
Not
return accountController;
I am trying to load a controller so that my view will display. Actually I write my controller .Route or config also .But I am not able to load my controller and route file how to load controller using require.js so that my login.html page is display?
Here is my Plunker:
http://plnkr.co/edit/DlI7CikKCL1cW5XGepGF?p=preview
main.js
requirejs.config({
paths: {
ionic:'http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min',
},
shim: {
ionic : {exports : 'ionic'}
}
});
route.js
/*global define, require */
define(['app'], function (app) {
'use strict';
app.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "login.html",
controller: 'LoginCtrl'
})
$urlRouterProvider.otherwise("/login");
}]);
});
Any guess how to load view?
You just need to do:
main.js
requirejs.config({
paths: {
ionic:'http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min',
},
shim: {
ionic : {exports : 'ionic'}
},callback: function () {
'use strict';
require([
'angular',
'route',
'app'
], function (angular) {
// init app
angular.bootstrap(document, ['app']);
});
}
});
app.js
define(['ionic',
'./LoginCtrl',],
function (angular) {
'use strict';
var app = angular.module('app', [
'ionic','app.controllers']);
return app;
});
LoginCtrl.js
/*global define, console */
define(['angular'], function (ng) {
'use strict';
return ng.module('app.controllers', ['$scope','$state'
,function ctrl($scope, $state) {
$scope.login = function () {
alert("Login is clicked")
};
}]);
});
You can follow the tips here - https://www.startersquad.com/blog/angularjs-requirejs/
All works fine if I don't inject into controller "getChildrenNumber", after then I get the error from $injector.
I've read even this https://docs.angularjs.org/error/$injector/unpr, but it seems not be one of that cases
HTML (index.html):
<html class="no-js" ng-app="myApp" ng-strict-di>
.
.
.
<script src="jsLib/angular_v1.4.js" type="text/javascript"></script>
<script src="jsLib/angular-ui-router.min.js" type="text/javascript"></script>
<script src="jsLib/angular-ui-router-statehelper.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="routes.js" type="text/javascript"></script>
routes.js:
var config = ["$urlRouterProvider", "$stateProvider", "$locationProvider", function($urlRouterProvider, $stateProvider, $locationProvider){
$urlRouterProvider.otherwise("/multi");
$stateProvider
.state("multi",{
url: "/multi",
views: {
"": {
templateUrl: "multipleView.htm",
controller: "MainCTRL",
controllerAs: "ctrl"
},
"viewA#multi": {
templateUrl: "testingBlock.htm",
controller: "MainCTRL",
controllerAs: "ctrl"
},
"viewB#multi": {
templateUrl: "app/templates/login.htm",
controller: ["$scope", "getChildrenNumber", function($scope, getChildrenNumber){
$scope.nameApp = "nameAppChanged";
$scope.children = getChildrenNumber + " Miao";
}]
}
},
resolve: {
getChildrenNumber: ["$http", function($http){
return "Some response from an API";
}]
}
});
}];
angular
.module("myApp")
.config(config);
app.js:
angular
.module("myApp", ["ui.router"])
.controller("MainCTRL", ["$scope", "getChildrenNumber", function($scope, getChildrenNumber){
this.nameApp = "myApp";
$scope.children = getChildrenNumber;
}]);
You are implementing it the wrong way..
Firstly, in routes.js
$stateProvider
.state("multi",{
url: "/multi",
views: {
// Views Code here //
},
resolve: {
getChildrenNumber: getChildrenNumber
}
});
}];
then you have to create your factory:
angular.module('myApp')
.factory('children', ['$http', function ($http) {
return {
getChildrenNumber: getChildrenNumber
};
function getChildrenNumber() {
return "Some response from an API";
}
}]);
After this you can inject it in your controller as children
I'm using AngularJS with RequireJS and ui-router, with the Play Framework 2.3 (and the WebJars stuff).
main.js
(function () {
'use strict';
requirejs.config({
// Packages = top-level folders; loads a contained file named 'main.js"
packages: ['dashboard'],
paths: {
'angular': ['../lib/angularjs/angular'],
'angular-ui-router': ['../lib/angular-ui-router']
},
shim: {
'angular': {
exports: 'angular'
},
'angular-ui-router': {
deps: ['angular'],
exports: 'angular'
}
}
});
require(['angular', 'angular-ui-router', './app'],
function (angular) {
var mod = angular.module('app', ['ui.router']);
mod.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $locationProvider, $urlRouterProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/app/profile');
$stateProvider.state('profile', {
abstract: true,
url: '/app/profile',
templateUrl: '/views/app/content',
controller: 'AppController'
});
}]);
angular.bootstrap(document, ['app']);
});
})();
app.js
define(['angular', 'dashboard'], function(angular) {
'use strict';
return angular.module('app', ['app.dashboard']);
});
dashboard/main.js
define(['angular', './routes'], function(angular) {
'use strict';
return angular.module('app.dashboard', ['dashboard.routes']);
});
dashboard/routes.js
define(['angular'], function(angular) {
'use strict';
var mod = angular.module('dashboard.routes', []);
console.log("Enter the routes.js"); // DOES WORK
mod.config(['$stateProvider', function($stateProvider) {
console.log("Enter the config file in routes.js"); // DOESN'T WORK, NEVER REACH THAT POINT
$stateProvider.state('profile.dashboard', {
url: '',
templateUrl: '/views/app/dashboard'
});
}]);
return mod;
});
The states defined in my submodules are not loaded, but if I'm putting them in the main main.js, it does work :
mod.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $locationProvider, $urlRouterProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/app/profile');
$stateProvider.state('profile', {
abstract: true,
url: '/app/profile',
templateUrl: '/views/app/content',
controller: 'AppController'
})
.state('profile.dashboard', {
url: '',
templateUrl: '/views/app/dashboard'
});
;
}]);
So this is really a problem about loading with RequireJS, but I can't figure out what's wrong..
Any ideas ? Thanks