Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript] Angular - 2 widoki
aras785
post
Post #1





Grupa: Zarejestrowani
Postów: 859
Pomógł: 177
Dołączył: 29.10.2009

Ostrzeżenie: (0%)
-----

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)

(IMG:http://i.stack.imgur.com/lEQJ1.jpg)
(IMG:http://i.stack.imgur.com/606Ev.jpg)

Tak samo jak działa to na asana.com

Zrobiłem tak:

[HTML] pobierz, plaintext 
  1. ...
  2. $stateProvider.
  3.       state('home', {
  4.             url: "",
  5.             views: {
  6.                 "view-tasks": {
  7.                     templateUrl: 'app/template/tasks.html',
  8.                     controller: 'TasksController'
  9.                 },
  10.                 "view-task": {
  11.                     templateUrl: app/template/task.html',
  12.                     controller: 'TaskController'
  13.                 }
  14.             }
  15.         }).
  16.       state('task', {
  17.             url: "/task/:id",
  18.             views: {
  19.                 "view-tasks": {
  20.                     templateUrl: 'app/template/tasks.html',
  21.                     controller: 'TasksController'
  22.                 },
  23.                 "view-task": {
  24.                     templateUrl: 'app/template/task.html',
  25.                     controller: 'TaskController'
  26.                 }
  27.             }
  28.         })
  29.     }]);
  30. ...
[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.
Go to the top of the page
+Quote Post
kpt_lucek
post
Post #2





Grupa: Zarejestrowani
Postów: 428
Pomógł: 77
Dołączył: 10.07.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Więc tak:

stwórz sobie jakiś abstract state (główny, app/home, cokolwiek)
[JAVASCRIPT] pobierz, plaintext 
  1. 			.state('app', {
  2. 				abstract: true,
  3. 				url: '',
  4. 				templateUrl: "/views/app.html"
  5. 			})
[JAVASCRIPT] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <!-- jakis html -->
  2. <div>
  3. <div class="left" ui-view="left"></div>
  4. <div class="right" ui-view="right"></div>
  5. </div>
  6. <!-- 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 
  1. 			.state('app.base', {
  2. 				url: '^/',
  3. 				views: {
  4. 					'left@app': {
  5. 						controller: 'BaseLeftController as vm',
  6.                                                 template: '/views/pages/base-left.html'
  7. 					}
  8. 				}
  9. 			})
[JAVASCRIPT] pobierz, plaintext


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

[JAVASCRIPT] pobierz, plaintext 
  1. 			.state('app.base.action', {
  2. 				url: '^/:id/:type',
  3. 				views: {
  4. 					'right@app': {
  5. 						controllerProvider: ['$stateParams', function ($stateParams) {
  6.                                                         var type = $stateParams.type.charAt(0).toUpperCase() + $stateParams.type.slice(1);
  7. 							return 'SomeController' + $stateParams.type + ' as vm';
  8. 						}],
  9.                                                 template: '/views/pages/edit-right.html'
  10. 					}
  11. 				}
  12. 			})
[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 (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
aras785
post
Post #3





Grupa: Zarejestrowani
Postów: 859
Pomógł: 177
Dołączył: 29.10.2009

Ostrzeżenie: (0%)
-----

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

Resolve - proszę o przypomnienie mi (IMG:style_emoticons/default/tongue.gif) (dopiero zaczynam (IMG:style_emoticons/default/sad.gif) ).
Go to the top of the page
+Quote Post
kpt_lucek
post
Post #4





Grupa: Zarejestrowani
Postów: 428
Pomógł: 77
Dołączył: 10.07.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

Tutaj
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 29.08.2025 - 23:59
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn