Aurelia 是下一代的 JavaScript 客户端框架，利用一些简单便利的措施来加强你的创造力。
特性：
前瞻性：采用 ES6 和 ES7 编写，集成很多 Web 组件，无外部依赖
先进的架构
双路数据绑定
可扩展 HTML
路由和 UI 组件
MV* 模式
支持多种语言：ES 6&7、TypeScript、CoffeeScript 等
可测试
基础页面 index.html：
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="jspm_packages/github/twbs/bootstrap@3.3.2/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="jspm_packages/npm/font-awesome@4.2.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="styles/styles.css"> </head> <body aurelia-app> <script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script> System.baseUrl = 'dist'; System.import('aurelia-bootstrapper').catch(console.error.bind(console)); </script> </body> </html>
app.js:
export class Welcome{ constructor(){ this.heading = 'Welcome to the Aurelia Navigation App!'; this.firstName = 'John'; this.lastName = 'Doe'; } get fullName(){ return `${this.firstName} ${this.lastName}`; } welcome(){ alert(`Welcome, ${this.fullName}!`); } }
app.html
<template> <section> <h2>${heading}</h2> <form role="form" submit.delegate="welcome()"> <div class="form-group"> <label for="fn">First Name</label> <input type="text" value.bind="firstName" class="form-control" id="fn" placeholder="first name"> </div> <div class="form-group"> <label for="ln">Last Name</label> <input type="text" value.bind="lastName" class="form-control" id="ln" placeholder="last name"> </div> <div class="form-group"> <label>Full Name</label> <p class="help-block">${fullName}</p> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </section> </template>
