Starting with angularjs as a newbie I have created a navigation bar. It has several sub menus. But I am not completely sure what is the best practice to deal with it using angularjs. I would like to keep track of the current selected menu item to make it 'active' and change the rendered template depending on the selection.
I am looking for some examples or some example code, that can be used in production environment.
Sorry for this very generic question, but I hope someone can help me.
Have a look at angular-ui/ui-router. It adds named views and states to your app. You can define "areas" in your main template that, based on the "state" your app is in, display a certain template+controller.
Edit: yes, $location could be enough for a simple application but by the time your one-per-screen controller gets to be 100 lines of $scope.$watch definitions you start realizing you need something more.
Related
For example we have a web app and sometimes we need to hide or show some custom directives or html parts using ng-if/ng-show/ng-hide. What we do, we click on a link "Example Show Link" and our elements appear or disappear.
So, here is the Problem:
When you go to another page/state/controller of course your directive/html part is still visible.
Is there any cool solution to hide this parts?
Except using rootScope or pushing true/false flag in every controller, 'couse there could be a lot of directives and a lot of controller
You can use routes for this, and ui-router is what I think the best one that handles this. When you use routes, only the current states' templates are shown, when you navigate out of the state, its template (together with all the directives in it) are destroyed. It automatically do it for you.
Is there any way to make an ionic modal have a ui router nested state with multiple modal pages?
It sounds like you are describing a wizard, A model that has multiple pages (or steps). Because Ionic and AngularJS go hand in hand with each other you can use some of the pre-built AngularJS components to achieve this, here is a link to a few:
https://github.com/mgonto/angular-wizard
https://github.com/simpulton/angularjs-wizard
There is an ionic wizard plugin, which although it is designed for wizard like steps, will pretty much provide a set of linked modal pages which share state, which should meet your needs.
http://arielfaur.github.io/ionic-wizard/
It also has nice features such as preventing progression in a wizard until fields are filled out etc.
I would recommend not doing that because I have tried it in the past and in the end I realized that it wasn't really practical. What you could do is, add:
ng-include src="'your-template.html'" ng-controller="yourTemplateController">
Now you have a view and a controller associated with it. All that is left to is, make the URL change. This can be done by using location.hash, or setting $stateParams and checking for it using $watch. I hope this helps.
I've started to learn AngularJS but I need some application design hints. Of course I'm not asking about the layout but ... how to design my application and it's controllers in a proper way. I have left sidebar with a menu that is loaded from the web using JSON. That needs a controller. That's fine. It works for me. There's a content box as well in a center of my page that loads some data dynamically. In my opinion it requires another controller.
And now comes my solution, that somehow doesn't look good IMHO. When I click a menu item in my sidebar I'm loading a content. Then I'm passing this data into a Service which emits an Event afterwards to the Second controller (which is responsible for controlling my content in a center of my page). When it receives this event it simply gets previously loaded data from the Service and displays it. It generally works.... but ... I'm pretty sure that's not the proper way of doing this.
I would be grateful for any hints. AngularJS has a really poor documentation and tutorial :(
cheers
EDIT:
OK. That's my basic application using JQuery:
http://greatanubis-motoscore.rhcloud.com/index
And that's the same application I'm converting into AngularJS:
http://greatanubis-motoscore.rhcloud.com/angular/index
No worries, some text is in Polish but... I think it really doesn't matter ;)
Note for the AngularJS version: At the moment the content is a HTML but finally it will load JSON data as the other controllers.
I would go about doing this with angular ui-router. With ui-router you can achieve this in a couple of ways. You can use nested routing to have a base state (Your sidebar menu, header etc.) which will act as your shell page, this can have its own controller as well. You could then define each of those other views as child states of the base state. These child states can also have their own controller/views as well, but they will be sitting inside the base state (both visually, and also inherit $scope properties of the base state) optionally they can have separated URLs themselves, but they don't have to, you can just change states without changing the url, by leaving the URL bit empty when you define different states in your $stateProvider configs. Another way would be to use the multiple named views feature.
I'm diving into the whole "single page application" and Backbone.js (specifically Marionette) stuff. I'm working on a decently complicated application. I'm wondering how you set up the router to handle nested views so the "containing views" are also rendered. For instance let's say I have an Admin section and under that I have a Users section. Under Users I have tabs to "Add User" and "Search Users".
If I've selected "Add User", I imagine my URL has the fragment "#admin/users/add". That routes to a view that has the add user form. However, if you go directly to that URL I want to show that form again, but also the top navigation bar with "Admin" highlighted, the admin specific sidebar with my admin navigation and have "Users" button highlighted. I need the whole HTML page, not just the Add User ItemView.
How to do say when the page first loads (refresh or from a bookmark), to load the html structure and "parent views" as well? Thanks!
This is the way you need to think about the app's behavior:
the controller needs to create view instances and pass in the data they need (models, collections, etc.), and then display the views within the regions
the ONLY thing the router does is is match a URL to a controller action (i.e. "if this URL is entered in the address bar, the application should launch this controller action")
So bascially, this is your problem: you're missing a controller action (e.g. MyApp.AdminApp.Users.New.newUser() which will render the views you want, which you can then call from your router...)
One thing that helps (although not related to the problem you're currently facing), is to always call the navigate method with trigger: false (which is the default). This ensures that your app is behaving properly and that the router is limited to matching URLs to controller actions.
Regarding the menu (with highlighted current entry), I would make it a separate Marionette module (https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.application.module.md), and have a collection of models (that don't get saved on the server) to list your menu entries. That way, you can manage the current entry by setting its model activeattribute to true (and checking that attribute in the view to highlight the current entry).
This is probably a lot to take in at first, but after a few more hours of working with Marionette it will all make sense...
(Shameless plug: I'm writing a book on Marionette that takes you from beginner to fully independent with Marionette. In there, I'll be covering this type of functionality, especially the menu management and how to highlight the current option. If you'd like to check it out, there's a free 55-page sample at http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf and the book (which is still being written) is at https://leanpub.com/marionette-gentle-introduction)
I had the same question a time ago, what I strongly recommend is to get involved with Marionette layouts, collections, composite and collection views, regions and how to display content within templates.
Is not hard as you keep reading tutorials, I recommend reading lostechis.com which is a very educational blog from the creator of Marionette, Derick Bailey, also the Marionette Official website.
This is just about educating yourself doing tests and when some question comes to your mind search it and if not found dont doubt to ask it right here.
For the side bar and some other stuff you can just use JQuery-ui or Twitter bootstrap, it is very easy to integrate them with backbone/marionette views, but you just have to read to achieve that.
Which you luck.
Im making a webview app for iOS & Android using Backbone.js. I'm bit new to Backbone
I have seen some examples where they have used backbone's view template for every section of a particular page/view even if those sections are just static texts or images. I'm not sure if thats the right way to do it. In my opinion one should write a view as a template in HTML only if it's going to dynamically change in its presentation, with the help of variables, etc. Otherwise, the usual structuring of HTML elements is good enough.
Pls provide your inputs.
Thanks.