AngularUI

Steve Michelotti
http://geekswithblogs.net/michelotti

Agenda

What is AngularUI?
App Skeleton and Backend
UI-Bootstrap
UI-Router
UI-Modules

Agenda

What is AngularUI?
App Skeleton and Backend
UI-Bootstrap
UI-Router
UI-Modules

What is AngularUI?

Open source companion framework(s) to AngularJS

Collection of different tools/libraries
Robust stand-alone modules
Small utilities

Agenda

What is AngularUI?
App Skeleton and Backend
UI-Bootstrap
UI-Router
UI-Modules

App Skeleton and Backend

Bower
Gulp
app folder

Package Management
Build System
Application code

Azure Mobile
Backend as a Service
Services

Demo
App Skeleton and Backend

Agenda

What is AngularUI?
App Skeleton and Backend
UI-Bootstrap
UI-Router
UI-Modules

UI-Bootstrap Why?

Eliminate jQuery
dependency from Bootstrap
(Native AngularJS)
Performance

UI-Bootstrap Components
Responsive
Menu

Dropdown

Tooltip

Popover

Collapse

Tabs

Alert

Modal

Accordion

Typeahead

Datepicker

Timepicker

Demo
UI-Bootstrap

Agenda

What is AngularUI?
App Skeleton and Backend
UI-Bootstrap
UI-Router
UI-Modules

Angular UI Router

Routing framework for

AngularJS
Organize into State Machines
Allows for Nested Views

State

State

$stateProvider.state(contacts, {
url: /contacts,
templateUrl: contacts.html,
controller: ContactsCtrl,
resolve: {
initialData: [api, function(api) {
return api.getContacts();
}]
}
});

3 Ways to Activate a State

URL Parameters

$stateProvider.state(contacts, {
url: /contacts/:contactId,
templateUrl: contacts.html,
controller: ContactsCtrl
});

ui-view

<div ui-view></div>

Nested States/Views

Nested States/Views

$stateProvider
.state(foo, {
abstract: true,
url: /foo
templateUrl: foo.html // must contain <uiview/>
})
.state(foo.bar, {
url: /bar, // will be /foo/bar
templateUrl: bar.html
})
.state(foo.baz, {
url: /xxx, // will be /foo/xxx
templateUrl: baz.html
});

Demo
UI-Router

Agenda

Modules Native

rd Party Dependencies
Modules with 3rd

Demo
UI-Modules

What We Covered

Additional Resources