How to get access to $route in meanjs controller - angularjs

I am trying to get access to the current route since I added a title on it.
So the route looks something like
state('reports', {
title: 'Reports',
url: '/reports',
templateUrl: 'modules/feeditems/views/reports.client.view.html'
}).
I want to get access to the title. so I can put it on my page Header. So in the Header controller I thought I could just get it off my
angular.module('core').controller('HeaderController', ['$rootScope', '$route', '$scope', 'Authentication', 'Menus',
function($rootScope, $route, $scope, Authentication, Menus) {
$scope.authentication = Authentication;
$scope.isCollapsed = false;
$scope.menu = Menus.getMenu('topbar');
$scope.$route = $route;
console.log ('typeof($route) = ' + typeof($route));
console.log ('typeof($route.current) = ' + typeof($route.current));
and I get the following error
Error: [$injector:unpr] Unknown provider: $routeProvider <- $route
so I add ngRoute
ApplicationConfiguration.registerModule('core', ['ngRoute']);
then I get the following error
Uncaught Error: [$injector:modulerr] Failed to instantiate module r2h
due to: Error: [$injector:modulerr] Failed to instantiate module core
due to: Error: [$injector:modulerr] Failed to instantiate module
ngRoute due to: Error: [$injector:nomod] Module 'ngRoute' is not
available! You either misspelled the module name or forgot to load it.
If registering a module ensure that you specify the dependencies as
the second argument.
How am I supposed to include this properly? the meanjs way?

I think you are confused, MeanJS standard configuration uses Angular UI Router
For Angular UI Router
You need to angular-ui-router.js then include ui.router inside your app dependency
After that in configuration do register your state using $stateProvider
Syntax
app.config(function($stateProvider){
$stateProvider.state('reports', {
url: '/reports',
templateUrl: 'modules/feeditems/views/reports.client.view.html'
})
})
For adding title dynamically you could refer this SO Answer

Kindly refer to https://stackoverflow.com/a/28252931/4380266
. This has the solution to your problem.
Check the sequence you loaded your angular files.
The sequence must be :
angular.js
angular-route.js
finally your angular scripts

Related

about modular programming in angular

I'm learning Angular and have a problem which I can't haddle.
I use ui-router to impelement jumping from login page to welcome page(includes a directory to jump to the corresponding module). The code is:
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login',{
url: '/login',
templateUrl: 'tpls/login.html'
})
.state('welcome', {
url: '/welcome',
templateUrl: 'tpls/welcome.html',
});
});
now I'd like to add a controller to the welcome template in another file(controller.js), and I created a module for it:
var welcomeModule = angular.module("WelcomeModule",[]);
welcomeModule.controller('WelcomeCtrl', function($scope){});
I think the welcomeMoudule should be added into the myApp moudule:
var myApp = angular.module('myApp', ['ui.router','WelcomeModule']);
but there is an Error:
[$injector:modulerr] Failed to instantiate module optApp due to:
[$injector:modulerr] Failed to instantiate module WelcomeModule due to:
[$injector:nomod] Module 'WelcomeModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I don't understand why. I've seen a more complicated example using this method and everything's fine. Can someone explain this to me?

angular.js Uncaught Error: [$injector:modulerr] when injecting a factory

I'm attempting to inject a factory called recipesApp.recipeData into my MainController, as soon as I added it, the app broke and I have been receiving the following error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module recipesApp due to:
Error: [$injector:modulerr] Failed to instantiate module recipesApp.recipeData due to:
Error: [$injector:nomod] Module 'recipesApp.recipeData' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
My main app module is written as follows:
var app = angular.module('recipesApp', ['ngRoute', 'recipesApp.recipeData']);
My controller:
app.controller('MainController', ['$scope', '$http', '$location', '$rootScope', 'recipeData',
function($scope,$http,$location,$rootScope,recipeData) {...}]);
My recipe factory:
angular
.module('recipesApp.recipeData', [])
.factory('recipeData', function($http) {
return {
getAllRecipes: function(){
$http.get('/allrecipes');
}
};
});
I have tried changing the file structure, the file naming convention. I have tried simply linking it onto the controller itself in the same file, I've changed the order in which it is being injected, and I've triple checked the spelling. Any suggestions would be very helpful!
You're trying to add $http as a module dependency, $http is a service, not a module. Remove it from your recipesApp.recipeData module dependencies
angular
.module('recipesApp.recipeData', [])
.factory('recipeData', function($http) {
return {
getAllRecipes: function(){
$http.get('/allrecipes');
}
};
});
Also make sure all the .js files are present in your index.html

How to inject on Angular an ionic plugin that is not from ngCordova

in my ionic app I want to use cordova-plugin-video-editor plugin but I don't know how to inject it on my controller.
I added the plugin on the terminal like this:
ionic plugin add https://github.com/jbavari/cordova-plugin-video-editor.git
And it is injected with the controller like this (last one):
.controller('VideoCtrl', ['$scope', '$ionicPlatform', '$ionicModal', '$cordovaDialogs', '$cordovaCapture', '$cordovaFileTransfer', '$sce', 'VideoService', '$q', '$http', '$ionicScrollDelegate', '$timeout', '$location', 'VideoEditor', function ($scope, $ionicPlatform, $ionicModal, $cordovaDialogs, $cordovaCapture, $cordovaFileTransfer, $sce, VideoService, $q, $http, $ionicScrollDelegate, $timeout, $location, VideoEditor) {
I get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module VideoEditor due to:
Error: [$injector:nomod] Module 'VideoEditor' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I am confused, I am using more plugins but all are official and I didn't have problems as I only had to do:
angular.module('starter.controllers', ['ngCordova'])
And in the html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
Inside plugin folder there is a js file that has:
var exec = require('cordova/exec'),
pluginName = 'VideoEditor';
function VideoEditor() {
}
VideoEditor.prototype.transcodeVideo = function(success, error, options) {
exec(success, error, pluginName, 'transcodeVideo', [options]);
};
VideoEditor.prototype.createThumbnail = function(success, error, options) {
exec(success, error, pluginName, 'createThumbnail', [options]);
};
module.exports = new VideoEditor();
When I install the plugin should not this js content had gone somewhere in my www folder so then I can imported from html?
Remove the VideoEditor module in your controller configuration. because this VideoEditor have not any relation with angular.
Also you need refer the github document. They use it just like a jquery plugins. not a angular plugins. Does make sense? let me know, if not.
How do I implement it in Angular controller?
You can use it just like a javascript library.

AngularJS 1.3.0-beta.8 and greater breaks all my apps with $injector error

So I was on version beta.6 and was working just fine...decided to go to the new version and immediately got some errors. Started to work my way back and my apps work fine on beta.7 and then something happened between beta.7 and beta.8, which is not very clear but it is constantly throwing this error:
[$injector:modulerr] Failed to instantiate module ng due to:
Error: [$injector:unpr] Unknown provider: $filterProvider
Here is a sample of my angular app.
'use strict';
var Countries = angular.module('Countries',['ngRoute'])
.config([
'$routeProvider', function($routeProvider) {
$routeProvider
.when('/Countries', { controller: TabsCtrl, templateUrl: '/Areas/MIS/Templates/Countries/tabs.html' })
.otherwise({ redirectTo: '/Countries' });
}
]);
It's because you're trying to extend module 'ng'. Documented here: https://github.com/angular/angular.js/commit/c0b4e2db9cbc8bc3164cedc4646145d3ab72536e
Covered by this error report: https://github.com/angular/angular.js/issues/7709 and this one: https://github.com/angular/angular.js/issues/9692

Error in loading a bootstrap ui angular model

I am new to angular and bootstrap, I have my login.html with LoginController.
I try to create a modal popup window, So in order to do it i need to add $modal to the controller, the current controller looks like:
angular.module('loginController', ['loginService'])
.controller('LoginCtrl', ['$scope', 'LoginService', function($scope, LoginService) {
But when i do:
angular.module('loginController', ['loginService','ui.bootstrap'])
.controller('LoginCtrl', ['$scope', '$modal','LoginService', function($scope, $modal,LoginService) {
I Received an error, and i am getting the following error:
Error: [$injector:modulerr] Failed to instantiate module loginController due to:
Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to:
Error: [$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I guess i need to add bootstrap-ui somewhere, maybe to:
angular.module('myApp', [
'ngRoute',
'bootstrap-ui', -> **when i add it, i still get the exception**.
What am i doing wrong ?
You need to reference one of ui-bootstrap-*.js files in your html.

Resources