AngularUI-Router ile Zincirlenmiş Ekranlar Oluşturmak
1 like•1,438 views
AngularJS Bootcamp'te yaptığım AngularUI-Router ile Zincirlenmiş Ekranlar Oluşturmak adlı sunumum.
AngularUI-Router ile Zincirlenmiş Ekranlar Oluşturmak
- 1. UI-Router ile Zincirlenmiş Ekranlar Oluşturmak Ömer Büyükoğlu Web Team Lead Twitter: Buyomer GitHub: Buyomer 2014
- 2. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler AngularUI Router İle Zinriclenmiş Ekranlar Oluşturmak 2
- 3. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler AngularUI Router Zincirlenmiş Ekranlar Oluşturma Neden AngularUI Router ortaya çıktı? 3
- 4. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler 4 ngRoute Templating Navigation index.html Sidebar Content
- 5. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler 5 <ng-view></ng-view> ngRoute İç İçe Sayfalar index.html <ng-include src=“‘navbar.html’"></ng-include> <ng-include src= “‘sidebar.html’”> </ng-include>
- 6. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler 6 1 2 13 14 15 16 17 18 19 20 21 21 23 30 index.html my_project <!DOCTYPE html> <html src=“myList”> … // Navigation with ngInclude <ng-include src=“‘navbar.html’”></ng-include> // Sidebar with ngInclude <ng-include src=“‘sidebar.html’”></ng-include> // Content ngView <ng-view></ng-view> … </html> ngRoute İç İçe Sayfalar js index.html
- 7. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler 7 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ngRoute İç İçe Sayfalar app.js my_project $routeProvider .when(‘/list/:id’, { templateUrl: ‘list.html’, controller: ‘ListCtrl’, }); js app.js views index.html
- 8. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler 8 <ng-view></ng-view> ngRoute İç İçe Sayfalar index.html <ng-include src=“‘navbar.html’"></ng-include> <ng-include src= “‘sidebar.html’”> </ng-include> list.html
- 9. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler 9 <ng-view></ng-view> ngRoute İç İçe Sayfalar index.html <ng-include src=“‘navbar.html’"></ng-include> <ng-view></ng-view> ? list.html
- 10. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler Angular Router ile birden fazla <ng-view> kullanılamaz! 10 ngRoute İç İçe Sayfalar
- 11. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler 11 ngRoute vs ui.router ngRoute ui.router • Url odaklı geçişler • Tek bir ng-view • İç içe view eklemek zor ve problemli • State odaklı geçişler • Çoklu ui-view • İç içe view eklemek için yaratılmış AngularUI Router
- 12. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler 12 AngularUI Router Router 11 12 13 14 15 16 17 18 19 20 21 22 23 24 app.js my_project $routeProvider .when(‘/list’, { templateUrl: ‘list.html’, controller: ‘ListCtrl’, … }); $stateProvider .state(‘list’, { url: ‘/list’ templateUrl: ‘list.html’, controller: ‘ListCtrl’, … }); js app.js index.html
- 13. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler 13 <ng-view></ng-view> AngularUI Router İç İçe Sayfalar index.html <ng-include src=“‘navbar.html’"></ng-include> <ng-include src= “‘sidebar.html’”> </ng-include>
- 14. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler AngularUI Router <ng-include src=“‘navbar.html’"></ng-include> <ui-view name=“content”></ui-view> 14 İç İçe Sayfalar template.html <ui-view name= “sidebar”> </ui-view>
- 15. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler 15 AngularUI Router 1 2 3 11 12 13 14 15 22 index.html my_project <!DOCTYPE html> <html ng-app=“myList”> … // Default ui.view <ui-view></ui-view> … </html> İç İçe Sayfalar js views index.html
- 16. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler 16 AngularUI Router 1 2 3 4 5 6 7 8 template.html my_project // Navigation with ngInclude <ng-include src=“‘navbar.html’”></ng-include> // Sidebar ui.view <ui-view name=“sidebar”></ui-view> // Content ui.view <ui-view name=“content”></ui-view> İç İçe Sayfalar js views template.html sidebar.html content.html index.html
- 17. #vngrsbootcamp 17 AngularUI Router app.js my_project $stateProvider .state(‘root’, { templateUrl: ‘template.html’, }); }); js app.js views index.html 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 İç İçe Sayfalar .state(‘root.list’, { url: ‘/list/id’ views: { 'sidebar': { templateUrl: "sidebar.html", }, 'content': { templateUrl: “list.html”, controller: “ListController", } }
- 18. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler AngularUI Router İç İçe Sayfalar http://www.sitename.com/list/14 <ui-view name=“navbar”></ui-view> 18 <ui-view name= “sidebar”> </ui-view> <ui-view name=“content”></ui-view> sidebar.html list.html
- 19. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler 19 AngularUI Router State Yönlendirme 1 2 controller.js my_project $state.go("root.home") js app.js controller.js views index.html
- 20. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler 20 AngularUI Router State Yönlendirme 1 2 3 4 5 6 7 8 template.html my_project // State yönlendirme <a ui-sref=“home”></a> // Parametre ile state yönlendirme <a ui-sref=“root.list({id: listId})”></a> js views template.html sidebar.html content.html index.html
- 21. #vngrsbootcamp AngularJS'in Ötesinde Web Uygulaması için Çözümler AngularUI Router Zincirlenmiş Ekranlar Oluşturma Demo 21
- 22. Teşekkürler Ömer Büyükoğlu Web Team Lead Twitter: Buyomer GitHub: Buyomer SlideShare: Buyomer 2014