In a AngularJS (1.2.7) project, using UI Router (0.2.8), I want to apply the current state as a class to the ui-view element, because that would allow me to apply animations for specific states, e.g. do transition A going from login to start and do transition B going from start to settings.
At the moment I have the $state object on the $rootScope (as mentioned here, which allows me to add a state-based class on the body using ng-class="$state.current.name". However, if I add that to the ui-view element, e.g.
<div ui-view ng-class="$state.current.name"></div>
Then the class is one step behind the actual state. So when going from "login" to "start", the class will be "login" instead of "start".
I think this is a bug, you can read more about the issue here:
https://github.com/angular-ui/ui-router/issues/866
Until it is fixed I suggest such a workaround:
<div ng-class="$state.current.name"><div ui-view></div></div>
I'm reading between the lines of what I think you're trying to do: you want to style a particular view differently depending on the state/route. Here's what I'm doing currently:
1) Set a state attribute on the HTML element:
<html lang="en" ng-app="MyApp" ng-controller="MyAppCtrl" state="{{ state }}">
<div ui-view="nav"></div>
<div ui-view="page" autoscroll="true"></div>
</html>
2) Update the state name whenever the route changes:
app.controller('MyAppCtrl', function($rootScope){
$rootScope.state = 'home';
$rootScope.$on('$stateChangeSuccess', function(event, toState) {
$rootScope.state = toState.name;
});
});
3) Using attribute selectors in the stylesheets:
[state="app.articles"] [ui-view="page"] {
section {
font-size: 1.8rem;
}
}
Instead of adding $state to $rootScope I just put a method on the controller of my root directive that returns the active state name. Then I added to the DOM like so:
<ui-view active-state="{{ctrl.getActiveState()}}"></ui-view>
Then in my CSS I can use selectors like this:
[active-state="someStateName"] { ... }
If you prefer a class it would be just as easy to do this:
<ui-view class="{{ctrl.getActiveState()}}"></ui-view>
...but you would want to replace all "." characters with "-" in your getActiveState() method.
but, i has question about that : <div ng-class="$state.current.name"><div ui-view></div></div>
$state.current.name equal user.login hou to code my css?
Related
I'm just learning Angular and have a very basic app set up. When rendering some data via the templateUrl property of a route, what would be the best way to include a sub-controller in the returned template? For example, including a "createOrEditItem" template at the bottom of a "viewItem" template so that the "createOrEditItem" can be reused on its own later?
I've tried putting a div in the template with its ng-controller attribute set to a controller name that I've defined at the app level, but it's not being activated. Should this be done with a directive instead to make it instantiate when the master controller has its contents set, or am I missing something more fundamental?
yes, as mentioned in the later part of the question, you should be using a directive. Or, if using AngularJS >= v1.5, component should be the choice because they are pluggable and works well with nesting too.
Note that for the route also, you can directly use a component like this:
var myMod = angular.module('myMod', ['ngRoute']);
myMod.component('home', {
template: '<h1>Home</h1><p>Hello, {{ $ctrl.user.name }} !</p>',
// ^^^^ other components can be used here
controller: function() {
this.user = {name: 'world'};
}
});
myMod.config(function($routeProvider) {
$routeProvider.when('/', {
template: '<home></home>'
});
});
Now, as the comment suggests, you can freely use other components in the template of home component.
Hope this helps a bit!
A directive can be used.
Another option is to use a seperate view/route. So when you add a ui-view tag, you could define your view and route.
This is explained here:
https://scotch.io/tutorials/angular-routing-using-ui-router
I tried different ways to achieve this, with no luck. I also read few post on same subjet, I don't know why I can't get this to work.
I want to use ng-include to display template content in a component. Since it's a reusable component, I'm passing the template id via bindings.
angular.module('app')
.component('detailPanel', {
templateUrl: "components/_detailPanel.html",
bindings: {
templateId: '#'
}
}
);
The component _detailPanel.html:
<div>
{{$ctrl.templateId}}
<ng-include src="$ctrl.templateId"> </ng-include>
</div>
<script type="text/ng-template" id="actionDetail.html">
THIS IS THE DETAIL
</script>
I'm passing the templateId to the component. It prints fines in the div using {{ templateId }} and this indicates the correct id is passed, but nothing is shown from ng-include. The only way I'm able to get the template to be rendered is to pass the string 'actionDetail.html' to the ng-include's src. However I'm looking to pass a variable because I want something reusable..
This example contains the ng-template directly in the component, but I intend of course to put it oustide, this was only a test.
Any thoughts would help... thanks
My navbar should be on top of almost every page (but not all), so I'm trying to load it for some pages using ui-view, but I'm stuck.
What I'm trying to do is to attach my navbar to main states (like contacts, about) and their child states (contacts.list, contacts.detail, etc), but If I do it that way, nav is injected into their main divs so it gets smaller, so I need to attach it into index.html directly.
I copied ui-router's demo app, created a ui-view called navbar, removed navigation part from index.html and created navbar.html.
Here's my plunk : http://plnkr.co/edit/i0DuDcocH04TZadim2Oo
I can't load your plunkr but i already did something like that.
If you want to use a navbar that is independant from the rest you'll need to use views for each part of your main page (like : header / content /foooter).
For that you can have an index like this :
<body>
<section>
<div ui-view="header"/>
</section>
<section>
<div ui-view="content"/>
</section>
</body>
Then define your main state
$state.state('home', {
url:'/'
views:{
'header':{
templateUrl:'navbar.html',
controller:'navbarController'
},
'content':{
templateUrl:'content.html'
controller:'contentController'
}
}
});
In your navbar template you have now a dedicated template and controller so you can do whatever you want with it.
If you need to listen for change event for instance :
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
event.preventDefault();
// transitionTo() promise will be rejected with
// a 'transition prevented' error
})
from : http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state
The $rootScope is normal, events are only broadcasted through $rootScope.
If you need to pass data between the view you have to stored your variable in the $rootScope. I searched for other way to do it but it's just to much way simplier and enough to use the $rootScope for this.
If ypou want to add some classes when some state (or children) are active you can use the directive ui-sref-active : http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active. Directive ui-sref-active-eq for strict equality.
When using views you will have a trouble about using subState if you don't want using your app in full view but just normal state with template and controller. The best for that is to have an intermediate state wit a view define like this :
views:{
'#':{
template:'<div ui-view/>'
}
}
Then you can define children of this state normally without using views.
Though i can really say if that's what you're searching for without loading your plunkr i hope this will help you.
I would have two sets of nested states. For the main.xx group you would inject your navbar and create nested states from there. Then each non-nav partial would have it's own set of states. Here is an example.
Been struggling on how to tie angular with CSS animations... I'm sure I'm not getting something fundamental.
My goal is to have a list of search results. When you click one, a detail view will slide out from under the list. When you click another, the old detail view slides back, the details for the new one load, and then the detail view slides back in.
I don't have any code to show that even remotely works, but if anyone can point me at an example or offer some basic code, I would be extremely grateful.
Thanks!
You want to use ng-animate for animations.
ng-animate essentially adds CSS classes to elements automatically (often for a short time) during, for example, state transitions, during the population of an ng-repeat, etc.
You do not add the CSS classes to elements yourself this is done by ng-animate.
You do, however, apply the styling for those class in your style-sheet.
Its up to you, in your CSS, to do something with those automatically added CSS classes. Typically, you might want to do a fade in using CSS transitions.
For example ... https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
OR
http://www.nganimate.org/
The ng-animate link details exactly which classes are added when. There are too many to mention here.
You might also want to use ng-fx
ng-fx github is here https://github.com/AngularClass/ng-fx
ng-fx requires ng-animate
ng-fx can be seen at work on its demo page - http://hendrixer.github.io/
This should get you going :)
I would go with ng-show.
var myApp = angular.module('myApp',[]);
myApp.controller('SomeController', ['$scope', function($scope) {
//this can be a service with a ngResource, an ajax call using $http... this is a baaaaasic dummy example.
$scope.yourScopeFunction = function(){
$scope.data = '';
$scope.data = {};
$scope.data.param1 = 'Hello';
$scope.data.param2= 'Jhon';
}
}]);
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="SomeController">
<div >
<div class="elementClass" ng-click="yourScopeFunction()">Element1</div>
<div class="elementClass" ng-click="yourScopeFunction2()">Element1</div>
</div>
<div class="yourClass" ng-show="data != ''">
<div>{{data.param1}}</div>
<div>{{data.param2}}</div>
</div>
</body>
Then, when the ng-show's expression evaluates to true (the data variable has some content), Angular will attach a new class to your yourClass element called
.ng-hide-add and when it evaluates to false, Angular will add the class .ng-hide-remove.
You just have to make the transition (or animation you want) based on the classes your element will have in both those moments. Like in the documentation example.
Something like:
.yourClass.ng-hide-add{
//some transition or animation css
}
.yourClass.ng-hide-remove{
//some transition or animation css
}
Note that my function on the example does a $scope.data = ''; so the angular ng-show expression evaluates to false and the .ng-hide-remove is added.
By the way, you will need to add Angular Animations library.
I have a working Angular.js app with HTML5 mode enabled.
$location.Html5mode(true).hashbang("!");
What I want to achieve is to get some URLs or <a> tags to do the normal browsing behaviour instead of changing the URL in the address bar using HTML5 history API and handling it using Angular controllers.
I have this links:
<a href='/auth/facebook'>Sign in with Facebook</a>
<a href='/auth/twitter'>Sign in with Twitter</a>
<a href='/auth/...'>Sign in with ...</a>
And I want the browser to redirect the user to /auth/... so the user will be then redirected to an authentication service.
Is there any way I can do this?
Adding target="_self" works in Angular 1.0.1:
<a target="_self" href='/auth/facebook'>Sign in with Facebook</a>
This feature is documented (https://docs.angularjs.org/guide/$location - search for '_self')
If you're curious, look at the angular source (line 5365 # v1.0.1). The click hijacking only happens if !elm.attr('target') is true.
An alternative to Fran6co's method is to disable the 'rewriteLinks' option in the $locationProvider:
$locationProvider.html5Mode({
enabled: true,
rewriteLinks: false
});
This will accomplish exactly the same thing as calling $rootElement.off('click'), but will not interfere with other javascript that handles click events on your app's root element.
See docs, and relevant source
This is the code for turning off deep linking all together. It disables the click event handler from the rootElement.
angular.module('myApp', [])
.run(['$location', '$rootElement', function ($location, $rootElement) {
$rootElement.off('click');
}]);
To work off the Nik's answer, if you have lots of links and don't want to add targets to each one of them, you can use a directive:
Module.directive('a', function () {
return {
restrict: 'E',
link: function(scope, element, attrs) {
element.attr("target", "_self");
}
};
});
I've run into the same issue a few times now with angular, and while I've come up with two functional solutions, both feel like hacks and not very "angular".
Hack #1:
Bind a window.location refresh to the link's click event.
<a
href=/external/link.html
onclick="window.location = 'http://example.com/external/link.html';"
>
The downside and problems with this approach are fairly obvious.
Hack #2
Setup Angular $routes that perform a $window.location change.
// Route
.when('/external', {
templateUrl: 'path/to/dummy/template',
controller: 'external'
})
// Controller
.controller('external', ['$window', function ($window) {
$window.location = 'http://www.google.com';
}])
I imagine that you could extend this using $routeParams or query strings to have one controller handle all "external" links.
As I said, neither of these solutions are very satisfactory, but if you must get this working in the short term, they might help.
On a side note, I would really like to see Angular support rel=external for this type of functionality, much like jQueryMobile uses it to disable ajax page loading.
To add to Dragonfly's answer, a best practice I have found to limit the number of target="_self" attributes is to never put the ng-app attribute on the body tag. By doing that you are telling angular that everything within the body tags are a part of the angular app.
If you are working within a static wrapper that should not be affected by angular, put your ng-app attribute on a div (or other element) that surrounds only the location your angular app is going to be working in. This way you will only have to put the target='_self' attribute on links that will be children of the ng-app element.
<body>
... top markup ...
<div ng-app="myApp">
<div ng-view></div>
</div>
... bottom markup ...
</body>
In your routes try:
$routeProvider.otherwise({})