On Github dpashkevich / pres-lucid-angular
Dmitry Pashkevich
We're hiring!www.golucid.co
AngularJS is a new, powerful, client-side technology that provides a way of accomplishing really powerful things in a way that embraces and extends HTML, CSS and JavaScript
^ Evolution of existing Web Standards
* actually, it’s MVVM (Model-View-ViewModel)**
** actually, it’s Model-View-Whatever
<context-menu menu-name="context-menu-options"> <context-item ng-repeat="option in options" item-click="combo.selectedIndex = $index"> {{option.label}} </context-item> </context-menu>
Your name: <input type="text" ng-model="firstName"> <p>Hello, {{firstName}}!</p> <!-- That's it! No JavaScript written here! -->
$routeProvider. when('/', { templateUrl: '/view/MainView.html', label: 'Admin' }). when('/users', { templateUrl: '/view/UsersView.html', label: 'Users' }). when('/users/create', { templateUrl: '/view/CreateUsersView.html', label: 'Add New' }) // …
<a href="#/users/create">New user</a>
// Define account service var AccountService = function() { // account service constructor body... }; AccountService.prototype.getAccount = function() { // code for getting account... }; // register it with Angular: TeamApp.service('accountService', AccountService);
// We need the account service // in our apps controller! var AppsController = function(accountService, samlService, gappsService) { // controller's constructor body... var account = accountService.getAccount(); }
<!-- Development --> <script src="/controller/LicensingController.js"></script> <script src="/service/RestService.js"></script> <script src="/model/UserRole.js"></script> <script src="/model/User.js"></script> <script src="/service/UserService.js"></script> <script src="/model/License.js"></script> <script src="/model/LicenseRequest.js"></script> <script src="/model/Consumer.js"></script> <script src="/model/Saml.js"></script> <script src="/model/GAppsDomain.js"></script> <script src="/model/Account.js"></script> ...
<!-- Production --> <script src="/teamAdmin.js"></script>
/** * @constructor * @param {lucid.services.RestLink} userLink */ lucid.team.model.User = function(userLink) { this.selfLink = userLink; /** * @type {?string} */ this.username = null; /** * @type {?string} */ this.email = null; /** * @type {?Date} */ this.created = null; } /** * @param {string} productName * @return {angular.$q.Promise} */ lucid.team.model.User.prototype.getDocuments = function() { return lucid.team.model.UserDocuments.getUserDocuments(this); }
{ "uri": "https://localhost/accounts/2", "name": "My Team Name", "owner": "https://localhost/accounts/2/owner", "size": 54, "users": "https://localhost/accounts/2/users", "groups": "https://localhost/groups?accountId=2", "roles": "https://localhost/userRoles?account=2", "metadata": "https://localhost/accounts/2/metadata", "created": "2014-06-23T17:30:53Z", "updated": "2014-07-18T17:58:34Z" }
AccountService.prototype.accountUsers = function() { return this.getAccount() .then(function(account) { return account.users.get(); } ); } RoleService.prototype.assignUserRole = function( userRow, roleName) { return userRow.user.roles.post({ 'role': this.getRoleID(roleName) }); }
<section class="filters-container" id="filtersPanel"> <h2>Products & Users</h2> <combo-box model="currentProductFilter" options="productFilterOptions"> </combo-box> <combo-box model="currentLicenseFilter" options="licenseFilterOptions"> </combo-box> </section>
.component-combo-box { .component-pill-with-text; .box-sizing(border-box); line-height: 18px; &-primary-gray { .component-combo-box-variant( @component-primary-gray, @component-primary-gray-hover ) } &-secondary-gray { .component-combo-box-variant( @component-secondary-gray, @component-secondary-gray-hover } ... }