Cześć.

Potrzebuję pomocy i rady bo nie potrafię sam tego ogarnąć.
Zaczynam z angular i chcę zrobić coś takiego:

Strona podzielona na 2 części, z lewej zadania, z prawej edycja wybranego zadania.
Jeśli nie jest żaden wybrany to np. przycisk dodaj:

(opisy na obrazkach)




Tak samo jak działa to na asana.com

Zrobiłem tak:

[HTML] pobierz, plaintext 
...
$stateProvider.
      state('home', {
            url: "",
            views: {
                "view-tasks": {
                    templateUrl: 'app/template/tasks.html',
                    controller: 'TasksController'
                },
                "view-task": {
                    templateUrl: app/template/task.html',
                    controller: 'TaskController'
                }
            }
        }).
      state('task', {
            url: "/task/:id",
            views: {
                "view-tasks": {
                    templateUrl: 'app/template/tasks.html',
                    controller: 'TasksController'
                },
                "view-task": {
                    templateUrl: 'app/template/task.html',
                    controller: 'TaskController'
                }
            }
        })
    }]);
...
[HTML] pobierz, plaintext 

i to działa ale wtedy zmienia się link i lewe strona tak jakby zaczytuje sie na nowo (a tam będą np. wyszukane zadania itp więc chciałbym tego uniknąć).
Tzn chciałbym aby zadanie otwierało się ng-click="openTask(id)" ale wtredy nie potrafię tego wrzucić do controlera tak aby trzymać porządek...

Proszę o pomoc i ew. przykłady. Jak to się powinno zrobić.
Podkreślę: chcę aby lewa strona przy edycji nie była ruszana - tam będą np. zadania z projektów, wyszukane itp.

Więc tak:

stwórz sobie jakiś abstract state (główny, app/home, cokolwiek)

[JAVASCRIPT] pobierz, plaintext 
			.state('app', {
				abstract: true,
				url: '',
				templateUrl: "/views/app.html"
			})
[JAVASCRIPT] pobierz, plaintext 

[HTML] pobierz, plaintext 
<!-- jakis html -->
<div>
<div class="left" ui-view="left"></div>
<div class="right" ui-view="right"></div>
</div>
<!-- jakis html -->
[HTML] pobierz, plaintext 

Dalej idąc, zrób sobie state, który trzyma stan 0 czyli taki stan na którym tylko prezentujesz widok

[JAVASCRIPT] pobierz, plaintext 
			.state('app.base', {
				url: '^/',
				views: {
					'left@app': {
						controller: 'BaseLeftController as vm',
                                                template: '/views/pages/base-left.html'
					}
				}
			})
[JAVASCRIPT] pobierz, plaintext 

Potem stwórz sobię state który będzie odpowiadał za akcję (kontroler może być dynamiczny!)

[JAVASCRIPT] pobierz, plaintext 
			.state('app.base.action', {
				url: '^/:id/:type',
				views: {
					'right@app': {
						controllerProvider: ['$stateParams', function ($stateParams) {
                                                        var type = $stateParams.type.charAt(0).toUpperCase() + $stateParams.type.slice(1);
							return 'SomeController' + $stateParams.type + ' as vm';
						}],
                                                template: '/views/pages/edit-right.html'
					}
				}
			})
[JAVASCRIPT] pobierz, plaintext 

Dzięki temu, zawartość LEFT się nie zmienia, tj nie regeneruje się podczas przechodzenia do state'a action

--Edit

No i pamiętaj o resolve

Dziękuje. Sprawdzę dopiero jutro bo zaraz wyjeżdżam.

Resolve - proszę o przypomnienie mi (dopiero zaczynam ).

Tutaj