I want to pass the data of the function PhoneList() to the UI-Router controller function to the state 'phonedescription'.
JS:
var myApp = angular.module('myApp', ["ui.router"]);
myApp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/phone")
$stateProvider
.state('phone', {
url: "/phone",
templateUrl: "index.html"
})
.state('phonedescription', {
url: "/description",
templateUrl: "description.html",
controller: function($scope){
//Want to access the angular object to pass the attributes to this controller
}
}
});
function PhoneList($scope, $http, $templateCache)
{
$scope.list = function() {
$scope.phones = //get data from backend
}
$scope.list();
};
It appears that you are defining PhoneList as a loose function outside of the angular framework. Look into using a service instead. You can then inject that service into your phonedescription controller.
Related
I'd like to know if I can put a stateprovider somewhere else than my app.js, because it causes me some problems in other pages.
app.js
var app = angular.module('myApp', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('form', {
url: '/form',
templateUrl: 'templates/step_Form/form.html?v=' + new Date().getDay()
})
// url will be nested (/form/profile)
.state('form.upload', {
url: '/upload',
templateUrl: 'templates/step_Form/form-upload.html?v=' + new Date().getDay()
})
// url will be /form/interests
.state('form.content', {
url: '/content',
templateUrl: 'templates/step_Form/form-content.html?v=' + new Date().getDay()
})
$urlRouterProvider.otherwise('/form/upload');
})
My controller
angular.module('myApp').controller('ImportGeneralCtrl', function ($scope, $stateProvider, $urlRouterProvider) {
//myfunctions
}
I integrated a multi-step form in my HTML, using the state provider.
How could i get out the state provider from app.js to only apply it on my controller?
You cant use $stateProvider or $urlRouterProvider (providers) in a controller because those providers are just made for configuration injection. It can be uses in any angular.module('myApp').config() you want but you can't user providers in a controller. In controllers you could only inject $state (modules, services, factories, e.g.):
angular.module('myApp').controller('myController', function ($scope, $state) {}
This little code snippet shows you how to create a Service, a Factory and a Provider.
I am trying to make an $http call inside my publicApp.config in order to retrieve an array of available routes to match with the $urlMatcherFactoryProvider.
Right now, I am hard-coding them to be pageUrls = ['about','contact','another-page'];
But I have an url in my express API which returns an array of available URLS. The api URL is "/page-urls"
Would it be possible to make an $http.get('/page-urls') request inside the config? I know $http is available inside run(), but I need the list of available URLs BEFORE routing via the $stateProvider.
(function() {
'use strict'
var pageUrls = [];
var publicApp = angular.module('publicApp', ['ui.router'])
publicApp.config(['$stateProvider', '$urlRouterProvider', '$urlMatcherFactoryProvider', function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider) {
pageUrls = ['about','contact','another-page'];
var urls = pageUrls.join('|');
var urlMatcher = $urlMatcherFactoryProvider.compile("/{source:(?:" + urls + ")}");
$stateProvider
.state('/', {
url: '/',
templateUrl: "views/home/home.view.html",
controller: "homeCtrl"
})
.state('urls', {
url: urlMatcher,
templateUrl: "views/pages/page.view.html",
controller: "pageCtrl"
});
$urlRouterProvider.otherwise('/');
}]);
})();
Create a provider which gets $stateProvider as an injectable. The provider will create a service that does the http request then registers the routes. Inject the service in a run block and initiate route registration.
Something like this:
var publicApp = angular.module('publicApp', ['ui.router'])
publicApp.provider('routes', function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){
function registerRoutes(listOfUrls){
// register routes with $stateProvider
// angular.forEach(listOfUrls, function(url){
// $stateProvider.state...
// });
}
this.$get = function($http){
return {
initialize: function(){
return $http.get('/page-urls').then(function(response){
registerRoutes(response.data);
});
}
};
};
});
publicApp.run(function(routes){
routes.initialize();
});
Please consider the this code where the routeProvider is needed to inject page(n).html in ng-view.
In addition to the console error:
unknown provider: $routeProviderProvider <- $routeProvider
The argument to function routeIt is the name of the page to navigate to, How can I mix a conditional switch with routeProvider.when in order to call the page matching the argument in the most efficient manner? Thanks
(function () {
'use strict';
angular
.module('appModule')
.controller('MainMenuCtrl', ['$scope', '$http', 'TogglerFactory', '$routeProvider', MainMenuCtrl]);
function MainMenuCtrl($scope, $http, Toggler, routeProvider) {
$http.get('models/mainMenu.json').then(
function (response) {
$scope.menuItems = response.data;
},
function (error) {
alert("http error");
}
)
function routeIt (page) {
routeProvider
.when('/page1', {
url: "/page1",
templateUrl: 'views/page1.html',
controller: 'Page1Ctrl'
})
.when('/page2', {
url: "/page2",
templateUrl: 'views/page2.html',
controller: 'Page2Ctrl'
})
}
$scope.itemClicked = function (item){
Toggler.menuToggle();
routeIt(item);
}
}
})();
Service providers aren't available for injection in run phase (i.e. anywhere but provider services and config blocks). It is possible to make route provider injectable and configure it after config phase,
app.config(function ($provide, $routeProvider) {
$provide.value('$routeProvider', $routeProvider);
});
And controllers aren't the best places to implement any logic (e.g. route hot-plug).
Ok you're using your routeProvider wrong you need to configure your routes inside .config blocks
angular.module('myApp', [])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/page1', {
url: "/page1",
templateUrl: 'views/page1.html',
controller: 'Page1Ctrl'
}
})
If you want to change the url from your controller use $location.path('/page1'); inside your controller.
I have a webmethod on my remote server returning a JSon object.
Said json object contains strings which are required for the module to proper work.
So, is there a way to pass something to an angular module?
An idea could be to perform an http request inside of the initialization of the module:
$scope.init = function(){
$http.get ()
...
then(){
$scope.mydata = result;
}
};
But that would be asynchronous...
If you are worried about the async nature of an HTTP request to fill out your $scope.mydata variable, then you need to include this in a RESOLVE in your route.
I'm using UI-ROUTER in my current project:
(function() {
'use strict';
angular
.module('capps.core')
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home.capps', {
url: '/',
template: '<ui-view/>',
data: {
requireLogin: true
},
resolve:{
resolveFunction: resolveFunction
}
});
}
]);
resolveFunction['$inject'] = ['$http'];
function resolveFunction($http) {
return $http.get(API_URL)
.then(function(res) {
console.log(res);
});
}
})();
Then in your controller, you can pass 'resolveFunction' as a dependency... then use that to assign to your $scope.myData.
...
angular.controller('myController', myController);
myController.$inject = ['resolveFunction', '$scope'];
function myController(resolveFunction, $scope) {
$scope.mydata = resolveFunction.data;
console.log(mydata);
};
I use routeProvider in Angular JS:
.when('/profile/personal', {
templateUrl: 'personal.html',
controller: 'EditProfileController'
})
How I can pass param to controller EditProfileController and here call Ajax method that returns data. This data must be display in template of route in personal.html.
Example:
.controller('EditProfileController', ['$scope', '$http', function ($scope, $http) {
// If was click on `/profile/personal` from route, must get patam `personal` and call method GetAjax(param);
$scope.GetAjax = function (param){
//here return data put it in template HTML from route
}
}]);
My links are located in page by path:
http://wd.tk/profile
When I click to link route I get URL:
http://wd.tk/profile#/profile/personal/1
Id do:
.controller('EditProfileController', ['$scope', '$http', function ($scope, $http, $routeParams) {
console.log($routeParams);
}]);
I get error:
TypeError: Cannot read property 'idProfile' of undefined
First, in your url configuration, you must put the parameter of url:
when('/profile/personal/:idProfile', {
templateUrl: 'personal.html',
controller: 'EditProfileController'
})
Now, in your EditProfileController, you should get the parameter and call to ajax request:
Inject the $routeParams object and get the parameter with
$routeParams.idProfile:
.controller('EditProfileController',
function ($scope, $http, $routeParams) {
var idProfile = $routeParams.idProfile;
$http.get("service url").then(setData, setError);
function setData(data) {
$scope.data = data;
}
function setError() {
alert("error on get data profile");
}
}]);
In your html, you will show your data profile in the correct format.
But I recommend that all the ajax calls should groups in angular services.
PD:
Check It out angular ui router:
What is the difference between angular-route and angular-ui-router?
hope this helps.
You you need to change your $routeProvider, that should have /profile/:type instead of /profile/personal that means you are going to provide value for :type which can be accessible by injectin $routeParams service inside controller.
.when('/profile/:type', {
templateUrl: 'personal.html',
controller: 'EditProfileController'
})
Controller
.controller('EditProfileController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
$scope.profileType = $routeParams.type;
$scope.GetAjax = function (){
//here you have profile type in $scope.profileType
//you can pass it to ajax by simply accessing scope variable.
$http.get('/getprofiledata?type='+ $scope.profileType)
.success(function(data){
$scope.profileData = data;
})
.error(function(error){
console.log('error occured')
})
}
$scope.GetAjax(); //calling it on controller init
}]);
Update
YOu had missed one of dependency $routeParams in array annotation.
.controller('EditProfileController', ['$scope', '$http', '$routeParams',function ($scope, $http, $routeParams) {
console.log($routeParams);
}]);