Here i have created an external module "lang-change" in which i created one service and one directive.
bower_components/lang-change/lang-change.js
angular.module('langChange', [
'angular-translate'
])
.service('MyService', function ($translate, $rootScope, tmhDynamicLocale) {
.............
.............
.............
})
.directive('LanguageChangeSelect', function (MyService) {
'use strict';
return {
.............
.............
.............
};
});
I created this module seperately and link this to bower_components, but when I am using this in my app.js, I am getting error.
error
angular.js:12783 Error: [$injector:unpr] Unknown provider: langChangeProvider <- langChange
app.js
(function() {
'use strict';
angular.module('myApp', [
'ngSanitize',
'ui.router',
'ui.bootstrap',
'pascalprecht.translate',// angular-translate
'tmh.dynamicLocale'// angular-dynamic-locale
])
.config([
'$stateProvider',
'$urlRouterProvider',
'$injector',
'$translateProvider',
'tmhDynamicLocaleProvider',
function(
$stateProvider,
$urlRouterProvider,
$injector,
$translateProvider,
tmhDynamicLocaleProvider
) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/home.html'
})
.state('myapp', {
url: '/myapp',
templateUrl: 'views/myapp.html',
controller: ['$scope', '$state', '$rootScope', '$translate', 'langChange',
function($scope, $state, $rootScope, $translate, langChange) {
// Code goes here
}]
});
}
]);
Related
The problem is I can't insert constant from one module to another's module config.
Main app:
'use strict';
angular.module('identicaApp', [
'ngRoute',
'identicaApp.common',
'identicaApp.mainPage',
'identicaApp.aboutPage',
'identicaApp.registerPlayer'
]).config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/main'});
}]);
common.js:
angular.module('identicaApp.common', [])
.constant('ROOT_PATH', '/static/angular/identica/');
and the problem module:
'use strict';
angular.module('identicaApp.mainPage', [
'ngRoute',
'identicaApp.common'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/main', {
templateUrl: common.ROOT_PATH + 'main_page/main_page.html',
controller: 'MainPageCtrl'
});
}])
.controller('MainPageCtrl', [function() {
}]);
common.ROOT_PATH is not visible by loader...
I think you missed to inject the actual constant to your config call (e.g. the same way you inject services to controllers), and then you have to reference it by it's name:
'use strict';
angular.module('identicaApp.mainPage', [
'ngRoute',
'identicaApp.common'
])
// Here you must inject your 'ROOT_PATH' constant
.config(['$routeProvider', 'ROOT_PATH', function($routeProvider, ROOT_PATH) {
$routeProvider.when('/main', {
templateUrl: ROOT_PATH + 'main_page/main_page.html', // You must reference it by its name (ROOT_PATH)
controller: 'MainPageCtrl'
});
}])
.controller('MainPageCtrl', [function() {
}]);
You need to include the constant and use it like this:
.config(['$routeProvider', function($routeProvider, ROOT_PATH) {
$routeProvider.when('/main', {
templateUrl: ROOT_PATH + 'main_page/main_page.html',
controller: 'MainPageCtrl'
});
}])
If you want to have multiple constant "variables" under ROOT_PATH do it like this.
angular.module('identicaApp.common')
.constant('ROOT_PATH', {
'URL': '/static/angular/identica/',
'NAME': 'Test',
'ANOTHER_THING': 'Something'
});
Then you can use it this way:
.config(['$routeProvider', function($routeProvider, ROOT_PATH) {
$routeProvider.when('/main', {
templateUrl: ROOT_PATH.URL + 'main_page/main_page.html',
controller: 'MainPageCtrl'
});
}])
I installed AngularJs with MVC4 using Nuget package and created a bundle for AngularJS
bundles.Add(new Bundle("~/bundles/scripts")
.Include("~/Scripts/angular.js")
.Include("~/Scripts/jquery-{version}.js"));
In Layout I included it as follow:
#Scripts.Render("/scripts/angular-route.js")
#Scripts.Render("/scripts/loginController.js")
#Scripts.Render("/scripts/routeConfig.js")
routeConfig.js
angular
.module('MyApp', [
'ngRoute',
'MyApp.ctrl.crud',
])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/Home/Index',
// controller: 'loginController'
});
$routeProvider.when('/login', {
templateUrl: '/Home/loginPage',
controller: 'crudController'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
loginController.js
angular
.module('MyApp.ctrl.crud', [])
.controller('loginController', [
'$scope',
function ($scope) {
alert("In Login Controller")
}
]);
When I program is display following exception:
WARNING: Tried to load angular more than once.
Why I get this Warning?
I have define the config of my module:
angular
.module('myApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/models', {
templateUrl: 'views/models.html',
controller: 'ModelsCtrl',
controllerAs: 'models'
})
.when('/contacts', {
templateUrl: 'views/contacts.html',
controller: 'ContactsCtrl',
controllerAs: 'contacts'
})
.when('/constructor', {
templateUrl: 'views/constructor.html',
controller: 'ConstructorCtrl',
controllerAs: 'constructor'
})
.otherwise({
redirectTo: '/constructor'
});
});
Is it possible to get information about current user state without using angular-ui-router ?
You can inject the $location service and make use of its path() function.
Here is a link to the docs for location $location
angular.module('app')
.run(['$rootScope','$location',
function($rootScope, $location) {
$rootScope.$on('$routeChangeSuccess', function(e, current) {
console.log('Current route name: ' + $location.path());
}
}]);
I am creating an angular application and would like dynamically load the controller. I see you can use a module called ocLazyLoad (found here https://github.com/ocombe/ocLazyLoad)
Now i am sure i have done everything i need to (obviously done something wrong) but when i try to run my application, nothing loads and the browser just freezes. if i load the controller normally, it works fine and the whole page loads.
Here is some code
app.js
var App = angular.module('MyApp', ['ui.router', 'ngStorage', 'ngCookies', 'pascalprecht.translate', 'oc.lazyLoad']);
config.state.js
App.config(['$stateProvider', '$httpProvider', '$locationProvider', '$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide', '$ocLazyLoadProvider',
function ($stateProvider, $httpProvider, $locationProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $ocLazyLoadProvider) {
'use strict';
// enable html5Mode
$locationProvider.hashPrefix('!').html5Mode(true);
// defaults to home
$urlRouterProvider.otherwise('/admin/settings');
// config ocLazyLoad
$ocLazyLoadProvider.config({
events: true
});
App.controller = $controllerProvider.register;
App.directive = $compileProvider.directive;
App.filter = $filterProvider.register;
App.factory = $provide.factory;
App.service = $provide.service;
App.constant = $provide.constant;
App.value = $provide.value;
// states
$stateProvider
.state('admin', {
url: '/admin',
abstract: true,
controller: 'AdminController',
templateUrl: basePath('admin/admin.html')
})
.state('admin.settings', {
url: '/settings',
controller: 'SettingsController',
templateUrl: basePath('admin/settings/settings.html'),
resolve: {
loadController: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'admin-settings',
files: ['/Scripts/app/components/admin/settings/settings-controller.js']
});
}]
}
});
});
function basePath(uri) {
return '/Scripts/app/components/' + uri;
};
}]);
admin-controller.js
App.controller('AdminController', ['$rootScope', '$scope', '$state', '$localStorage', '$translate', '$timeout', '$window', function ($rootScope, $scope, $state, $localStorage, $translate, $timeout, $window) {
'use strict';
//... some code here
}]);
settings-controller.js
App.controller('SettingsController', ['$scope', function ($scope) {
console.log("settings loaded");
}]);
index.html (using asp.net MVC)
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title ng-bind="models.helloAngular"></title>
#Styles.Render("~/Content/css")
<link rel="stylesheet" href="~/Content/app.css" />
</head>
<body class="layout-boxed">
<section class="wrapper" ui-view></section>
#Scripts.Render("~/bundles/angular")
#Scripts.Render("~/bundles/angular-translate")
#Scripts.Render("~/bundles/angular-storage")
#Scripts.Render("~/bundles/app")
</body>
</html>
admin.html
<!-- Main section-->
<section>
<!-- Page content-->
<div ui-view autoscroll="false" ng-class="app.viewAnimation" class="content-wrapper">
</div>
</section>
settings.html
<div>here</div>
I am using angular to provide the link for my page.
I have something like
//main app configuration
app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives'
]).
config(['$routeProvider', function($routeProvider) {
}]);
//test page configuration
test-controller.js
angular.module('myApp', []).
config(function ($routeProvider) {
$routeProvider.
when('/test/:link', {
templateUrl: 'test/:link.html',
constroller: 'Ctrl'
}).
when('/test2/:link', {
templateUrl: 'test2/:link.html',
constroller: 'Ctrl'
})
}).
controller('Ctrl', ['$scope', function ($scope) {
//scope data
}])
for some reason, the $routeprovide in my test-controller.js doesn't work and output module injection error.
Can anyone help me about it? Thanks a lot!
At first glance, it is because you didn't add 'ngRoute' as dependency in the second definition