Add demo of NOT using a controller/view

[ProLoser]

I was talking to @nateabele and saw this thread: https://groups.google.com/forum/?hl=en#!msg/angular-ui/Hh7cWNKbgg4/sDRxOVt1KKUJ and thought you guys should perhaps see if you can add a demo on using the statemachine WITHOUT actually bringing in another view.

I know a nate and others wanted to use the state machine to fade in/out a modal window, not necessarily bring in a new controller or view. I was discussing with nate that you could probably do this using the transitionInto and transitionFrom callbacks (not that I remember what they are exactly) to do this potentially.

Do you guys think you could add a demo of this? I mean aside from the rest of the docs cleanup that's badly needed lol.

[timkindberg]

What's wrong with the docs? Other than some things that are missing?

On Thu, May 16, 2013 at 2:54 PM, Dean Sofer [email protected]:

I was talking to @nateabele https://github.com/nateabele and saw this
thread:
https://groups.google.com/forum/?hl=en#!msg/angular-ui/Hh7cWNKbgg4/sDRxOVt1KKUJand thought you guys should perhaps see if you can add a demo on using the
statemachine WITHOUT actually bringing in another view.

I know a nate and others wanted to use the state machine to fade in/out a
modal window, not necessarily bring in a new controller or view. I was
discussing with nate that you could probably do this using the
transitionInto and transitionFrom callbacks (not that I remember what they
are exactly) to do this potentially.

Do you guys think you could add a demo of this? I mean aside from the rest
of the docs cleanup that's badly needed lol.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/133
.

Thanks,

Tim Kindberg

[ProLoser]

I have found them to be a bit complicated and a little confusing, but then again I haven't looked at them in-depth. Ideally I would like something that I can skim in 10-20 lines and immediately implement. You should not have to read 4 or 5 pages of documentation before you even see code samples or to get started. Successful projects say:

Are you as dumb as a mossy stump?
Copy this: <script> ...</script>
Paste here: ...
Tweak this: someOptions: { someValue }
TAADAA!

Secondly, I think you guys need to relocate the docs to gh-pages or at the very least add some more information and links to the existing gh-pages. It's difficult to jump around at the moment.

[ksperling]

I guess demonstrating how to do a modal could be a good addition to the existing sample -- I don't think we need a complete stand-alone sample for every individual use case.

In terms of how to implement the modal -- one way is obviously to use $dialog from ui-bootstrap, but another option would be to have a < div ui-view="modal"> in the root template somewhere and simply loading the view into that (the template would have to include the necessary scaffolding for the dialog / overlay styling in that case).

Another interesting idea would be to allow things other than a ui-view to be the target of a view defined in a state. $dialog could register itself as a target with a (yet to be defined) $viewProvider.

[ProLoser]

Not EVERY use case, but at least one example of standalone.

For now I was talking to @nateabele about just leaving an empty <ui-view> on the page but really hooking into the transitions. It doesn't have to be elegant right now, just work.

[nateabele]

Guys, just as a point of reference, here's some example code I extracted from an app I did recently that combined the ui-router with ui-bootstrap's $dialog:

.state("items.add", {
    url: "/add",
    onEnter: function($stateParams, $state, $dialog, $resource) {

        var Item = $resource(...);

        $dialog.dialog({
            keyboard: true,
            templateUrl: "items/add",
            backdropClick: false,
            dialogFade: true,
            controller: ['$scope', function($scope) {

                angular.extend($scope, {
                    title: "Create new item",
                    button: "Add",
                    campaign: new Item(),
                    $stateParams: $stateParams,
                    $state: $state,
                    save: function() {
                        var self = $scope;

                        this.item.$save(function() {
                            self.$emit('items.refresh');
                            $state.transitionTo('items');
                        });
                    }
                });
            }]
        }).open().then(function(result) {
            if (!result) {
                return $state.transitionTo("items");
            }
        });
    }
});

[timkindberg]

@ProLoser said:

You should not have to read 4 or 5 pages of documentation before you even see code samples or to get started.

Oh brother, I'm just looking at the docs now and shaking my head. I bet 90% of devs fall asleep before they get through our "Quick" Overview. At the time we were just trying to put more of a proposal together for the core team, so we were ok with very technical babble. Now that we seem to be trying to appeal to the general public I am looking at cleaning this up, as you recommended.

I'm going to remove Goals and Important Concepts, I think they are self evident. Then I will move The Components and Backwards Compatibility to the bottom of the In-Depth Guide. Then I will add a real Quick Overview!

[timkindberg]

Oh I also added @nateabele's modal example to the FAQ wiki. Thanks @nateabele!

[timkindberg]

Alright, not sure how great I did, but I cleaned things up a tad.

The main README is updated with clearer Main Features and a Quick Start of sorts—though ui-router has no fully effective quick start, its too complex, it's not a directive that you just drop in and it works. But now there's at least something to get people started. Also now the In Depth Guide jumps right into the code part, so it shouldn't scare people away as quickly as the four pages of technical babble from before.

I think ultimately @ProLoser you are right that we'll need to move our wiki/docs to gh-pages because we really need to show code examples with live demos for many of the features and the gh-pages lets us use those HTML | JS | CSS tabbed code examples that are really nice.

[timkindberg]

Why isn't my code from the Quick Start working??? http://plnkr.co/edit/JrEbX8dhwATgCTvovoO4?p=preview

[paullryan]

@timkindberg Your app name in html doesn't match your defined app should be myapp. Add ui.compat as a dependency of myapp and remove the ng-controller from html. Lastly add files for route1.viewB.html, route2.viewA.html and route2.viewB.html.

Working plunk http://plnkr.co/edit/LavkYp1f38n9oe9VxCFh?p=preview

[nateabele]

Can we please avoid using ui.compat, especially in the main demo? I spoke with @timkindberg about this last night, and we both agreed that referencing legacy APIs when we're trying to teach people something new is confusing & counterproductive. This has been confirmed in conversation with two separate people trying to use ui-router.

On May 23, 2013, at 0:58, Paul Ryan [email protected] wrote:

@timkindberg Your app name in html doesn't match your defined app should be myapp. Add ui.compat as a dependency of myapp and remove the ng-controller from html. Lastly add files for route1.viewB.html, route2.viewA.html and route2.viewB.html.

—
Reply to this email directly or view it on GitHub.

[timkindberg]

Thanks @xmltechgeek! Why do I need ui.compat in that plunk anyway?

[nateabele]

@timkindberg You don't. If you change 'ui.compat' to 'ui.state', everything works identically.

[paullryan]

Sorry I was mistaken about the ui.compat vs ui.state, however your original had no dependency (either to the legacy or new dependency) which is part of why it was breaking.

[timkindberg]

You guys rock... I think the quick start on the main Readme is pretty good now (for now). It links to the working plunker as well. Thanks for the help.

[nateabele]

@xmltechgeek No worries, thanks for the clarification. @timkindberg Awesome job, the new organization looks great. I'll try to block off some time to start generating more content.

[ksperling]

Thanks @timkindberg !

My bad for putting ui.compat into the sample... sort of a kitchen sink type approach to be able to try out every single feature in the same app. Actually it's more of a dev/debug app than a real sample :(

Maybe we can do the samples as plunkrs that people can fork to play around with them? Even neater would be if we could maintain additional samples inside the git repo and have some way to "fork" a sample into a plunkr, instead of having to maintain those manually.