下一代的 JavaScript 客戶端框架：Aurelia
Aurelia 是下一代的 JavaScript 客戶端框架，利用一些簡單便利的措施來加強你的創造力。
特性：
-
Forward-thinking
Written with ES6 and ES7. Integrates with Web Components. No external dependencies except polyfills. Leverage the technology of the future but target today's Evergreen Browsers.
Modern Architecture
Rather than taking the monolithic framework approach, Aurelia is composed of smaller, focused modules. Use them together as a full-featured framework or pick and choose to build a custom solution.
Two-Way Databinding
Our technology enables powerful two-way binding to any object. By using adaptive techniques we can select the most efficient way to observe each property, whether it be through Object.observe, getters and setters, dirty-checking or your own custom mechanism.
Extensible HTML
Aurelia's extensible HTML compiler lets you create custom HTML elements, attach new behaviors to existing elements, and control template generation, all with full support for dynamic loading, databinding and batched rendering.
Routing & UI Composition
Leverage our advanced client-side router with its pluggable pipeline, dynamic route patterns, child routers and asynchronous screen activation. Don't need a router but need dynamic, data-driven UI composition? We do that too.
MV* with Conventions
Who wants to waste time writing tons of configuration code for their MV* architecture? Simply leverage conventions to make constructing your app effortless. Don't like the conventions? Plug in your own or drop them alltogether.
Broad Language Support
Use ES5, ES6, TypeScript, AtScript or CoffeeScript. Aurelia's APIs were carefully designed to be consumed naturally from all of today's popular web programming languages, including support for AtScript annotations.
Testable
By combining ES6 modules with a simple, yet powerful Dependency Injection Container, we make it easy for you to create highly cohesive, yet minimally coupled code, making unit testing a snap.
基礎頁面 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>