According to the tutorial I've added new page and module, but it doesn't seem to work (neither it's shown in a sidebar, nor I can get it via direct url). What am I missing?
Note the
newPage that you have added has module name as BlurAdmin.pages.myNewPage
and state as myNewPage as given in the code
(function () {
'use strict';
angular.module('BlurAdmin.pages.myNewPage', [])
.config(routeConfig);
/** #ngInject */
function routeConfig($stateProvider) {
$stateProvider
.state('myNewPage', {
url: '/myNewPage',
templateUrl: 'app/pages/myNewPage/my-new-page.html',
title: 'My New Page',
sidebarMeta: {
order: 800,
},
});
}
})();
Now goto src/app/pages you will find pages.module.js. You should add mentioned new module to list:
angular.module('BlurAdmin.pages', [
'ui.router',
'BlurAdmin.pages.dashboard',
'BlurAdmin.pages.ui',
'BlurAdmin.pages.components',
'BlurAdmin.pages.form',
'BlurAdmin.pages.tables',
'BlurAdmin.pages.charts',
'BlurAdmin.pages.maps',
'BlurAdmin.pages.profile',
'BlurAdmin.pages.myNewPage'
])
And you are done.
after adding the module name to pages.module.js re run gulp serve:dist
Related
I'm currently trying to Unit Test the config of a new AngularJS component. We are using ui-router to handle the routing in our application. We have been able to successfully test it for all our previous components, but the code for all of them was written in plain Javascript. Now that we switched to TypeScript we are having some issues.
This is the TypeScript code where we make the configuration of the module:
'use strict';
// #ngInject
class StatetiworkpaperConfig {
constructor(private $stateProvider: ng.ui.IStateProvider) {
this.config();
}
private config() {
this.$stateProvider
.state('oit.stateticolumnar.stateticolumnarworkpaper', {
url: '/stateticolumnarworkpaper',
params: { tabToLoad: null, groupTabId: null, jurisdiction: null, showOnlyItemsWithValues: false, showOnlyEditableItems: false},
template: '<stateticolumnarworkpaper-component active-tab-code="$ctrl.activeTabCode"></stateticolumnarworkpaper-component>',
component: 'stateticolumnarworkpaperComponent',
resolve: {
onLoad: this.resolves
}
});
}
//#ngInject
private resolves($q, $stateParams, ColumnarWorkpaperModel, ChooseTasksModel, localStorageService) {
// Some not important code
}
}
angular
.module('oit.components.batch.batchprocess.stateticolumnar.stateticolumnarworkpaper')
.config(["$stateProvider", ($stateProvider) => {
return new StatetiworkpaperConfig($stateProvider);
}]);
This is the Spec file, which is written in Javascript:
describe('oit.components.batch.batchprocess.stateticolumnar.stateticolumnarworkpaper', function () {
beforeEach(module('oit.components.batch.batchprocess.stateticolumnar.stateticolumnarworkpaper'));
beforeEach(module('oit'));
var state = 'oit.stateticolumnar.stateticolumnarworkpaper';
it('has a route', inject(function ($state) {
var route = $state.get(state);
expect(route.url).toBe('/stateticolumnarworkpaper');
}));
});
My issue is when executing the line var route = $state.get(state), as the route variable is always null. I could verify that the config() method is being executed, but I'm simply out of ideas as to why route is always null on my test.
Just for reference, this is the configuration of another component, but using Javascript
'use strict';
angular
.module('oit.components.binders.binder.dom_tas.taxaccountingsystem.stateworkpapers.stateworkpapersreview')
.config(stateworkpapersreviewConfig);
function stateworkpapersreviewConfig($stateProvider) {
$stateProvider
.state('oit.binder.taxaccountingsystem.stateworkpapersreview', {
url: '/stateworkpapersreview?reviewType&binderId&year&jurisdiction&chartId&withBalance',
templateUrl: 'components/binders/binder/dom_tas/taxaccountingsystem/stateworkpapers/stateworkpapersreview/stateworkpapersreview.tpl.html',
controller: 'StateworkpapersreviewController',
controllerAs: 'stateworkpapersreviewCtrl',
resolve: {
onLoad: resolves
}
});
function resolves($q, $stateParams, StateTiBinderJurisdictionsModel, WorkpaperModel, localStorageService, StateTiFiltersModel) {
// Some not important code
}
}
As you can see the code is basically the same, but still, I can successfully test this component's config in the way I described, but when I try with the one written in TypeScript I get the error I mentioned.
PD: I'm aware of several similar posts (like this one), but none of them deal with TypeScript, which is my issue.
There is huge difference between the TS snippet and the JS one.
I’m not sure why you are using a class to elite a function? .config suppose to get a function.
You can write the same code as in JS just with .ts suffix, it is a valid TS code.
Then you just can import that config function, pass it all the injectables and test it.
I'm a complete Angular noob and trying to do some fancy stuff quickly, so forgive me if this is a dumb question.
I've created a website that uses routing, and I'm using ui-router for the routing instead of the standard Angular router. The theory is still the same - I have an index.html page in the root of my website which is the "master" or "host" page, and loginView.htm, which is a partial, exists in a separate directory.
The mainController for the project is loaded in the index.html page. Referencing this controller does NOT cause an error or problem.
What I'd like to do, in order to keep code manageable and small, is have the custom controller for a partial page lazy load when I load the partial, and then associate that partial page with the newly loaded controller. Makes sense, right? I don't want to load all the controllers by default, because that's a waste of time and space.
So my structure looks like this (if it matters to anyone):
Root
--app/
----admin/
------login/
--------loginView.html
--------loginController.js
--mainController.js
index.html
This is my loginController code. For testing purposes, I have made the mainController code match this exactly.
var loginController = function ($scope, $translate) {
$scope.changeLanguage = function (key) {$translate.use(key); };
};
angular.module('app').controller('loginController', loginController);
Finally, here is my routing code:
function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
$urlRouterProvider.otherwise("/admin/login");
$stateProvider
.state('login', {
url: "/admin/login",
templateUrl: "app/admin/login/loginView.html",
controller: loginController,
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
name: 'loginController',
files: ['app/admin/login/loginController.js']
}
]);
}
}
})
;
}
angular
.module('app')
.config(config)
.run(function ($rootScope, $state) {
$rootScope.$state = $state;
});
Now - if I remove the whole "resolve" section, and change the controller to "mainController", everything works. The page loads, the buttons work, they call the "changeLanguage" function and everything is wonderful.
But I want the "changeLanguage" feature to reside in the loginController because that's the only page that uses it. So when the code looks like it does above, an error fires("Uncaught Error: [$injector:modulerr]") and the partial page fails to load.
I don't understand what I'm doing wrong, and I'm not finding what I need via Google (maybe I just don't know the right question to ask).
Help?
Looking through the docs I cannot find the name property for ocLazyLoad#load.
Try the following:
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load(['app/admin/login/loginController.js']);
}
}
Or, pre configure it in a config block:
app.config(function ($ocLazyLoadProvider) {
$ocLazyLoadProvider.config({
modules: [{
name: 'loginController',
files: ['app/admin/login/loginController.js']
}]
});
});
// then load it as:
$ocLazyLoad.load('loginController');
I am trying to display my first view on screen .I used all concept of angular .But it not display or load my template .I didn't get any error .but it not load on html why here is my code
http://goo.gl/VbBnqg
(function() {
'use strict';
angular.module('app.auth').config(Routes);
Routes.$inject = ['$stateProvider', '$urlRouterProvider'];
function Routes($stateProvider, $urlRouterProvider) {
console.log("config call")
// Default
$urlRouterProvider.otherwise('signin');
// Application
$stateProvider
.state('signin', {
url: '/sign-in',
templateUrl: 'js/auth/template/login.html',
controller: 'authenticationCntrl'
})
}
})();
actually my login.html not load why ? why it is not loaded..
here is my project
https://dl.dropbox.com/s/x8s0xbllm270rq5/firstfroject.zip?dl=0
I'll explain the situation a bit more in answer.
According do docs (otherwise() section): https://github.com/angular-ui/ui-router/wiki/URL-Routing
You can pass string (url path) or function to otherwise(). If you would like to use state, you should pass a function that will invoke that state like this:
$urlRouterProvider.otherwise(function($injector, $location){
$injector.invoke(['$state', function($state) {
$state.go('stateName'); //in you case 'signup'
}]);
It will invoke state service and go to 'signup', which has route configured to '/sign-up'. Overall effect will be the same.
I have messed a bit in the understanding of the following things:
How to define required dependencies only in that modules I want and not define all of them in main app.js module?
Make it sense to store each config in separate file(e.g. config for routes, config for an angular plugin like 'toastr' and so on)
As for modules` dependencies, I cannot understand why I cannot move some dependencies from main app.js(like toastr, ngAnimate in my case) to a certain modules where these dependencies are required definetely. Look at my app structure and all dependencies:
app.js
'use strict';
angular
.module('app', [
'app.routes',
'app.constants',
// Below dependencies are not necessary here for all my modules.
// It is enough to have it only in logger.js module
'ngAnimate',
'toastr'
])
// TODO: Move 'toastr' configuration to separate file
// Angular Toastr taken from https://github.com/Foxandxss/angular-toastr/
.config(function (toastrConfig) {
angular.extend(toastrConfig, {
allowHtml: false,
closeButton: false,
closeHtml: '<button>×</button>',
containerId: 'toast-container',
extendedTimeOut: 1000,
iconClasses: {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning'
},
maxOpened: 0,
messageClass: 'toast-message',
newestOnTop: true,
onHidden: null,
onShown: null,
positionClass: 'toast-bottom-full-width',
tapToDismiss: true,
target: 'body',
timeOut: 5000,
titleClass: 'toast-title',
toastClass: 'toast'
});
});;
app.constants.js
'use strict';
angular
.module('app.constants',[])
.constant('API_URI', 'http://localhost:8080/api/');
app.routes.js
'use strict';
angular
// Only this dependency work well here as I expect and I don't need to define it in main app.js module
.module('app.routes', ['ngRoute'])
.config(config);
function config($routeProvider, $locationProvider) {
// Use the HTML5 History API
$locationProvider.html5Mode(true);
$routeProvider.
when('/', {
templateUrl: 'todo/todo.html',
controller: 'TodoController'
})
.otherwise({
redirectTo: '/'
});
}
logger.js
'use strict'
angular
// Why I cannot define 'toastr', 'ngAnimate' dependencies here(not in app.js file) where it is definetely needed?
.module('app')
.factory('logger', logger);
logger.$inject = ['$log', 'toastr'];
function logger($log, toastr) {
var service = {
error: error,
info: info,
success: success,
warning: warning,
log: $log.log
}
return service;
function error(title, message, data) {
toastr.error(message, title);
$log.error('Error: ' + message, data);
}
function info(title, message, data) {
toastr.info(message, title);
$log.info('Info: ' + message, data);
}
function success(title, message, data) {
toastr.success(message, title);
$log.success('Success: ' + message, data);
}
function warning(title, message, data) {
toastr.warning(message, title);
$log.warning('Warning: ' + message, data);
}
}
If I trying to move 'toastr' and 'ngAnimate' dependencies from app.js to logger.js file, I receive the following error message:
Error: error:modulerr
Module Error
What I do wrong using dependencies in relative modules in comparison with main app.js module?
And the last short question, make it sense to store each configuration of something in a separate file? I think this way lead to better code readability, usage, robustness but what do you think about it?
You currently don't have a separate module for logger. The module it uses is the 'app' module.
Create a new 'app.logger' module in the same way you've created 'app.constants' and 'app.routes'. Add 'toastr' and 'ngAnimate' as dependencies of 'app.logger'
Once that's done, add 'app.logger' as a dependency of 'app'.
It makes no difference to the code, but it's good to keep files short and organize your files in a way that makes it easy to find what you need.
I recently migrated from ui-router 0.0.1 to 0.2.0. Since the migration, ui-router fails to resolve named dependencies that needs to be injected into a view's controller. Here's the sample code which works fine with ver 0.0.1 but fails in ver 0.2.0
angular.module( 'sample.test', [
'ui.router',
'i18nService'
])
.config(function config($stateProvider) {
$stateProvider.state( 'mystate', {
url: '/mystate',
resolve: {i18n: 'i18nService'},
views: {
'main': {
controller: 'MyCtrl',
templateUrl: 'templates/my.tpl.html'
}
}
});
})
.controller('MyCtrl', ['i18n', function(i18n) {
// fails to resolve i18n
}]);
i18nService is a simple service that return a promise
angular.module('i18nService', [])
.factory('i18nService', ['$http', '$q', function($http, $q) {
var deferred = $q.defer();
$http.get('..').then(..);
return deferred.promise;
}]);
I get the error "Unknown provider: i18nProvider <- i18n" when using v0.2.0
If i change the resolve config to:
resolve: {
i18n: function(i18nService) {
return i18nService
}
},
everything works fine. Is this an expected behaviour, or am I missing some configuration?
Here's the plunker: http://plnkr.co/edit/johqGn1CgefDVKGzIt6q?p=preview
This is a bug that was fixed last month:
https://github.com/angular-ui/ui-router/commit/4cdadcf46875698aee6c3684cc32f2a0ce553c45
I don't believe it's in any currently released version, but you could either get the latest from github or make the change yourself in your js file. It's simply changing key to value in that one line (you can see it in the github commit).
A workarround is to just not change the name for now.... do
resolve :{
i18nService: 'i18nService'
}
Then inject i18nService to your controller instead of i18n. It's a bit of a hack, but it does work (it injects the resolved service not the promise).