Is there any solution for the set of body tag ng-controller value based on routeChange in angular js?
I know that it's possible to set from routeProviding like that;
$routeProvider
$routeProvider
.when('/',{
templateUrl:'partials/index.html', controller: 'indexCtrl'
})
.when('/about',{
templateUrl: 'partials/about.html', controller: 'aboutCtrl'
});
});
But i wan't to like that something
<body ng-app="igoaimalathane" ng-controller="indexCtrl">
and when click to about link body controller will set based on which partial view calling by routing.
Related
I have an index.html page which has common template for my entire website, using angular my specified pages will get inserted in the following tag:
<data id="mainView"></data>
My index.html has an attribute in the body tag as follows:
<body myAttribute="teal">
I want this 'myAttribute' to be removed when a specific page (login.html)is to be loaded in the mainView tag. How do I achieve the same???
Below is the state provider of my application
stateProvider.state('login',{
url: '/login',
templateUrl : 'login.html',
controller: 'myController'
})
You could use onEnter & onExit hook of state definition, add and remove attribute from there. If you wanted to do it for single state.
stateProvider.state('login',{
url: '/login',
templateUrl : 'login.html',
controller: 'myController',
onEnter: ['$document', function($document){
angular.element($document).find('body').removeAttr('myAttribute');
}],
onExit: ['$document', function($document){
angular.element($document).find('body').attr('myAttribute', teal);
}]
})
How can I call two or more controllers in the same view like this:
.when('/func', {
controller: 'ListController' ,
controller: 'AddController',
templateUrl: 'views/funcionario/func.html'
})
or this:
.when('/card', {
controller: ['ListController','AddController'],
templateUrl: 'views/cardapio.html'
})
You can't set two controllers in your route, but you could set one in your route and then use ng-controller to set another as part of your template.
For example:
.when('/card', {
controller: 'ListController',
templateUrl:'views/cardapio.html'
}
Then in your template:
<div ng-controller="AddController">
//part of html that you can to use AddController for
</div>
Its not generally recommended best practice to do this though.
You could do something like this:
<div ng-view></div>
<div ng-controller="SecondController"></div>
In the ng-view you would load your view/controller as defined in your $routeProvider and have the SecondController take care of the second div.
I want to redirect to another page of the application. In the similar manner as we do in MVC application or asp.net application. I have defined the Route.js file which is below.
route.js defined in the following manner
var MainApp=angular.module('RoutingApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/BusinessAgent', {
templateUrl: 'Views/BusinessAgent/BusinessAgent.html',
controller: 'BusinessAgentController'
})
.when('/Admin', {
templateUrl: 'Views/Admin/Admin.html'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
HTML page
<section id="banner">
<ul class="actions">
<li>
Business Agent
</li>
</ul>
</section>
On click of href it should redirect.But it is not getting redirected.
I think you are missing ng-view . add ng-view for routing. It works as placeholder
<div ng-view></div>
Try putting the url of controller instead of view there.
Instead of
$routeProvider
.when('/BusinessAgent', {
templateUrl: 'Views/BusinessAgent/BusinessAgent.html',
controller: 'BusinessAgentController'
})
Try using this.
$routeProvider
.when('/BusinessAgent', {
templateUrl: 'ControllerName/Actionname',
controller: 'BusinessAgentController'
})
If you are trying to get different view, then use partial view for the respective action of controller.
for me I like to use $urlRouterProvider rather than $routeProvider see the below example:
$urlRouterProvider.otherwise("/BusinessAgent");
$stateProvider
.state("BusinessAgent", {
url: "/BusinessAgent",
templateUrl: "Views/BusinessAgent/BusinessAgent.html",
controller: "BusinessAgentController"
});
that's mean you will call the state with sref rather than href like this:
<a sref="BusinessAgent" >BusinessAgent</a>
If you are using html5Mode enabled
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Then replace '#' with '/' in href
Business Agent
if you disabled html5Mode then use
Business Agent
I saw that you used Angular UI-Router.
This is what I used in a recent application.Use the ui-sref tag instead of the href one.
<a ui-sref="/">Back to home</a>
<a ui-sref="cafe">Back to Cafe State</a>
I've used state provider instead of route provider.My states are
Root State
$stateProvider.state('/',{
url:"/",
templateUrl:'js/apps/choiceScreen/choice.html',
controller:'choiceCtrl'
})
Cafe State
.state('cafe',{
templateUrl:'js/apps/cafe/cafeScreen.html',
controller:'cafeCtrl'
});
you can use
$window.location.href = '/index.html';
for redurect to another page
I'm learning AngularJS and one of the assignments reads like this:
Now, add a new div tag to our index.html with an attribute directive that
will include the rendered template for the current route.
That is, I need to put something inside the following div, which will render the correct (according to routes) template.
<div class="main-wrapper">
</div>
In all examples that I could find, this task is solved by putting <ng-view/> into the HTML code.
But this answer is wrong.
How else can I implement it (render the template, which corresponds to the current route) ?
ngView directive can be used both as an element:
<ng-view></ng-view>
and as an attribute
<div ng-view></div>
See documentation
<ng-view/> is required from the ngRoute module. Templates may be resolved using $routeProvider as
angular.module('ngViewExample', ['ngRoute', 'ngAnimate'])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookCtrl',
controllerAs: 'book'
})
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterCtrl',
controllerAs: 'chapter'
});
$locationProvider.html5Mode(true);
}])
If you want to manipulate your templates from the controller you could also use ngInclude. You still need to resolve your route inside your controller before fetching the proper template.
How to load content on page by clicking on menu links?
For example, there is menu:
Personal
Contacts
Question is in how change template HTML in page for each link?
Basically what you are trying to achieve will be accomplish by creating SPA. For that you need to use ngRoute module in your application(by adding angular-route.js)
For setting up angular router you need to register routes with there template & controller, etc. inside app.config.$routeProvider would take a URL by .when method.
Code
var app= angular.module('app', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/tab/:id', {
templateUrl: 'template.html',
controller: 'templateController'
}).
otherwise({
redirectTo: '/tab/1'
});
}]);
& then there would be one section on UI which is nothing but ng-view directive that watches of $routeProvider configuration with url in browser bar
<ng-view></ng-view>
For more details look at this answer
Working Example Plunkr
Additional to #pankaj, You have to use $location services in your controller. So that you can change view accordingly from controller.
ex. You have link
<a ng-click="saveData">Save</a>
Now in controller:
$scope.saveData = function(){
$location.href('viewName');
}
ref : https://docs.angularjs.org/api/ng/service/$location