Angularjs Use injectect module's controller in route definition - angularjs

I'm new to angular and I'm trying to modularlize my app.
My main module gets some other module and I want to use the controller of the injected module in my route definition.
Some simple example would be very helpful!
This does not work:
var app = angular.module('Contacting_App', ['LeadLookup']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/main',
{controller: 'MainCtrl',
templateUrl: 'apex/f42_Contacting_Main'}
).
when('/lead',
{module: 'LeadLookup',
controller: 'LeadLkpCtrl',
templateUrl: 'apex/f42_Lead_Lookup'}
).
otherwise(
{redirectTo: '/main'}
);
}]);

This tutorial page may point you in the correct direction docs.angularjs.org/tutorial/step_07
The main things you should look at are:
Module
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
routeProvider
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
Controllers
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}]);

Related

AngularJS routeParam not working

I have url like this:
http://localhost:3000/details/59567bc1de7ddb2d5feff262
and I want to get the parameter id
59567bc1de7ddb2d5feff262
But for some reasons routeParam always returns undefined
My controller is:
task.controller('ctrla', function($rootScope, $scope, $http, $timeout, $routeParams){
$scope.first = 1;
console.log($routeParams);
});
routes :
task.config(function ($routeProvider, $locationProvider){
$routeProvider.when('/details/:id', {
templateUrl: "details.html",
controller: "ctrla"
})
});
any help will be a life save.
Make sure you have defined the route urls as mentioned below,
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
template: "HI this is home Screen",
controller: 'ctrla'
})
.when('/details/:id', {
templateUrl: "template.html",
controller: 'profileController'
})
.otherwise({
redirectTo: '/home'
})
}]);
DEMO
If yu have route deinition defined as
$routeProvider.when('/details/:id', {
templateUrl: "partial.html",
controller: "ctrla"
})
Then in controller you should get its value as
task.controller('ctrla', function($rootScope, $scope, $http, $timeout, $routeParams){
$scope.first = 1;
console.log($routeParams.id);
});

AngularJs issue in rendering page

All symbols like(.,)are displayed as question mar in angular data binding from json please help me to fix this issuethis is the json file
preview in browser
//html
< p ng - bind - html = "servicesDetails[WhichItem].descriptions" > < /p>
//controller
var MaalimServicesData = angular.module('MaalimServicesData', ["ngSanitize"]);
MaalimServicesData.controller('MaalimServicesController', ['$scope', '$http', function($scope, $http) {
$http.get('views/services.json').success(function(data) {
$scope.servicesDetails = data;
});
}]);
MaalimServicesData.controller('MaalimRoutecontroller', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) {
$http.get('views/services.json').success(function(data) {
$scope.servicesDetails = data;
$scope.WhichItem = $routeParams.itemId;
});
}]);
//app.js
var Maalim_web = angular.module('Maalim_web', ['ngRoute', 'MaalimServicesData']);
Maalim_web.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/services', {
templateUrl: 'views/services.html',
controller: 'MaalimServicesController'
}).
when('/details/:itemId', {
templateUrl: 'views/more.html',
controller: 'MaalimRoutecontroller'
}).
otherwise({
redirectTo: '/services'
});
}
]);
//route for peoples
Maalim_web.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/peoples', {
templateUrl: 'views/people.html',
controller: 'MaalimpeopleDataController'
}).
when('/people_details/:itemId', {
templateUrl: 'views/people_details.html',
controller: 'MaalimPeopleRouteController'
}).
otherwise({
redirectTo: '/peoples'
});
}]);
I am very new in angular.Please help me to fix this issue please see the image for more info.

Can't get routeparams individually

retrieving the return is successful but can't seem to get the attributes individually
var myApp = angular.module('myApp', ['ngGrid', 'ngRoute', "ngAnimate", "ngAria", 'ngMaterial']);
myApp.config(['$routeProvider', function ($routeProvider)
{
$routeProvider.
when('/:energyId/:energyChain/:resourceId/:facilityId',
{
templateUrl: '/Content/resourceTemplate.html',
controller: 'detailsController',
resolve: {
SomeData: function ($route) {
return $route.current.params;
}
}
}).
otherwise({
redirectTo: '/param1/param1/param1/param1'
});
}]);
myApp.controller('detailsController', ['$scope', '$routeParams', function ($scope,SomeData, $routeParams) {
//this doesnt work
$scope.statusLabel = SomeData.energyChain;
//but this works $scope.statusLabel = SomeData;
myApp.controller('detailsController', ['$scope','SomeData','$routeParams', function ($scope,SomeData, $routeParams)
wrong sequence of dependency

How to add new controller in angular.module like MyController

angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [function() {
}]);
In same you can append an component to you module
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
$routeProvider.when('/view2', {
templateUrl: 'view1/view2.html',
controller: 'View2Ctrl'
});
}])
.controller('View1Ctrl', [$scope, function($scope) {
}])
.controller('View2Ctrl', [$scope, function($scope) {
}]);
Other way would be you can just store your module in some variable and do use that variable while appending angular component to angular.module
var app = angular.module('myApp.view1', ['ngRoute'])
app.config(['$routeProvider', function($routeProvider) {
//..code here
}])
app.controller('View1Ctrl', [$scope, function($scope) {
}])
app.controller('View2Ctrl', [$scope, function($scope) {
}]);
More preferred way would be to use IIFE pattern In that case there you wont store any global variable, As IIFE create a closer function that scope ends when function gets end
App.js
function(){
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
//..code here..
}])
}();
View1Ctrl.js
function(){
angular.module('myApp.view1')
.controller('View1Ctrl', [function() {
}]);
}();
View2Ctrl.js
function(){
angular.module('myApp.view1')
.controller('View2Ctrl', [function() {
}]);
}();
I've added another controller declaration, and added it to $routeProvider, see the relevant developer guide page for more info
angular.module('view1', 'view2', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
})
.when('/view2', {
templateUrl: 'view2/view2.html',
controller: 'myController'
})
}])
.controller('View1Ctrl', [function() {
}]);
.controller('myController', [function() {
}]);
note that appending multiple controllers into a single file is not a recommended practice

AngularJS ng-class active by any subroute

I have a tab I want to be activated by a link like this:
http://localhost:8020/client#/content
Therefore I have this list-element:
li ng-show="showContentItemsTab" ng-class="{active: isActive('/content')}">Content</li>
But I also want it to be active when sublinks are called:
http://localhost:8020/client#/content/531443caeb3f95600ef92e3f
Is there a way to apply all sublinks after /content ?
Something like:
li ng-show="showContentItemsTab" ng-class="{active: isActive('/content/*')}">Content</li>
Following the official angular js tutorial, you can set up routing as follows.
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
The controller will be
var phonecatControllers = angular.module('phonecatControllers',[]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
$http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
$scope.phone = data;
});
}]);
So your can be fetched by using $routeParams

Resources