I'm using UI-Router to mange my routing on my application.
One item I've hit a snag on it with my menu which is the main view that the controllers will use.
for example I have a home link that should be
index.htm#/home/3
index.htm#/settings/3
3 is the companyId
but it seems that I can't access it that way. Does anyone have a suggestion as to how I could make that work?
Parent states should not be accessing the parameters of child states, but there is a little bit of magic that ui-router provides that might help. This is ui-sref-active. This directive will add css classes to html elements that have a ui-sref directive and that state is currently active. I think this would be sufficient to solve the problem that you have.
Related
I have a login page, which is just a simple form in the center of the page with no header, footer or sidebar. My regular pages will have a sidebar, header and footer (these 3 are directives). I call all my templates in ng-view, depending on the routes.
I want to place my directives outside ng-view since they'll be common across all the pages except login and I don't want them to be fetched on every URL change.
How do I have a login page without the 3 directives?
I created a small plunk to offer you a solution to your issue.
this is the base of the solution:
<ng-include src="appVm.templatetoShow">
</ng-include>
in the Appcontroller :
function AppController() {
this.templatetoShow = 'login.html';
}
I included a couple of templates that gets loaded when needed.
After some rereading, I made a new plunk to show you how this can be done.
The hiding part is simple, just add some CSS into the mix, and you won't see
anything from your main page.
Added some cloaking to prevent FOUC, and wrote a couple of lines to show
an authentication system.
I introduced an User service that you can inject wherever you need the users
data.
Is this more in what you wanted?
I dont know if I get what You really want to do, but i would suggest to use ng-if
such ng-if may look look like this:
<div ng-if="notLogin"> here is Your navbar contents. Directies, anything You need </div>
and then in controller -
$scope.notLogin = $location.path() !== "/login"
If You have directives for footers, navbars etc, i think You can do that in directive controller and hide all content of directive there, so directive will be empty.
You may also use global controller to do that job and wrap those directives in divs like in my example. Doing it in directives looks cleaner though.
Hope its what You need.
you can use ng-if to conditionally display/hide them on UI. Please note that ng-if is different than ng-switch. The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM.
More details - https://docs.angularjs.org/api/ng/directive/ngIf
Qucik Steps -
create a shell page and set the header, footer, sidebar and a view
use ng-if={{User.isLoggedin}} for header, footer, sidebar and login
set User.isLoggedin to false when user is not logged in
Set it to true once user loged in
Directives are shared across all views if you use the same controller however using different controllers is not adviced either. what makes you uncomfortable with that ?
have a look at this post:
https://stackoverflow.com/a/16213055/1218551
best wishes:)
I'm fairly new to angular, after using a video tutorial and reading some documentation, I decided to rebuild an old app of mine as an example with angularjs.
So this app has a table showing some data. It has a form underneath which helps you modify the data from the list. You have a button on each line which allows you to edit the line, it then fill all the fields in the form and you can then save or cancel your changes.
I made a controller to handle the list, it works fine, it gets a json from http.
I used ng-click on my edit button to trigger a function in this controller, giving it the whole object it's supposed to edit.
I made a controller to handle the form in which the edit should take place and I don't really found a 'non-hacky' way to pass the data from the list controller to the form controller.
So, my question is : what is the best practice and/or the common way to get this data from my list controller to my form controler ?
It depends how you are using the form controller. If it's being used within a template using ng-controller attribute, then this controller has access to parent scope, so you can work with list controller's data. (although note some scope-inheritance quirks solved by "dot notation", explained nicely by egghead.io: https://egghead.io/lessons/angularjs-the-dot)
If you're launching your edit form in a another url (e.g. /items/2/edit) and handle it in a routing configuration, then you can use resolve property to pass any data to the controller: $routeProvider docs.
You can pass the entire object as parameter
<row ng-repeat="theModelInRow in modelList" ng-click="edit(theModelInRow)">
if form controller isn't a nested controller of list controller on view, then you can use rootScope.
I am trying to write a directive that will format content for modal display (using Bootstrap classes) if given a certain parameter, and as standard view if not. I have this working for a view loaded directly, toggling on a URL param (?modal) available to $routeParams and/or $location.
I want to use this toggle-able template as a "pipe" for other templates. However, the intended content URL will never be the visible URL when used as a modal. I can't get it working when loading the view with $modal.open or ngInclude, because $routeParams/$location has data for the including page, not the included one.
I put this in a Plunker, but because Plunker also doesn't provide the URL param, the modal view isn't available.
Does Angular provide a means to change the template or templateUrl much later in the process? For example, could I use $scope, either from a controller or on the directive, itself?
Clarification: The goal here is to have one template/partial for each component, with that template used either as a standalone or a modal, based on some switch. The _modal and _alone partials in the Plunker convert the component template into the desired state.
$modal.open takes a single object parameter one of the properties of this config parameter is templateUrl
http://angular-ui.github.io/bootstrap/
So you can create the config object and open the modal with any template you need.
Dan Wahlin uses this technique for a dialog service and then in this article goes on to demonstrate a full modal service
http://weblogs.asp.net/dwahlin/building-an-angularjs-modal-service
There were a couple of issues with your code:
First of all the use $routeParams if you don't use ngRoute's $routeProvider.
In your case, it might be easier to use $window.location.search (and compare it against ?modal).
That said, in order to properly display a Bootstrap modal, you need Bootstrap's JS file (which in turn requires jQuery) and you also need to create the modal (e.g. by calling $('.modal').modal()).
Take a look at this modified demo.
For better intergration with Angular's components, you might want to look into UI Bootstrap.
I am trying to get the URL router working for my app but for some reason it will not link the files.
I have created a simple plnkr to demonstrate the issue ...
can someone please assist
http://plnkr.co/edit/XQs2vP4vtqnBWGKqmJZz
Thanks
There are some misunderstandings:
You did not specify a ui-view to render to state into
You configured the states as named views, which makes only sense if you need more than one ui-view in parallel (nesting views is always possible)
How to fix it
Use <div ui-view></div> in your views for normal views and use <div ui-view="content"></div> for named views (content is a custom name which you may choose at will).
Also, you can use the ui-sref attribute to link to specific states which is better practice than setting the href manually. In all demos below i showed both ways.
Note that normal views have a simpler state definition syntax:
.state('person', {
url: '/persons',
templateUrl: 'list1.html',
controller: 'employeeCtrl'
})
Demos
Demo with normal views (for single views)
Demo with named views (for multi-views)
In both cases you can nest views as a further exploration of the possibilites of ui-router (which makes it way superior to default angular routing):
Demo with normal views and nesting
Demo with named views and nesting
Unlimited possibilities.
i am making a test with protractor for my angularjs app
and i came accross the following problem
what i want to do is :
browser.executeScript('$scope.$apply')
i want to do this so that my screen updates/renders so i can get the values on screen
only when i do this it says : $scope is not defined
if have also tried multiple javascript render ways who also failed ,but i am not sure if i have used the right methods for that...
does anybody has the same problem or know how to fix this?
Perhaps you should be using an ng-view directive in your container markup to render html snippets or partials within your index page. Take a look at what ng-view can do (http://docs.angularjs.org/api/ngRoute.directive:ngView) :-)