I have the following:
var app = angular
.module('app', ['admin', 'home', 'questions', 'ui.compat', 'ngResource', 'LocalStorageModule'])
.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
}])
.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
// $state.transitionTo('home.overview');
$state.transitionTo('home', { contentTitle: 'overview' })
}]);
What I would like to do is to add a controller to the 'app' module. Is it possible to do this with
chaining and if so how should I do this?
angular.module('app', ['admin', 'home', 'questions', 'ui.compat',
'ngResource', 'LocalStorageModule']).controller('Ctrl',
['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
Related
I ran the link on the browser and it worked but it never loads up in the application.
Error in my console:
Error: [$compile:tpload] http://errors.angularjs.org/1.6.3/$compile/tpload?p0=app%2Fviews%2Fpartials%2Fpartial-index.html&p1=undefined&p2=undefined
my app.js:
(function(){
'use strict';
var app = angular.module('app',[
'ui.router',
'ngCookies'
]);
app.config([
'$stateProvider',
'$urlRouterProvider',
'$httpProvider',
'$locationProvider',
'staticData',
authConfig
]);
function authConfig(
$stateProvider,
$urlRouterProvider,
$httpProvider,
$locationProvider,
staticData ) {
$stateProvider.state('index', {
url: '/',
templateUrl: 'app/views/partials/partial-index.html'
});
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('requestInterceptor');
app.run([
'$rootScope',
'$state',
'authService',
authRun
]);
function authRun($rootScope, $state, authService){
$rootScope.$on('$stateChangeStart', function(event, toState){
if(toState.data && toState.data.accessLevel){
var user = authService.getUserData();
if(!(toState.data.accessLevel & user.role)){
event.preventDefault();
$state.go('index');
return;
}
}
})
}
})();
My directory:
I originally had my app set up with ng-route and I'm now switching over to ui-route. I used to use "when('/json/galleries/:projectId')" to generate a gallery when a thumbnail was clicked. Now with "state" I can't seem how to pass my projectId to the gallery state to generate my gallery.
App Module
(function() {
'use strict';
var bhamDesignsApp = angular.module('bhamDesignsApp', ['ngAnimate', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ui.router', 'mm.foundation', 'appControllers']);
bhamDesignsApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partials/home.html',
controller: 'ProjectsController'
})
.state('gallery', {
url: '/gallery/:projectId',
templateUrl: 'partials/gallery.html',
controller: 'GalleryController'
});
});
})();
App Controller
(function() {
'use strict';
var appControllers = angular.module('appControllers', []);
appControllers.controller('ProjectsController', ['$scope', '$http',
function ($scope, $http) {
$http.get('app/json/projects.json').success(function(data){
$scope.projects = data;
});
$scope.orderProp = '-year';
}]);
appControllers.controller('GalleryController', ['$scope', '$stateParams', '$http',
function($scope, $stateParams, $http) {
$http.get('app/json/galleries/' + $stateParams.projectId + '.json').success(function(data) {
$scope.gallery = data;
});
}]);
})();
HTML
.row
.small-12.medium-3.columns(ng-repeat="project in projects | orderBy:orderProp | filter:categoryFilter")
.tmbnail-container
a(ui-sref="gallery")
img.tmbnail(ng-src="{{project.thumbnail}}")
.text
h5 {{project.title}}
h6 {{project.year}}
.small-12.medium-6.columns
a(ui-sref="gallery")
You don't pass any ID to the state.
Change it to
a(ui-sref="gallery({projectId: project.id})"
(assuming project has an id field that holds its ID)
Documentation that explains how to use ui-sref: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref
I have a problem with the $elementProvider not being found if I try to define a controller on the $state, for example:
.state('tournament', {
url: '/tournament',
controller: 'TournamentController',
templateUrl: '/views/tournaments/index.html'
})
But it works fine if I do it in the template:
<div class="ui form segment" ng-controller="TournamentController">
Any ideas how to make it work with $state?
here is a working declaration of state routes:
var ConfEditorApp = angular.module('ConfEditorApp', ['ngAnimate', 'ui.router']);
ConfEditorApp.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}]);
ConfEditorApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("Index")
$stateProvider
.state('Databases', {
url: '/Databases',
templateUrl: 'Partials/Databases.html',
controller: 'DatabasesSectionCtrl as databasesSection'
});
}]);
and here is the controller declaration:
ConfEditorApp.controller('DatabasesSectionCtrl', ['$state', '$stateParams', '$location', '$scope', '$http', '$window',
function ($state, $stateParams, $location, $scope, $http, $window) {
......
try to check if something is wrong in your code or provide more info so we can checkout
I cannot get access to methods in my Angular Factory? I get "TypeError: Object # has no method 'method1'" error. My angular app looks like this...
myApp.js
var myApp = angular.module('myAngApp', [])
myApp.config(function ($routeProvider, $httpProvider) {
$routeProvider
.when('/list',
{
controller: 'ListController',
templateUrl: 'partials/list.html'
})
.when('/reports/:reportId',
{
controller: 'DetailController',
templateUrl: 'partials/report.html'
})
})
factory.js
myApp.factory('factory1', function(){
var factory = {};
factory.method1 = function() {
console.log('method1');
}
factory.method2 = function() {
console.log('method2');
}
return factory;
});
ListController.js
function ListController($scope, $location, $http, $route, $rootScope, factory1) {
factory1.method1();
}
ListController.$inject = ['$scope', '$location', '$http', '$route', '$rootScope', 'factory1'];
try this...
myApp.controller('ListController', [
'$scope',
'$location',
'$http',
'$route',
'$rootScope',
'factory1',
function ($scope, $location, $http, $route, $rootScope, factory1) {
factory1.method1();
}]);
instead of your current function ListController and the $inject statement
jsfiddle http://jsfiddle.net/NuCZz/
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.