Created
August 8, 2016 10:08
-
-
Save Vallabharayudu/e72de03b490362be8c912798646ee2fd to your computer and use it in GitHub Desktop.
Sample Aurelia App routing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <compose view="nav-bar.html"></compose> | |
| <div class="page-host"> | |
| <router-view></router-view> | |
| </div> | |
| <style> | |
| .page-host{ | |
| margin-top:60px; | |
| display:block; | |
| } | |
| </style> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class App { | |
| configureRouter(config, router){ | |
| config.title = 'Aurelia'; | |
| config.map([ | |
| { route: ['','welcome'], name: 'welcome', moduleId: './welcome', nav: true, title:'Welcome' }, | |
| { route: 'Bindable', name: 'Bindable', moduleId: './Bindable', nav: true, title:'Bindable Custom Element' } | |
| ]); | |
| this.router = router; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <require from="name-tag.html"></require> | |
| <form class="form-inline"> | |
| <div class="form-group"> | |
| <label>First name</label> | |
| <input type="text" class="form-control" value.bind="firstName"/> | |
| </div> | |
| <div class="form-group"> | |
| <label>Color</label> | |
| <input type="text" class="form-control" value.bind="color" /> | |
| </div> | |
| </form> | |
| <name-tag color.bind="color">${firstName}</name-tag> | |
| <name-tag color.bind="color">${firstName}</name-tag> | |
| </template> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class Bindable{ | |
| constructor(){ | |
| this.firstName = 'vallabha Rayudu'; | |
| this.color='#0183d7'; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Aurelia</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| </head> | |
| <body aurelia-app> | |
| <h1>Loading...</h1> | |
| <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script> | |
| <script> | |
| require(['aurelia-bootstrapper']); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template bindable="color" css="background: ${color}"> | |
| <style> | |
| name-tag{ | |
| display:block; | |
| } | |
| </style> | |
| <div class="header"> | |
| <h3>Hello</h3> | |
| <h4>My Name is</h4> | |
| </div> | |
| <div class="body"> | |
| <content></content> | |
| </div> | |
| <div class="footer"> | |
| </div> | |
| </template> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <h1>${message}</h1> | |
| SirName: | |
| <input value.one-time="Sirname" /> | |
| <br /> | |
| First Name: | |
| <input value.bind="firstName" /> | |
| <br /> | |
| Last Name: | |
| <input value.bind="lastName" /> | |
| <br /> | |
| full name: ${fullName} | |
| <br /> | |
| Friend's name: | |
| <input value.bind="potentialFriend" /> | |
| <button click.trigger="addFriend()">Add Friend</button> | |
| <ul> | |
| <li repeat.for="friend of friends"> | |
| ${friend} | |
| </li> | |
| </ul> | |
| <input type="checkbox" ref="recursive" />Repeat Details usinf checkbox custom element | |
| <app if.bind="recursive.checked"></app> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class welcome { | |
| constructor(){ | |
| this.Sirname='Ikkurthi'; | |
| this.message = 'Welcome to Aurelia!'; | |
| this.firstName = 'Vallabha'; | |
| this.lastName ='Rayudu'; | |
| this.friends= []; | |
| this.potentialFriend = ''; | |
| } | |
| addFriend(){ | |
| if(this.potentialFriend){ | |
| this.friends.push(this.potentialFriend); | |
| } | |
| this.potentialFriend=''; | |
| } | |
| get fullName() { | |
| return `${this.Sirname} ${this.firstName} ${this.lastName}`; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment