https://github.com/pbastowski/todo-ng2now

ToDo app coded using the angular2-now library and AngularJS 1.3
https://github.com/pbastowski/todo-ng2now

Last synced: 4 days ago
JSON representation

ToDo app coded using the angular2-now library and AngularJS 1.3

• Host: GitHub
• URL: https://github.com/pbastowski/todo-ng2now
• Owner: pbastowski
• Created: 2015-05-20T21:10:53.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-05-21T10:14:52.000Z (over 9 years ago)
• Last Synced: 2023-08-12T08:13:13.265Z (over 1 year ago)
• Language: JavaScript
• Size: 184 KB
• Stars: 5
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# todo-ng2now

ToDo app coded using the [Angular2-now](https://github.com/pbastowski/angular2-now) library and with AngularJS 1.3 and [angular-meteor](http://angular-meteor.com/).

Click here for the [demo](http://todo-ng2now.meteor.com/).

## Comparing angular2-now and Aurelia

After reading [Porting an Angular 2.0 App to Aurelia](http://blog.durandal.io/2015/05/20/porting-an-angular-2-0-app-to-aurelia/) I was inspired to do a side by side comparison of **angular2-now** and **Aurelia**. I wanted to see just how much more code, if any, I would be forced to write with AngularJS 1.3, angular2-now and angular-meteor. 

*Notice:* For comparison, I have copied the Aurelia code samples from the abovementioned blog. 

So, this is not an extensive review with commentary, etc. Just a side by side code and HTML.

## The App itself

#### app.js

  

    

      angular2-now


    

    

      Aurelia


    

  

  

    


angular.extend(window, angular2now);

angular2now.options({ controllerAs: 'vm' })


angular.module('todo-app', ['angular-meteor']);

@Component({ selector: 'todo-app' })

@View({ templateUrl: 'client/components/app.html' })

class TodoApp { }

bootstrap(TodoApp);



    

    


export class TodoApp {}  



    

  


## app.html

#### Angular2-now

```html

  

    

    



```


#### Aurelia

```html

  

  

  

  

  

```

## todo-list

#### todo-list.js

  

    

      angular2-now


    

    

      Aurelia


    

  

  

    


@Component({ selector: 'todo-list', injectables: ['todoItems'] })

@View({ templateUrl: 'client/components/todo-list.html' })


class TodoList {

    constructor(todoItems) {

        this.items = todoItems;

    }

    completeAll() {

        this.items.forEach( item => item.completed = true );

    }

    removeItem(item) {

        this.items.splice(this.items.indexOf(item), 1);

    }

}



    

    


import {TodoItems} from 'services/todo-items';


export class TodoList {  

  static inject = [TodoItems];

  constructor(todoitems) {

    this.items = todoitems.items;

  }

  completeAll() {

    this.items.forEach(item => item.completed = true);

  }

  removeItem(item) {

    this.items.splice(this.items.indexOf(item), 1);

  }

}



    

  


## todo-list.html

#### Angular2-now

```html



  
To Do

  


     {{ item.text }}

  

  Complete All



```


### Aurelia

```html

  

  
To Do

  
  

      

      ${item.text} 

  

  Complete All

  

```


## New-Item

Angular2-now version is shorter here. I optimised the HTML for Angular 1.3, which makes two way binding a bit easier than the Angular 2 version.

#### new-item.js

  

    

      angular2-now


    

    

      Aurelia


    

  

  

    


@Component({ selector: 'new-item', injectables: ['todoItems'] })

@View({ templateUrl: 'client/components/new-item.html' })


class NewItem {

	constructor(todoItemList) {

        this.items = todoItemList

	}

	addItem() {

		this.items.push({

			text: this.input,

			completed: false

		})

		this.input = '';

	}

}



    

    


import {TodoItems} from 'services/todo-items';


export class NewItem {  

  static inject = [TodoItems];

  constructor(todoitems) {

    this.items = todoitems.items;

  }

  keyPressed($event) {

    if($event.which === 13) {

      this.addItem(this.value);

    }

  }

  addItem(input) {

    this.items.push({

      text: this.value,

      completed: false

    })

    this.value = '';

  }

}



    

  


## new-item.html

#### Angular2-now

```html

  


    New Item

    

  

  Add Item


```

#### Aurelia

```html

  

  


    


      New Item

      

    

    Add Item

  

 

```


## Summary

From the above short examples, it would appear that you can write nice, short code with AngularJS 1.3 and [Angular2-now](https://github.com/pbastowski/angular2-now).