Создание JavaScript-приложения следующего поколения с Aurelia

При создании любого приложения с несколькими страницами ядром приложения является маршрутизатор, и Aurelia ничем не отличается. Давайте изменим наш файл app.js , чтобы он стал основным модулем нашего приложения. Он будет отвечать за определение и настройку маршрутизации.

 import {Router} from "aurelia-router"; export class App { static inject() { return [Router]; } constructor(router) { this.router = router; this.router.configure(config => { config.title = "Reddit"; config.map([ {route: ["", "funny"], moduleId: "funny", nav: true, title: "Funny Subreddit"}, {route: "gifs", moduleId: "gifs", nav: true, title: "Gifs Subreddit"} ]); }); } } 

Итак, что мы здесь сделали?

Первая строка ( import {Router} from "aurelia_router" ) импортирует сам маршрутизатор с использованием синтаксиса импорта модуля ES6.

Затем в классе App у нас есть статическая функция inject . Те из вас, кто знаком с AngularJS и не только уже знают о внедрении зависимостей . Функция inject определит, посредством внедрения зависимостей, какие параметры будут доступны в нашей функции конструктора. В этом случае будет предоставлен один параметр, и это наш маршрутизатор. Вы можете видеть, что мы изменили функцию конструктора, чтобы принять этот новый параметр.

Внедрение зависимостей является мощным средством, поскольку оно обеспечивает слабую связь модулей и повышает поток управления до уровня, означающего, что мы можем поменять эти зависимости во время тестирования или позже, когда они будут обновлены.

Теперь, когда у нас есть маршрутизатор, доступный в конструкторе нашего класса, мы можем использовать его для настройки маршрутов.

Прежде всего, мы устанавливаем маршрутизатор как свойство самого класса с помощью this.router = router; , Это соглашение Aurelia и необходимо для работы. Обратите внимание, что наименование важно в этом случае.

Во-вторых, мы настраиваем наши маршруты с помощью объекта config предоставленного нам в функции обратного вызова this.router.configure . Мы устанавливаем свойство title которое будет использоваться для задания заголовка наших страниц. Мы также передаем список определений маршрутов в функцию config.map .

Каждое определение маршрута имеет следующий шаблон:

 { route: ["", "foo"], // Activate this route by default or when on /foo moduleId: "foo", // When active, load foo.js and foo.html (module) nav: true, // Add this route to the list of navigable routes (used for building UI) title: "Foo" // Used in the creation of a pages title } 

Итак, в нашем случае у нас есть две страницы, которые мы можем посетить на /#/funny и /#/gifs , с /#/funny выступающей в качестве нашей страницы по умолчанию благодаря списку ["", "funny"] из двух схемы маршрутов.

Нам также потребуется обновить app.html чтобы он работал как файл макета нашего приложения.

 <template> <a href="/#/funny">Funny</a> <a href="/#/gifs">Gifs</a> <router-view> </router-view> </template> 

Вы видите пользовательский элемент <router-view></router-view> ? Это еще одна встроенная часть функций Аурелии. Вы можете думать об этом как о директиве AngularJS или просто как о веб-компоненте. Представление, связанное с текущим маршрутом, будет автоматически загружено в этот элемент.

Далее нам нужно определить два модуля: funny и gifs .

Написание наших страниц модулей

Модуль «Забавный»

Мы начнем с funny а затем скопируем его в качестве основы для gifs .

Создайте файл /src/funny.js со следующим содержимым:

 import {HttpClient} from 'aurelia-http-client'; export class Funny { // Dependency inject the HttpClient static inject() { return [HttpClient]; } constructor(http) { this.http = http; // Assign the http client for use later this.posts = []; this.subreddit_url = "http://reddit.com/r/funny.json"; } loadPosts() { // Aurelia's http client provides us with a jsonp method for // getting around CORS issues. The second param is the callback // name which reddit requires to be "jsonp" return this.http.jsonp(this.subreddit_url, "jsonp").then(r => { // Assign the list of posts from the json response from reddit this.posts = r.response.data.children; }); } // This is called once when the route activates activate() { return this.loadPosts(); } } 

Также создайте /src/funny.html следующим образом:

 <template> <ul class="list-group"> <li class="list-group-item" repeat.for="p of posts"> <img src.bind="p.data.thumbnail" /> <a href="http://reddit.com${p.data.permalink}"> ${p.data.title} </a> </li> </ul> </template> 

Модуль «Gifs»

Давайте просто скопируем наши funny.js и funny.html в src/gifs.js и src/gifs.html соответственно. Нам нужно немного подправить содержимое gifs.js

 import {HttpClient} from 'aurelia-http-client'; export class Gifs { static inject() { return [HttpClient]; } constructor(http) { this.http = http; this.posts = []; this.subreddit_url = "http://reddit.com/r/gifs.json"; } loadPosts() { return this.http.jsonp(this.subreddit_url, "jsonp").then(r => { this.posts = r.response.data.children; }); } activate() { return this.loadPosts(); } } 

Теперь вы сможете посетить localhost:9000/#/gifs чтобы увидеть список gif-постов и их ссылок.

Улучшения нашего макета

Мы можем внести несколько улучшений в наш шаблон макета, используя маршрутизатор Aurelia.

Помните свойство nav:true мы установили ранее в нашей конфигурации маршрута? Что он делает, так это добавляет маршрут в список, который мы можем перебрать в нашем представлении для построения динамической навигации. Давайте сделаем это сейчас.

Обновите содержимое app.html следующим образом:

 <template> <div class="container"> <ul class="nav navbar-nav navbar-fixed-top navbar-inverse"> <li repeat.for="navItem of router.navigation" class="${navItem.isActive ? 'active' : ''}"> <a href.bind="navItem.href"> ${navItem.title} </a> </li> </ul> <router-view></router-view> </div> </template> 

Вывод

Ну, вот и все! Ваше первое приложение Aurelia. Я очень взволнован будущим Аурелии, так как думаю, что он чистый и понятный. Более того, с помощью ES6 он сохраняет все в многократно расширяемых модулях. В будущих уроках я расскажу, как мы можем абстрагировать дублирование между модулями Gifs и Funny, а также некоторые другие улучшения и дополнения к нашему клиенту Reddit. Я хотел бы знать, как проходит ваша первая попытка разработки приложений с Aurelia!

Полное приложение, которое мы создали в этой статье, можно найти здесь.