Giter Club home page Giter Club logo

angular's Introduction

Angular - The modern web developer's platform.

angular-logo
Angular is a development platform for building mobile and desktop web applications
using Typescript/JavaScript and other languages.

www.angular.io

Contributing Guidelines · Submit an Issue · Blog

CI status   Angular on npm   Discord conversation

InsightsSnapshot


Documentation

Get started with Angular, learn the fundamentals and explore advanced topics on our documentation website.

Advanced

Development Setup

Prerequisites

Setting Up a Project

Install the Angular CLI globally:

npm install -g @angular/cli

Create workspace:

ng new [PROJECT NAME]

Run the application:

cd [PROJECT NAME]
ng serve

Angular is cross-platform, fast, scalable, has incredible tooling, and is loved by millions.

Quickstart

Get started in 5 minutes.

Ecosystem

angular ecosystem logos

Changelog

Learn about the latest improvements.

Upgrading

Check out our upgrade guide to find out the best way to upgrade your project.

Contributing

Contributing Guidelines

Read through our contributing guidelines to learn about our submission process, coding rules and more.

Want to Help?

Want to report a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing and then check out one of our issues labeled as help wanted or good first issue.

Code of Conduct

Help us keep Angular open and inclusive. Please read and follow our Code of Conduct.

Community

Join the conversation and help the community.

Love Angular badge

Love Angular? Give our repo a star ⬆️.

angular's People

Contributors

gkalpak avatar petebacondarwin avatar IgorMinar avatar vsavkin avatar vicb avatar alxhub avatar tbosch avatar devversion avatar mhevery avatar josephperrott avatar pkozlowski-opensource avatar alexeagle avatar renovate-bot avatar kara avatar AndrewKushnir avatar matsko avatar atscott avatar JoostK avatar alan-agius4 avatar crisbeto avatar chuckjaz avatar mgechev avatar marclaval avatar gregmagolan avatar kyliau avatar AleksanderBodurri avatar jbogarthyde avatar ocombe avatar jasonaden avatar kapunahelewong avatar

Stargazers

 avatar Richard So avatar Arsenij Kotikov avatar Suai avatar  avatar  avatar  avatar  avatar Gejo P Rajan avatar  avatar  avatar Vladislav Mansurov avatar  avatar  avatar Umasankar Patra avatar Ininit avatar  avatar Kento Shirasawa avatar Ioannis Kyriazakis avatar  avatar 和泉剛 avatar Areliz Oyarce Franco avatar Jesus Cantu avatar Madhan Umk avatar Alfonso Valenciana avatar Stefanie Aviles Romero avatar Enrique Hernandez Tepezintla avatar Anthony Swierkosz avatar  avatar Hans Spaans avatar Hikaru Y. avatar T. A. Fox avatar Nour Amine Drissi avatar Connor Melnick avatar Thomas Voets avatar Krzysztof Borowiecki avatar Marcos Victor avatar Bello Abraham avatar Ibrahim Azez avatar DevD avatar  avatar Artem Kuznetsov avatar  avatar Ilyas Kadyrov avatar  avatar  avatar  avatar Neelanjan Mukherji avatar  avatar Kai Nè avatar  avatar Enver Vivas avatar  avatar  avatar subin sv avatar Jooy avatar wjchang avatar 泸松松 avatar Ashok Balakumar avatar Peter Henniger avatar Avaika Nametissa Jean Marcel avatar Alex Jesus avatar saladine ahmat barkai avatar  avatar TrebuszeQ avatar João Paulo avatar  avatar Elle Austin avatar  avatar Jungma avatar Dariel Medina Rodríguez avatar  avatar tang avatar Sergi Dote Teixidor avatar  avatar Jelly avatar hp avatar Artin Mohammadi avatar 空白格 avatar Facundo Pellejero avatar Carlos Magno avatar  avatar Fire Cube avatar İlkyaz Arabacı avatar Ananthu avatar Marko Koljancic avatar Asim M Al Twijry avatar  avatar Abrew Abraham Alex avatar Ido Golan avatar rus_anonym avatar TSHIOKUFILA MAKASHIENY Shekinah avatar Ramil avatar nuk avatar ROHIT CHAUHAN avatar  avatar Damian Van de Kauter avatar NightWolf Development avatar Binyameen avatar Lukas Kopischke avatar

