I am just beginner in angularjs I want to change angularjs controller name according name is written with templateUrl.
Here is example
.when({ templateUrl:'template.html',controller:'mycontrollername'})
and now I want to send above controller name at bellow controller name.
app.controller('6th-septemberCtrl', ['$scope','$http','filterFilter', function ($scope,$http, filterFilter) {});
I have many controllers like this so want to send controller name according which route templateUrl is click imigiatily change the controller name and should worked as written like same default way
I would create one static class which will hold the controller names per template.
Use the same class to get the names of the controller. Here is my example in code.
var app = angular.module("plunker", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "main.htm",
controller: getControllerName('main.htm')
})
.when("/red", {
templateUrl: "red.htm",
controller: getControllerName('red.htm')
})
.when("/green", {
templateUrl: "green.htm",
controller: getControllerName('green.htm')
});
});
function getControllerName(url) {
for(var i=0; i<templateControllers.length; i++) {
if(templateControllers[i].url === url)
return templateControllers[i].controllerName;
}
}
var templateControllers = [{
url: 'main.htm',
controllerName: 'mainController'
}, {
url: 'red.htm',
controllerName: 'redtroller'
}, {
url: 'green.htm',
controllerName: 'greenController'
}];
//create controller for main url
app.controller(getControllerName('main.htm'), function($scope) {
$scope.name = 'main';
});
//create controller for red url
app.controller(getControllerName('red.htm'), function($scope) {
$scope.name = 'red';
});
//create controller for green url
app.controller(getControllerName('green.htm'), function($scope) {
$scope.name = 'green';
});
Related
i want to pass parameter id with url in angularJS ,
i try in home.config :
home.config(["$routeProvider",function ($routeProvider) {
$routeProvider
.when("/profile",{
templateUrl : "views/home/profile.html",
controller : "profile"
})
.when('/settings',{
templateUrl : "views/home/settings.html",
controller : "Settings"
})
.when('/item',{
templateUrl : "views/home/item.html",
controller : "item"
});
}]);
in home.html :
<a href="#!item?id='+Item_id+'" >Item View</a>
and in itemController
controllers.controller("item",function ($scope,$http,$rootScope) {
var url_string = window.location.href; // home.php#!/item?id=0ae8b2fc-3ccb-11e8-952b-708bcd9109ce
var url = new URL(url_string);
var item_id = url.searchParams.get("id");
console.log(item_id);
})
but I get a null value, please help thanks in advance .
If you are using ngRoute you should use $route in the controller to get the parameters of the route.
You can see working code here:
const app = angular.module("mainapp", ["ngRoute"]);
app.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/profile", {
template: "<p>profile</p>",
controller: function() {}
})
.when('/settings', {
template: "<p>settings</p>",
controller: function() {}
})
.when('/item', {
template: "<p>item {{itemid}}</p>",
controller: function($route, $scope) {
$scope.itemid = $route.current.params.itemid;
}
});
}]);
I'm trying to use Angular with my Codeigniter project. The problem is that it doesn't load the proper template file through angular router.
In the root instead of showing templateUrl: 'index.php/welcome/home', it loads the index.php/welcome. It loads the index page inside the controller instead of the ones I have specified.
Below is my code:
JS
var app = angular.module('MyCtrl', ['ngRoute', "ui.bootstrap.modal"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index.php/welcome/home',
controller: 'mainController'
})
.when('/user', {
templateUrl: 'index.php/user/account',
controller: 'userController'
})
});
app.controller('mainController', function($scope) {
$scope.message = 'main con';
});
app.controller('userController', function($scope) {
$scope.message = 'user con!';
});
Welcome controller in Codeigniter:
public function home(){
$this->load->view('home');
}
Can someone tell me why this is not working and what I have done wrong?
I am using routeProvider to route to "views/userspace.html" which uses "UserspaceController"
The "views/userspace.html" recognizes this controller and makes request a $http request. This request works file and i can see values in "views/userspace.html" (inside ng-repeat). However, in the same controller i have defined $scope.videoClick function which does not seems to work. Any idea why?
var application = angular.module("tss.application",
[
"ngRoute",
"ui.bootstrap"
]);
application.config(function($routeProvider)
{
$routeProvider
.when("/", {
templateUrl : "views/main.html",
controller: "LoginController"
})
.when("/files", {
templateUrl : "views/userspace.html",
controller: "UserspaceController"
});
});
userspace_controller.js
angular.module('tss.application').controller("UserspaceController",
function($scope, $log, $http, $uibModal)
{
$http(
{
url : "/dirlist",
method : "GET",
}).then(function successCallback(response)
{
$scope.lists = response.data;
},
function errorCallback(response)
{
window.alert("Dir list could not be get");
});
$scope.videoClick = function()
{
$log.info('received.');
$uibModal.open(
{
templateUrl: '/views/content.html',
});
};
});
userspace.html
<li ng-repeat="list in lists" ng-click="videoClick(list.src)">{{list.name}}</li>
Change your function to accept a parameter
$scope.videoClick = function(val) {
$log.info('received.');
$uibModal.open({
templateUrl: '/views/content.html',
});
};
Or change the function in HTML
<li ng-repeat="list in lists" ng-click="videoClick()">{{list.name}}</li>
It's because in your;
$scope.videoClick = function()
{
$log.info('received.');
$uibModal.open(
{
templateUrl: '/views/content.html',
});
};
You have a comma which isn't needed, which makes the function throw an error because it's expecting another property.
Also if you're using the variable you pass through your HTML, you should use Sajeetharan's answer.
I'm try to create dynamic framework with angularjs
here is my plan ... the user have to add the new templateUrl and controller from json file like this templates.json
{
"pages" : [
{
"name" : "home",
"tempUrls" : "views/home",
"controller" : "HomeController"
},
{
"name" : "about",
"tempUrls" : "views/about",
"controller" : "AboutController"
},
{
"name" : "contact",
"tempUrls" : "views/contact",
"controller" : "ContactController"
}
]
}
from here our job to create for hem the controller and templateUrl with the page name in angularjs like this hours.js
var hours = angular.module('hours', ['ngRoute']);
var $routeProviderReference;
var currentRoute;
hours.config(function($routeProvider){
$routeProviderReference = $routeProvider;
})
.run(['$route', '$http', '$rootScope', function($route, $http, $rootScope){
$http.get("templates.json").success(function(data){
var loop = 0, currentRoute;
for(loop = 0; loop < data.pages.length; loop++){
currentRoute = data.pages[loop];
var routeName = "/" + currentRoute.name;
$routeProviderReference.when(routeName, {
templateUrl: currentRoute.tempUrls,
controller : currentRoute.controller,
resolve: {
param: function()
{
return currentRoute.resolve;
}
}
});
}
$route.reload();
});
}]);
hours.controller(currentRoute.controller, function($scope){
$scope.pageClass = 'page-' + currentRoute.name;
});
and here is the index.html
<div ng-class="{{pageClass}}" ng-view></div>
and here is the static version from angularJS before i converted to dynamic
var hours = angular.module('hours', ['ngRoute']);
hours.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'views/page-home.html',
controller: 'homeController'
})
});
hours.controller('homeController', function($scope){
$scope.pageClass = 'page-home';
});
i hope really someone can help!!!
This is how I am used to working with ng-class. It does appear to have multiple formats. This style requires single curly braces.
ng-class="{ myClass: ExpressionThatResolvesTrueOrFalse }"
So if the expression resolves true, then Angular will add myClass to the element. If it resolves false, it will not add the class. It will watch the value of the expression for changes as part of the normal scope digest.
I believe the model format does not use braces at all and is more like:
ng-class="pageClass"
I am using controller in my Angularjs which gets question one by one from server and i want on specific condition this controller should call a routeprovider that should change my current view with templateUrl and put into a directive
my question is can i call route provider in controller rather than module
here is my CreateController
var CreateController = ['$scope', '$http', function ($scope, $http) {
$scope.model = {
};
................>
.................>
$scope.NextQuestion = function () {
$http.post('/Testing/NextQuestion', {
........................>
}).success(function (newdata) {
$scope.model = newdata;
var inccomplevel = $scope.model.servercomplevel;
if (qId == 10) {
here i need the code for routeProvider and directive please provide me help
}
......................>
}];
i did the route provider in app.js file there it works
here is the code for app.js when i do like this it works and when i shift the code of route provider
to the create controller in condition if qId == 10 there it does not work
var app = angular.module('app', ['ngRoute']);
app.controller('CreateController', CreateController);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: 'Partials/TestCompleted.html',
controller: 'AppCtrl'
})
.otherwise({ redirectTo: '/' });
});
app.controller("AppCtrl",function ($scope) {
$scope.newmodel = {
}
});
Instead of trying to change the value of the templateUrl on the route, you should define another route. Then you can simply switch routes.
To change the route/view, you need update the path. You can do this using the $location service.
See AngularJS : How do I switch views from a controller function?