recently I'm learning AngularJS and for below snippet code, i have no idea why doing that. Could you help me to understand it, thanks.
// ----------------- this part --------------
// mainModule.controller = $controllerProvider.register;
// mainModule.directive = $compileProvider.directive;
// mainModule.filter = $filterProvider.register;
// mainModule.factory = provide.factory;
// mainModule.service = provide.service;
And the following is the whole code for your reference.
var mainModule = angular.module('app.test', [])
.run(['$log', function ($log) {
$log.debug('app.test.run()...');
}])
.config(function ($controllerProvider, $compileProvider, $filterProvider, $provide, scriptDependencyProvider, $stateProvider) {
'use strict';
mainModule.controller = $controllerProvider.register;
mainModule.directive = $compileProvider.directive;
mainModule.filter = $filterProvider.register;
mainModule.factory = provide.factory;
mainModule.service = provide.service;
$stateProvider.state({
name: 'main',
url: '/main',
views: {
'#': {
controller: ['$scope', '$stateParams', 'appTranslation',
function ($scope, $stateParams, appTranslation) {
appTranslation.load([appTranslation.main]);
}],
template: '<main-view></main-view>',
}
},
resolve: scriptDependencyProvider.createDependenciesMap(scriptDependencyProvider.main),
deepStateRedirect: true,
sticky: true
});
});
Related
I tired to follow this tutorial
app.config(['$stateProvider', '$urlRouterProvider', '$compileProvider',
function ($stateProvider, $urlRouterProvider, $compileProvider) {
self = this;
$compileProvider.preAssignBindingsEnabled(true);
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
url: '/',
//template: '<home-component></home-component>',
component: 'homeComponent',
params: {
selectedFilter: undefined
},
resolve: {
isAdOps: function () {
return false;
}
}
})
and
(function (app) {
app.component('homeComponent', {
templateUrl: 'partials/home-partial.html',
bindings: {
isAdOps: '<'
},
controller: ['$scope', '$state', function ($scope, $state) {
var self = this;
console.log("self.isAdOps = " + self.isAdOps);
self.isFullList = false;
// this.$onChanges = function (isAdOps) {
// if (angular.isDefined(isAdOps)) {
//
// self.isAdOps = isAdOps;
// console.log("self.isAdOps = " + self.isAdOps);
// $scope.isAdOps = !self.isAdOps ? true : self.isAdOps;
//
// }
// };
self.addVoice = function () {
$state.go("add");
};
$scope.$broadcast('searchNoFilter');
}]
});
})
(promptoWeb);
but still i get to the console: self.isAdOps = undefined
what is missing?
injection into the controller didn't work as well:
angular 1.5 passes undefined value to a controler after state.Provider "resolve"
When you resolve something, you can inject it. It is not added to controller as property automatically:
controller: ['$scope', '$state', 'isAdOps', function ($scope, $state, isAdOps) {
var self = this;
self.isAdOps = isAdOps;
console.log("self.isAdOps = " + self.isAdOps);
I am using a great template for ionic tabs and side menu as having issues with the navigation from the tabs. But when I use the code pen example and structure the html files into a templates folder and update the app.js file I lose the navigation. I obviously do not understand the js link format correctly. Please could someone explain it to me.
My code pen is here
The original is here
app.js (each html file is in www/templates
angular.module('ionicApp', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('entry', {
url: '/entry/templates',
templateUrl: 'templates/entry.html',
controller: 'EntryPageController'
})
.state('main', {
url: '/main/templates',
templateUrl: 'templates/mainContainer.html',
abstract: true,
controller: 'MainController'
})
.state('main.home', {
url: '/home',
views: {
'main': {
templateUrl: 'templates/home.html',
controller: 'HomePageController'
}
}
})
.state('main.info', {
url: '/info',
views: {
'main': {
templateUrl: 'templates/info.html',
controller: 'InfoPageController'
}
}
})
.state('main.tabs', {
url: '/tabs',
views: {
'main': {
templateUrl: 'templates/tabs.html',
controller: 'TabsPageController'
}
}
})
$urlRouterProvider.otherwise('/entry');
}])
.controller('MainController', ['$scope', function ($scope) {
$scope.toggleMenu = function () {
$scope.sideMenuController.toggleLeft();
}
}])
.controller('EntryPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function () {
$state.go('main.home');
}
}])
.controller('HomePageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Home Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
.controller('InfoPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Info Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
.controller('TabsPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Tab Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
enter code here
So I have this routing piece of code:-
$stateProvider.state('app.dashboard', {
url: "/dashboard",
templateUrl: "app/components/dashboard/dashboard.html"
, resolve: {
factory: ["$ocLazyLoad", "$q", ['jquery-sparkline', 'dashboardCtrl'], loadSequence]
},
title: 'Dashboard',
ncyBreadcrumb: {
label: 'Dashboard'
}
And i have this function:-
function loadSequence($ocLL, $q, files) {
}
so basically what i want to do is passing ['jquery-sparkline', 'dashboardCtrl'] to the function loadSequence, these values are simple string values. Is there a way to this.
Maybe i don't understand you
(function () {
'use strict';
angular
.module('plunker')
.config(config);
config.$inject = ['$stateProvider'];
/* #ngInject */
function config($stateProvider) {
$stateProvider
.state('app.dashboard', {
url: '/dashboard',
templateUrl: 'app/components/dashboard/dashboard.html',
controller: 'dashboardCtrl',
controllerAs: 'dashboard',
resolve: {
dashboardService: dashboardService
},
title: 'Dashboard',
ncyBreadcrumb: {
label: 'Dashboard'
}
});
}
dashboardService.$inject = ['$ocLazyLoad', '$q'];
function dashboardService($ocLazyLoad, $q) {
return buttonService.getButtons().then(function (data) {
return data;
});
}
})();
(function () {
'use strict';
angular
.module('app.dashboard')
.controller('dashboardCtrl', dashboardCtrl);
dashboardCtrl.$inject = ['dashboardService','jquery-sparkline'];
function dashboardCtrl(dashboardService,jquery-sparkline) {
var vm = this;
vm.loadSequence = loadSequence;
function loadSequence($ocLL, $q, files) {
}
}
})();
following is the code from my sample angular project.
app.js code:
(function () {
'use strict';
var app = angular.module('actorsDetails', [
// Angular modules
'ngResource',
// 3rd Party Modules
'ui.bootstrap',
'ui.router'
]);
app.config(['$stateProvider', '$urlRouterProvider', configRoutes]);
function configRoutes($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/home/home.html',
controller: 'HomeCtrl',
controllerAs: 'vm'
})
.state('form', {
url: '/form',
templateUrl: 'app/form/form.html',
controller: 'FormCtrl',
controllerAs: 'vm',
resolve: {
initialData: ['actorApi', function (actorApi) {
return actorApi.getActorsResource();
}]
}
})
.state('resource', {
url: '/resource',
templateUrl: 'app/resource/resource.html',
controller: 'ResourceCtrl',
controllerAs: 'vm',
resolve: {
initialData: ['actorApi', function (actorApi) {
return actorApi.getActorsResource();
}]
}
});
$urlRouterProvider.otherwise('/main');
}
app.run(['$state', function ($state) {
// Include $route to kick start the router.
}]);
})();
controller code:
(function () {
'use strict';
angular.module('actorsDetails').controller('HomeCtrl', HomeCtrl);
/* #ngInject */
function HomeCtrl($state) {
/* jshint validthis: true */
var vm = this;
vm.activate = activate;
vm.test = true;
vm.navigate = navigate;
activate();
function activate() {
}
function navigate() {
$state.go('form');
}
}
})();
**test.js**
describe('HomeCtrl', function() {
beforeEach(module('actorsDetails'));
beforeEach(inject(function ($rootScope, $controller) {
var scope = $rootScope.$new();
var HomeCtrl = $controller('HomeCtrl', {
$scope: scope
});
}));
it('should have a HomeCtrl controller', function() {
expect(true).toBeDefined();
});
});
there are the files I have included in my karma.config.js
I have added all the angularJS dependent files.
I have also added the controller file that i need to test
files: [
'src/lib/angular/angular.min.js',
'src/lib/angular-mocks/angular-mocks.js',
'src/lib/angular-resource/angular-resource.min.js',
'src/lib/angular-route/angular-route.min.js',
'src/app/app.js',
'src/app/home/home.controller.js',
'src/test/specs/*.js'
],
kindly pinpoint me, what is that I am doing wrong...
Mock out the $state object in your unit test.
var mockState = { go: function() {} };
var HomeCtrl = $controller('HomeCtrl', { $scope: scope, $state: mockState });
The $injector:modulerr is most likely related to your use of $state in your controller. Instead of mocking, you could try adding the library to your karma config, and loading the module in your unit test.
'src/lib/angular-ui-router/release/angular-ui-router.min.js'
beforeEach(module('ui.router'));
I have the following in my app.js:
var app = angular.module('app', ['admin', 'ui.compat', 'ngResource', 'LocalStorageModule']);
app.config(['$stateProvider', '$locationProvider',
function ($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
var home = {
name: 'home',
url: '/home',
views: {
'nav-sub': {
templateUrl: '/Content/app/home/partials/nav-sub.html',
}
}
};
$stateProvider.state(home)
}])
.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.transitionTo('home');
}]);
in admin.js:
angular
.module('admin', ['ui.state'])
.config(['$stateProvider', '$locationProvider',
function ($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
var admin = {
name: 'admin',
url: '/admin',
views: {
'nav-sub': {
templateUrl: '/Content/app/admin/partials/nav-sub.html',
}
}
};
var adminContent = {
name: 'admin.content',
parent: admin,
url: '/content', views: {
'grid#': {
templateUrl: '/Content/app/admin/partials/content.html',
controller: 'AdminContentController'
}
}
}
$stateProvider.state(admin).state(adminContent)
}])
I am confused about how to wire up my AdminContentController. Currently I have the following:
app.controller('AdminContentController',
['$scope', 'entityService', 'gridService', 'gridSelectService', 'localStorageService',
function ($scope, entityService, gridService, gridSelectService, localStorageService) {
$scope.entityType = 'Content';
Can someone verify if this is the correct way for me to set up my module and add it to app. Should I be adding the controller to the app:
app.controller('AdminContentController',
or should this belong to the module 'admin'. If it should then how should I wire it up?
Based on what you have shared, the the controller should be created on admin module such as
var adminModule=angular.module('admin'); // This syntax get the module
adminModule.controller('AdminContentController',
['$scope', 'entityService', 'gridService', 'gridSelectService', 'localStorageService',
function ($scope, entityService, gridService, gridSelectService, localStorageService) {
$scope.entityType = 'Content';
You could also define the controller in continuation of your admin module declaration.
Yes that would work angular.module('admin') works as a getter. So you'll get the same module in each file.