Git Product home page Git Product logo

app-contacts's Introduction

Aurelia

License: MIT npm version CircleCI TypeScript Twitter

Backers on Open Collective Sponsors on Open Collective Discord Chat

Aurelia 2

This is the Aurelia 2 monorepo, containing core and plugin packages, examples, benchmarks, and documentation for the upcoming major version of everybody's favorite modern JavaScript framework, Aurelia.

Introduction

Aurelia is a modern, front-end JavaScript framework for building browser, mobile, and desktop applications. It focuses on aligning closely with web platform specifications, using convention over configuration, and having minimal framework intrusion. Basically, we want you to just write your code without the framework getting in your way. ๐Ÿ˜‰

Aurelia applications are built by composing a series of simple components. By convention, components are made up of a vanilla JavaScript or Typescript class, with a corresponding HTML template.

//app.js
export class App {
  welcome = "Welcome to Aurelia";

  quests = [
    "To seek the holy grail",
    "To take the ring to Mordor",
    "To rescue princess Leia"
  ];
}
<!-- app.html -->
<form>
  <label>
    <span>What is your name?</span>
    <input value.bind="name & debounce:500">
  </label>

  <label>
    <span>What is your quest?</span>
    <select value.bind="quest">
      <option></option>
      <option repeat.for="q of quests">${q}</option>
    </select>
  </label>
</form>

<p if.bind="name">${welcome}, ${name}!</p>
<p if.bind="quest">Now set forth ${quest.toLowerCase()}!</p>

This example shows you some of the powerful features of the aurelia binding syntax. To learn further, please see our documentation.

Feeling excited? Check out how to use makes to get started in the next section.

Note: Please keep in mind that Aurelia 2 is still in beta. A number of features and use cases around the public API are still untested and there will be a few more breaking changes.

Getting Started

First, ensure that you have Node.js v8.9.0 or above installed on your system. Next, using npx, a tool distributed as part of Node.js, we'll create a new Aurelia 2 app. At a command prompt, run the following command:

npx makes aurelia

This will cause npx to download the makes scaffolding tool, along with the aurelia generator, which it will use to guide you through the setup process. Once complete, you'll have a new Aurelia 2 project ready to run. For more information on Aurelia's use of makes, see here. If you aren't interested in taking our preferred approach to generating a project, you can also see the examples folder in this repo for pure JIT setups (no conventions) with various loaders and bundlers.

Documentation

You can read the documentation on Aurelia 2 here. Our new docs are currently a work-in-progress, so the most complete documentation is available in our getting started section. If you've never used Aurelia before, you'll want to begin with our Quick Start Guide.

Contributing

If you are interested in contributing to Aurelia, please see our contributor documentation for more information. You'll learn how to build the code and run tests, how best to engage in our social channels, how to submit PRs, and even how to contribute to our documentation. We welcome you and thank you in advance for joining with us in this endeavor.

Staying Up-to-Date

To keep up to date on Aurelia, please visit and subscribe to the official blog and our email list. We also invite you to follow us on twitter. If you have questions, have a look around our Discourse forum. For chat on Aurelia 2, join our new Aurelia 2 community on Discord. If you'd like to join the growing list of Aurelia sponsors, please back us on Open Collective.

License

Aurelia is MIT licensed. You can find out more and read the license document here.

app-contacts's People

Contributors

32graham avatar akaustav avatar ashleygrant avatar ctoran avatar eisenbergeffect avatar jdanyow avatar jeroenvinke avatar jwahyoung avatar peterblazejewicz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

app-contacts's Issues

Update jspm endpoint/registry syntax

jspm 0.15 from March 2015 changed the endpoint/registry configuration commands.
The README.md in this repository mentions executing jspm endpoint config github to configure github access. From 0.15 on, the syntax changed to jspm registry config github.

Contact-manager not building

Hi - I am trying to run the contact-manager on Mac OS 10.12.

I get the following error

au run --watch
/Users/name/a_aurelia_projects/contact-manager/node_modules/babel-core/lib/transformation/file/index.js:600
throw err;
^

SyntaxError: /Users/zak/a_aurelia_projects/contact-manager/node_modules/dev-ip/lib/dev-ip.js: 'return' outside of function (41:8)
39 | var out = getIp();
40 | if (!out.length) {

41 | return console.log(messages.error);
| ^
42 | }
43 | console.log(getIp("cli"));
44 | }
at Parser.pp.raise (/Users/zak/a_aurelia_projects/contact-manager/node_modules/babylon/lib/parser/location.js:22:13)
at Parser.pp.parseReturnStatement (/Users/zak/a_aurelia_projects/contact-manager/node_modules/babylon/lib/parser/statement.js:316:10)
at Parser.pp.parseStatement (/Users/zak/a_aurelia_projects/contact-manager/node_modules/babylon/lib/parser/statement.js:99:19)
at Parser.parseStatement (/Users/zak/a_aurelia_projects/contact-manager/node_modules/babylon/lib/plugins/flow.js:28:22)
at Parser.pp.parseBlockBody (/Users/zak/a_aurelia_projects/contact-manager/node_modules/babylon/lib/parser/statement.js:516:21)
at Parser.pp.parseBlock (/Users/zak/a_aurelia_projects/contact-manager/node_modules/babylon/lib/parser/statement.js:497:8)
at Parser.pp.parseStatement (/Users/zak/a_aurelia_projects/contact-manager/node_modules/babylon/lib/parser/statement.js:119:19)
at Parser.parseStatement (/Users/zak/a_aurelia_projects/contact-manager/node_modules/babylon/lib/plugins/flow.js:28:22)
at Parser.pp.parseIfStatement (/Users/zak/a_aurelia_projects/contact-manager/node_modules/babylon/lib/parser/statement.js:309:26)
at Parser.pp.parseStatement (/Users/zak/a_aurelia_projects/contact-manager/node_modules/babylon/lib/parser/statement.js:97:19)
Zaks-MacBook-Air:contact-manager zak$

New install - Error: Error instantiating RouterView

Hi All,

I installed as documented without problems and run with gulp watch But browser stops with console error:


Error: Error instantiating RouterView.
------------------------------------------------
inner error: configureRouter@http://localhost:9000/dist/app.js:25:13
registerViewPort@http://localhost:9000/jspm_packages/github/aurelia/[email protected]/app-router.js:172:30
RouterView@http://localhost:9000/jspm_packages/github/aurelia/[email protected]/router-view.js:35:11
reflect.construct@http://localhost:9000/jspm_packages/github/zloirock/[email protected]/modules/es6.reflect.js:81:20
invoke@http://localhost:9000/jspm_packages/github/aurelia/[email protected]/metadata.js:259:20
invoke@http://localhost:9000/jspm_packages/github/aurelia/[email protected]/container.js:211:22
registerSingleton/<@http://localhost:9000/jspm_packages/github/aurelia/[email protected]/container.js:82:48
get@http://localhost:9000/jspm_packages/github/aurelia/[email protected]/container.js:140:1
elementContainerGet@http://localhost:9000/jspm_packages/github/aurelia/[email protected]/view-factory.js:27:12
create@http://localhost:9000/jspm_packages/github/aurelia/[email protected]/html-behavior.js:204:68
applyInstructions@http://localhost:9000/jspm_packages/github/aurelia/[email protected]/view-factory.js:79:20
create@http://localhost:9000/jspm_packages/github/aurelia/[email protected]/view-factory.js:173:15
create@http://localhost:9000/jspm_packages/github/aurelia/[email protected]/html-behavior.js:215:41
createBehavior/</<@http://localhost:9000/jspm_packages/github/aurelia/[email protected]/composition-engine.js:91:1
O@http://localhost:9000/jspm_packages/es6-module-loader.js:7:7451
K@http://localhost:9000/jspm_packages/es6-module-loader.js:7:7085
[7]</</</</y.prototype.when@http://localhost:9000/jspm_packages/es6-module-loader.js:7:10759
[7]</</</</v.prototype.run@http://localhost:9000/jspm_packages/es6-module-loader.js:7:9793
[3]</</</a.prototype._drain@http://localhost:9000/jspm_packages/es6-module-loader.js:7:1731
a/this.drain@http://localhost:9000/jspm_packages/es6-module-loader.js:7:1398
b@http://localhost:9000/jspm_packages/es6-module-loader.js:7:3312


</script>

Error instantiating RouterView

I tried building and running this app on two different computers (Windows 7 and 8.1) and on both of them I get the following error:

Uncaught Error: Error instantiating RouterView.
------------------------------------------------
inner error: TypeError: Cannot set property 'title' of undefined
    at App.configureRouter (http://localhost:9000/dist/app.js:25:26)
    at AppRouter.registerViewPort (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/app-router.js:172:55)
    at new RouterView (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/router-view.js:35:18)
    at Object.reflect.construct (http://localhost:9000/jspm_packages/github/zloirock/[email protected]/modules/es6.reflect.js:81:26)
    at ClassActivator.invoke (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/metadata.js:259:28)
    at Container.invoke (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/container.js:211:37)
    at Array.<anonymous> (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/container.js:82:50)
    at Container.get [as superGet] (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/container.js:140:30)
    at Container.elementContainerGet [as get] (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/view-factory.js:27:17)
    at HtmlBehaviorResource.create (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/html-behavior.js:204:78)

I tried these instructions to restore the jspm packages but that didn't fix it. Please help!

NoSelection not showing in TS version of tutorial

I'm submitting a bug report

  • Library Version:
    1.0.0

Please tell us about your environment:

  • Operating System:
    Lubuntu 16.10

  • Node Version:
    7.0.0

  • NPM Version:
    3.10.8

  • JSPM OR Webpack AND Version
    JSPM 0.16.48

  • Browser:
    Firefox 50.1.0

  • Language:
    TypeScript 2.0.10

Current behavior:
When I follow the tutorial to the step to create the no-selection ts and html, The message is not shown in the router-view.

  • What is the expected behavior?
    I expected to see the message of no-selection in the view

Can't get application running

I'm dying to try Aurelia, but for the life of me, I can't get anything working. I've followed the instructions, and re-followed the instructions; installed dependencies and re-installed them, but all I get is:

localhost

when I run:

gulp watch

and access: http://localhost:9000/

What am I doing wrong?

Problem when implementing undo behavior

The contactDetail class uses a nice trick to check if the contact object has unsaved changes by storing the original value in this.originalContact:

 this.originalContact = JSON.parse(JSON.stringify(contact));

That works great, but imagine now I want to use the same approach for UNDO functionality.
Intuitively, one would restore the originalContact into the this.contact object when an undo is requested,

this.contact = this.originalContact;

but that won't work, because this.contact is a much richer object compared to originalContact. Namely, this.contact contains the observer stuff:
image

whereas this.originalContact is kind of "naked" object:

image

Suggestions for an elegant KISS solution welcome :)

Missing font-awesome

The sample application uses font-awesome, but font awesome is not part of the project.

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

Have just tried to do a simple install of app-contacts and get the following error on "npm install" ....

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

I am running supported versions of node, npm, and jspm.

Running on a high spec Windows machine. This did not happen a few days ago. Is there any changed code in the git repo that could cause this preoblem?

plugin.load is not a function

I'm submitting a bug report

  • Library Version:
    0.27.0

Environment:

  • Operating System:
    Windows 10

  • Node Version:
    v7.9.0

  • NPM Version:
    4.2.0
  • Webpack
    webpack 2.4.1
  • Browser:
    all

  • Language:
    ESNext

Current behavior:
On step 5
"When you run the application, you should see something like this:" but a see
Uncaught TypeError: plugin.load is not a function
Unhandled rejection Error: Failed loading required CSS file: styles.css

As I found out later, to fix this, I had to change the standard loader settings:
"stub": true to false.
So as a result it turned out:

    "loader": {
      "type": "require",
      "configTarget": "vendor-bundle.js",
      "includeBundleMetadataInConfig": "auto",
      "plugins": [
        {
          "name": "text",
          "extensions": [
            ".html",
            ".css"
          ],
          "stub": false
        }
      ]
    },

Expected/desired behavior:
This point should be mentioned in the lesson, or change the default settings of the loader
Especially since the problem has been known for a long time
aurelia/templating-resources#220

NProgress is not added to configuration by default

Whenever new installation is made the config.js is modified and rule for NProgress is added after runnin jspm install:

diff --git a/config.js b/config.js
index e72be93..bae8674 100644
--- a/config.js
+++ b/config.js
@@ -96,6 +96,9 @@ System.config({
     "github:jspm/[email protected]": {
       "process": "npm:[email protected]"
     },
+    "github:rstacruz/[email protected]": {
+      "css": "github:systemjs/[email protected]"
+    },
     "github:twbs/[email protected]": {
       "css": "github:systemjs/[email protected]",
       "jquery": "github:components/[email protected]"

Is this by jspm design or should it be added to repository file version?
Thanks!

app_dot_html file has incorrect bootstrap file path

I'm submitting a bug report

  • Library Version:
    1.0.0

Please tell us about your environment:

  • Operating System:
    Windows 7

  • Node Version:
    8.11.3

  • NPM Version:
    5.6.0
  • JSPM OR Webpack AND Version
    webpack 4.20.2
  • Browser:
    Chrome 70.0.3538.77

  • Language:
    TypeScript 3.1.6

Current behavior:
When following the instructions of the guide for contacts-app - Adding Load Indicator section an error occurs due to an incorrect path for the bootstrap resource.

To Reproduce: Follow the instructions for the contacts-app in the Aurelia Tutorials. When getting to the section that adds the load-indicator, I got an Error while loading bootstrap.css from src/app.html, at the line:

<require from="bootstrap/css/bootstrap.css"></require>

The version of bootstrap, v4.1.3 uses .scss but installs the bootstrap.css within the bootstrap/dist/css/* folder.

Expected/desired behavior:

  • What is the expected behavior?
    The paths for the resources should be correct.

  • What is the motivation / use case for changing the behavior?
    Providing a smoother experience to the developers who interact with the "Contacts Application" guide. I'll submit a PR to propose a solution for this issue.

Filename error in aurelia_project/environements dir.

I'm submitting a bug report

  • Library Version:
    I honestly can't figure this out. Which of the 9 billion config files should I be looking in?

Please tell us about your environment:

  • Operating System:
    OSX 10.11.6

  • Node Version:
    6.6.0

  • NPM Version:
    3.10.3

  • JSPM OR Webpack AND Version
    JSPM 0.16.48

  • Browser:
    all

  • Language:
    all ESNext

Current behavior:
The dev.js file in the aurelia_projects/environments dir is erroneously named:
Starting 'configureEnvironment'... { uid: 8, name: 'configureEnvironment', branch: false, error: { Error: File not found with singular glob: /Users/AJB/Server/Aurelia/contact-manager/aurelia_project/environments/development.js ...

Expected/desired behavior:
The tutorial should work.

  • What is the motivation / use case for changing the behavior?
    To make the tutorial work.

How can I test the production builds?

I tried 'gulp build' and 'gulp prepare-release' but when I run 'gulp watch' or 'gulp serve' I'm still getting 140 network requests in Chrome. Seems a little overkill for such a small demo so I wanted to see if it at least cleaned up well heh.

jquery problem after running set up procedure

Followed the exact set up but there is a problem with jquery??? I have latest npm. Why am I getting such a simple error with jquery? ...

Uncaught Error: Bootstrap's JavaScript requires jQuery

on both vector-bundle.js and bootstrap.min.js

Unexpected token ILLEGAL - reEmptyStringMiddle =

Hi,

Just downloaded and tried to play with it.

Unfortunately, after a couple of warning while running "npm install", gulp watch ends up with the following error:

ilema@minix /files/dev/wspace_web/app-contacts-0.3.0 > gulp watch
/files/dev/wspace_web/app-contacts-0.3.0/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/node_modules/globule/node_modules/lodash/dist/lodash.js:45
  reEmptyStringMiddle = 

SyntaxError: Unexpected token ILLEGAL
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/files/dev/wspace_web/app-contacts-0.3.0/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/node_modules/globule/lib/globule.js:14:9)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
ilema@minix /files/dev/wspace_web/app-contacts-0.3.0 >

As mentioned, these are the warnings:

ilema@minix /files/dev/wspace_web/app-contacts-0.3.0 > npm install
npm WARN unmet dependency /files/dev/wspace_web/app-contacts-0.3.0/node_modules/karma/node_modules/http-proxy requires colors@'0.x.x' but will load
npm WARN unmet dependency /files/dev/wspace_web/app-contacts-0.3.0/node_modules/karma/node_modules/colors,
npm WARN unmet dependency which is version 1.1.2
npm WARN unmet dependency /files/dev/wspace_web/app-contacts-0.3.0/node_modules/karma/node_modules/chokidar/node_modules/readdirp requires graceful-fs@'~2.0.0' but will load
npm WARN unmet dependency /files/dev/wspace_web/app-contacts-0.3.0/node_modules/karma/node_modules/graceful-fs,
npm WARN unmet dependency which is version 3.0.8
npm WARN unmet dependency /files/dev/wspace_web/app-contacts-0.3.0/node_modules/karma/node_modules/chokidar/node_modules/readdirp requires minimatch@'~0.2.12' but will load
npm WARN unmet dependency /files/dev/wspace_web/app-contacts-0.3.0/node_modules/karma/node_modules/minimatch,
npm WARN unmet dependency which is version 2.0.8
npm WARN unmet dependency /files/dev/wspace_web/app-contacts-0.3.0/node_modules/browser-sync/node_modules/socket.io/node_modules/socket.io-parser requires debug@'0.7.4' but will load
npm WARN unmet dependency /files/dev/wspace_web/app-contacts-0.3.0/node_modules/browser-sync/node_modules/socket.io/node_modules/debug,
npm WARN unmet dependency which is version 2.1.0
npm WARN unmet dependency /files/dev/wspace_web/app-contacts-0.3.0/node_modules/browser-sync/node_modules/socket.io/node_modules/socket.io-client requires debug@'0.7.4' but will load
npm WARN unmet dependency /files/dev/wspace_web/app-contacts-0.3.0/node_modules/browser-sync/node_modules/socket.io/node_modules/debug,
npm WARN unmet dependency which is version 2.1.0
npm WARN unmet dependency /files/dev/wspace_web/app-contacts-0.3.0/node_modules/gulp-jshint/node_modules/jshint requires lodash@'3.7.x' but will load
npm WARN unmet dependency /files/dev/wspace_web/app-contacts-0.3.0/node_modules/gulp-jshint/node_modules/lodash,
npm WARN unmet dependency which is version 3.10.0
ilema@minix /files/dev/wspace_web/app-contacts-0.3.0 >

Next days I will try to find time to look into it.

Meanwhile, thank you!

'plugin.load' is undefined

I'm submitting a bug report

library version
latest

Please tell us about your environment:

  • Operating System:
    OSX 10.11.6

  • Node Version:
    6.6.0

  • NPM Version:
    3.10.3

  • JSPM OR Webpack AND Version
    JSPM 0.16.48

  • Browser:
    all

  • Language:
    all ESNext

Current behavior:
TypeError: plugin.load is not a function. (In 'plugin.load(map.name, localRequire, load, config)', 'plugin.load' is undefined) vendor-bundle.js:4848

Expected/desired behavior:
The function should be defined.

404 /src/aurelia-testing.js

I'm submitting a bug report

  • Library Version:
    Don't know.

Please tell us about your environment:

  • Operating System:
    OSX 10.11.6

  • Node Version:
    6.6.0

  • NPM Version:
    3.10.3

  • JSPM OR Webpack AND Version
    JSPM 0.16.48

  • Browser:
    all

  • Language:
    all ESNext

Current behavior:
http://localhost:9000/src/aurelia-testing.js Failed to load resource: the server responded with a status of 404 (Not Found)

Expected/desired behavior:
I don't know yet, can't get through the basic tutorial.

  • What is the expected behavior?
    I don't know yet, can't get through the basic tutorial.

  • What is the motivation / use case for changing the behavior?
    I don't know yet, can't get through the basic tutorial.

Hosted on Demo version

How hard would it be to run a version off github pages or maybe hosted somewhere else (aurelia.io?)?

I know I can download it and follow the instructions to get it up and running but it would be nice to quickly see the app running.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.