Watchers

Ari avatar Jeroen Zwartepoorte avatar Ken Rimple avatar Dario Alves Junior avatar Jorge Cuadrado avatar Kozo Nishida avatar Jason Mountain avatar Levi Stanley avatar Dinesh Puspparajah avatar Raju Gandhi avatar Manuel avatar Kris Shannon avatar Justin Roth avatar Laura Jacobsen avatar José Steven Viana avatar XdF avatar Abhik Khanra avatar [T] NepTunic avatar Joshua Kappers avatar Mark Hebert avatar Noam  Vergain avatar Tiago Justino avatar Aurimas Valionis avatar Jason Craft avatar Panayiotis Tzagkarakis avatar Sysmat avatar Bob James avatar  avatar x16man avatar Aakarsh Nair avatar  avatar  avatar Nurul Ferdous avatar Masaaki Kurihara avatar Ricardo Soares avatar  avatar Salem Khan avatar Michael Sparmo avatar Jason Bedard avatar Nguyen Tien Si avatar Emtec avatar  avatar Shumpei Shiraishi avatar ROHITHA DASSANAYAKE avatar Miško Hevery avatar Masao Ochi avatar takeratta(tm)* avatar TJ Trapp avatar Ward Bell avatar  avatar Rajesh Odayanchal avatar Hilton Gonçalves avatar Anton Mamrashev avatar Juan Suarez avatar Luis Furnas avatar 大鼻子 avatar ToucheComm avatar Stéphane Vasseur avatar Tushar Wadekar avatar Mikael Tollefsen avatar David Arturo Carrillo Atondo avatar davidwei_001 avatar Josh Iverson avatar Stéphane P. Péricat avatar nant avatar Wolfgang Born avatar evandrix avatar Brett Senna avatar Pekka Kuismanen avatar Allen Galler avatar  avatar Clayton K. N. Passos avatar George Frick avatar Andy Sharkey avatar  avatar Verious Smith III avatar Igor Minar avatar  avatar moueza avatar Jeroen van Heel avatar Masahiro Hayashi avatar Gautam Pandey avatar Tyrone Neill avatar yury avatar Tuan Nguyen avatar Everton Yoshitani avatar send2vinnie avatar Bert Verhees avatar Joeri Boudewijns avatar  avatar Brian Turgeon avatar André Kaufmann avatar Ming Ho avatar  avatar Tarmo avatar Michael R Basher avatar Yago Carballo avatar Anders Sjögren avatar António Silva avatar MASSE avatar

angular's Issues

ng-option issue

Hi people... I came with this problem before but I haven't been taken seriously.

Ng-option doesn't work properly. I should be able to compare objects rather than put my selection in a different variable.

It should see that if I declare a parameter in, for example a users variable, where I declare what that user works, and then I declare all the jobs out there, it should compare that property and not make me work around it.

Please take me seriously this time.
Thanks.

PS: Really good job.

Make fields first class citizens in ES6+A

Currently fields are declared as:

class Annotation {
  @FIELD('final name:String')
  @FIELD('final age:int')
  @CONST constructor(name:String, age:int) {
    this.name = 'Hello ' + name;
    this.age = age + 0;
  }
}

@Annotation('usage', 5)
class Foo {}

should be

class Annotation {
  name:String;
  age:int;

  @CONST constructor(name:String, age:int) {
    this.name = 'Hello ' + name;
    this.age = age + 0;
  }
}

@Annotation('usage', 5)
class Foo {}

This is based on TypeScript, we should follow whatever they are doing.

  1. Do they allow inline initialization of fields
  2. Do they generate code to set fields to null if the constructor does not set them explicitly.

transpiler: Run transpiler tests

@tbosch from you last email:

all tests are written in jasmine/guinness and executed via karma, including the tests for the transpiler

I can not find a way to run the transpiler spec with the latest master.

I can generate the dart files by requiring the gulp-tasks file from the main gulpfile and install() it.
Then run_specs.dart is missing.

What is the correct way to do this ?

(I can not post on the ng mailing list which is why I create this issue here)

Assert that all _ are not exported and non_ are not

export class _FOO {}
class BAR{}

should be an error because _FOO is private in Dart and BAR is exported regardless of export keyword in source file. For this reason we have to assert that all top level identifiers are exported unless they contain _ prefix.

transpiler: reexport of facades

Often times it is useful to be able to re-export facade types. This requires the support of rexporting.

import {Foo} from 'bar';
export Foo;
export 'bar' show Foo;

Bare bones change detection

We would like to implement bare bones change detection so that we can unblock ourselves for other parts of the system and work on them in parallel.

https://github.com/mhevery/angular/blob/master/modules/change_detection/src/watch_group.js
https://github.com/mhevery/angular/blob/master/modules/change_detection/src/record.js

I would love to get a very simple change detection going which can only watch simple properties such as foo or bar ie no (foo.bar or foo().bar or anything of that sort)

We should be able to implement this without the need for parser.

class Person {
  var age;
}

var person = new Person();
var pwg = new ProtoWatchGroup();
pwg.watch('age');
var wg = pwg.instantiate();
wg.setContext(person);
var cd = new ChangeDetection(wg);
cd.detectChanges();

Make this test pass:

it('should do simple watching', function() {

Change named parameter format

current

method({value:'default'}:{value:String})

requires that we repeat the value twice

proposed syntax

method({value:String='default'})

build: add travis-ci

For now run the following:

  • gulp build: automatically runs dartanalyzer, so we get early errors via the static type system of dart
  • karma run: run some basic tests to ensure the JS modules are loading and have correct dependencies

Needs to download dart environment...

transpiler: add sourcemaps

when an exception is reported the stack trace is from transpiled file, but my code is in source file.

Need to generate source maps for debug code
Need to rewrite stack trace to have original line numbers.

Add throttle argument for $watch

So, I have a snippet of code that I keep copy and pasting all over my controllers for handling "auto-saving" functionality for objects:

var pendingPromise = null;
        //Set up watch to auto save CTA on changes, but throttled once every 500ms.
        $scope.$watch('myObject', function(nv, ov){
            if((nv && ov) && (!_.isEqual(nv, ov))){
                if (pendingPromise) {
                    $timeout.cancel(pendingPromise);
                }

                pendingPromise = $timeout(function () {
                    persistMyObject();
                }, 500, false);
            }
        }, true);

I do this so that the API the underlying service talks to doesn't get inundates w/ requests, especially for ui components like sliders that change the model incrementally very quickly. If would be wonderful if in some later release of Angular if this were condensed down to something like:

$scope.$throttledWatch('myObject', function(nv, ov){
    if(nv){
        persistMyObject();
    }
}, true, 500);

Where 500 is the time in milliseconds to set on the throttle.

transpiler: constructor and typed field semantics

  1. Only allow assignments to fields in constructor and translate these assignment into constructor initializers
  2. Make field declaration explicit through @FIELD annotation
  3. Make const constructors in Dart through @CONST annotation

Example:

class Annotation {
  @FIELD('final name:String')
  @FIELD('final age:int')
  @CONST constructor(name:String, age:int) {
    this.name = 'Hello ' + name;
    this.age = age + 0;
  }
}

@Annotation('usage', 5)
class Foo {}

this needs to transpile to:

class Annotation {
  final String name;
  final int age;
  const Annotation(String name, int age): 
     name = 'Hello ' + name,
     age = age + 0;
}

@Annotation('usage', 5)
class Foo {}

Integrate dartanalyzer into build

this implies we need angular.dart file which looks something like this:

library angular.dom.main;

export "annotations/directive.dart";
export "annotations/component.dart";
export "annotations/property.dart";
export "annotations/template.dart";
export "annotations/event.dart";
export "directive_injector/annotations.dart";
export "directive_injector/directive_injector.dart";
export "directive_injector/query.dart";
export "view/view.dart";
export "view/view_ref.dart";
export "view/view_factory.dart";
export "view/view_port.dart";
export "view/view_port_ref.dart";

Don't generate that, but we need something like this as public API.

Should we infer class property types from ctor args ?

Currently we infer property types from from ctor args (by name) which could produce wrong results

// js
class A {
  constructor(a: Number, b: String) {
    // notice how property & arg name doesn't match
    this.b = a;
    this.a = b;
  } 
}

// -> dart
class A {
num a;
String b;
  A(num a, String b) {
    // it results in wrong types   
    this.b = a;
    this.a = b
  }
}

Things we can do:
1- Stop inferring property types from args (which would always produce valid code, but types are lost),
2- Write some logic to infer types (do not infer types based on names but get the type from the rhs, the types would always be correct but it requires more code),
3- Keep the current logic as it would probably be correct in 99% of the cases.

I would tend to go for something right (1) rather than something mostly right (3). We could implement 2 at a later point in time.

Thoughts ?

transpiler: Refactor the transpiler

From #18 (which has been closed):

Some related question: today there is only one dart_class_transformer.js that has all the transformations.

To be more compliant with the original Traceur code, it would probably makes sense to have a DartTransformer that would be the main entry point and every single transformation defined in a separate class & file. All those files should be hosted in a codegeneration folder.

I'm not sure if GH is the best place to discuss this kind of thing. Should we create a "js2dart" room in flowdock ?

This could easily allow running some of the existing transformers which are required. As an example, hoisting is not handled today while a transformer (HoistVariableTransformer exists and can be used)

Refactor the transpiler to better support both Dart and JS

Currently we use either the original Traceur transpiler or the or the Dart transpiler (which inherit from the Traceur transpiler).

But we plan to augment the Traceur syntax to support ie class fields (#66).

The target architecture should probably be
Original Traceur transpiler <- Angular specific JS transpiler <- Dart transpiler
(where "<-" = inherits from).

Regarding the folder structure, I think we should have:

transpiler
 +-- src
    +-- Dart        
         +-- codegeneration
         +-- outputgeneration
         +--syntax
    +-- JS      
         +-- codegeneration
         +-- outputgeneration
         +--syntax

Thoughts ?

Transpiler: should we support Dart libraries ?

As of today each transpiled file as a library statement. The library name is unique and is derived from the file name.

Dart support private members (& functions & variables). Private members start with a "_" prefix.

A private member (/ function / variable) is visible to the entire library (whether it is accessed from the same class or file).

Currently dartanalyzer prints some warnings because "_" prefixed members are accessed from an other file (hence an other library).

What would be the right solution to support this:

  • Support librarystatement in the source code (may be via @LIBRARY('name') if possible),
  • Transform "_" prefixed names,
  • ?

A short term solution could be to avoid "_" prefixed names but we should also have a longer term strategy IMO.

Clarify what this project is about

Could you please clarify in the README.md what this project is there for? That is, of course, if you don't mind sharing it with the public :-)

transpiler: Improve transpiler tests

As today we test the transpiler by running the spec in JS and Dart. While this is a good start, there is room for improvement.

Asserting that some code snippets fail (with a given error message) could also really help improving the test suite.

An example could be for the generation of const constructor: in Dart such constructor could not have a body (it can only have an initializer list). Asserting that this case fails with a comprehensible error message would be really helpful.

transpiler: handle named parameters

 it('should compile named params when the last argument is a map', function() {
    function f(a, {b, c}) {return a + b + c;}

    expect(f(1, {b: 2, c: 3})).toBe(6);
  });

  it('should compile to a map when keys are quoted', function() {
    function f(m) {return m["a"] + m["b"];}

    expect(f({"a": 1, "b": 2})).toBe(3);
  });

transpiler: Error in assertion of return value of nested functions

E.g. in this method traceur says that the return value "true" does not match ArrayOfDirectiveClass. It seems to check the return value of the nested function against the return type of the method...

class Test {
someMethod(directive:Function):ArrayOfDirectiveClass {
    return annotations.filter((annotation) => {
      return annotation instanceof Directive;
    }).map((directiveAnnotation) => {
      return new DirecrtiveClass(directiveAnnotation, directive);
    });
  }

transpiler: support let in dart

let a = 1; should work.

JavaScript's "let" is the same as Dart's "var" -- this is needed to apply more semantically correct transpilation.

Run dartanalyzer an all files including on tests

Currently the dartanalyzer does not run on test files and it runs separately for each module. We should generate a single file which references all of the files across all of the modules and then run dartanalyzer only once.

generated file: _all_.dart

export './moduleA/file1.dart';
export './moduleA/file2.dart';

export './moduleB/file1.dart';
export './moduleB/file2.dart';

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.