ng-next
Ng-next is a simple and elegant way to use Angular 1.x with ES6 / ES7. It provides an expressive syntax to maintain the simplicity and readability of your code.
- Decorators for angular & ui-router
- Async / Await (zone.js) integration to make it compatible with angular's $digest cycle
- Monkey patch for
$scope.$watchCollection
to work with ES6 iterables (Set / Map / Symbol.iterator)
Requirements
- Angular 1.x
Note: In order to use Angular UI-Router specific decorators, you need to install Angular UI-Router first.
Installation
NPM
Ng-next is available on npm
npm install --save ng-next
Configuration
Ng-next will initialize itself the first time you call
You may perform some configuration through the following object, altough there isn't much to configure because ng-next aims to provide the simplest solution you can get!
// If ng-next fails to auto-detect your moduleconfigMODULE = angular; // Enable or disable zone.js for $digest supportconfigZONE_JS = true / false;
Babel & Decorators
For the full list of ECMAScript 2015 features, please refer to the Babel Documentation.
If you want to use decorators please install Babel support for decoratos
Async / Await
Making asynchronous http requests was until now a bit of a hassle. Ng-next provides therefore an elegant and convenient way to achieve the same result.
Ng-next makes use of the ES6 async / await
functions.
//Http call{ let response = await $http; return responsedata;} //API callasync thisusers = await thisUserService;
You don't have to manually call the $rootScope.$digest()
after every asynchronous http requests you make.
This is achieved by bootstrapping your angular application inside its own "angular zone", which will trigger $rootScope.$digest()
, if not already done, every time your code leaves the zone.
Note: With this technique you're also no longer relying on
$timeout
,$interval
and so on...
Use nativesetTimeout
,setInterval
,addEventListener
... and your app will still always be up to date. Magic!
Note:
NgZone
is available via the window object or as injectable service
NgZone.runOutsideAngular
Sometimes you want to execute something outside of angular, without executing $digest
after the task has completed, this is often the case for frequent tasks like requestAnimationFrame
that would totally destroy your CPU.
To achieve this, you may call your function outside of Angular
@Service @Inject NgZone; @Init //Care, will trigger $digest every frame //requestAnimationFrame(() => this.render()); //Will run without triggering anything thisNgZone;
For further information see zone.js Documentation
$scope.$watchCollection
Ng-next monkey patches $scope.$watchCollection
of every scope to make it compatible with any iterable object.
With this technique you can use ng-repeat
and similiar directives with a Set
or any object that has a [Symbol.iterator]
method.
@Controller list = "1" "2" "3" "4" "5" Symboliterator return thislistSymboliterator; //Html<div ng-controller="ListController as listCtrl"> <h1>Iterate over Set</h1> <h2 ng-repeat="item in listCtrl.list"> item </h2> <h1>Iterate over controller</h1> <h2 ng-repeat="item in listCtrl"> item </h2></div>
Decorators
Angular configuration decorators
@Controller
@Service
@Component
@Directive
@Filter
@Config / @Run
Utility decorators
@Inject
@Init
@Destroy
@On
@Watch
@WatchCollection
@Debounce
Other decorators
@State
@Alias
@View
@Bind
Angular configuration decorators
@Controller
@Controller @Inject $http; @ //Minify safe @Inject $rootScope;
@Service
@Service @ //Minify safe
@Component
@Component
is placed directly on top of its controller!
/** * Component with decorators */@ //<bar></bar> Same as @Component({ name : "bar" })@@ @ foo; { console; } /** * More old-scool component. * The object given into the decorator is used as directive configuration * You may use every property a directive can have */@ //<foo> </foo> { console; }
@Directive
@ //<div foo> </div> restrict = "AE" scope = bar : "=" {}
@Filter
/** * @ngInject */ @Filter //uses method name as filter name { return string } /** * @ngInject */ @ { return string }}
@Config / @Run
/** * @ngInject */ @Run { return string } /** * @ngInject */ @Config { //Config method }
Utility decorators
Those decorators should only be used on controllers and services. For services ng-next will use the $rootScope as the scope for @On, @Watch etc.
@Controller /** * Directly inject the angular http service */ @Inject $http; /** * Directly inject the controller $scope */ @Inject $scope; /** * Inject the $rootScope under an alias */ @ baseScope; /** * A random property */ property = "Hello World"; /** * A random array */ array = "1" "hello" "red"; @Init //You cannot use await in constructors, so @Init is perfect for that async let response = await this$http; //Do init stuff @Destroy //Cleanup when the controller / its scope gets destroyed /** * With @On you can listen to any event you can with $scope.$on */ @ console /** * With @Watch you can listen to any property as you would with $scope.$watch, but * its evaluateed on the controller instead of the scope */ @ console /** * With @WatchCollection you can listen to any property as you would with $scope.$watchCollection, but * its evaluateed on the controller instead of the scope */ @ console /** * @Debounce will debounce the method for the given amount of millis */ @ //I get executed after i wasn't called for 100 milliseconds
Other decorators
@State
The @State
decorator defines a state for the common ui-router
plugin and sets the class
its on top of as controller.
You can combine it with @View / @Alias
or configure the state as you're used to.
@@@ //State controller
@Alias
Sets the controllerAs property of an @Component
or @State
@@ ... @@ ...
@View
Sets the template / templateUrl property of an @Component
or @State
, if the string contains a "<" it will be
treated as the HTML template, otherwise it will be considered as the path to the HTML template.
@@ ... @@ ...
@Bind
Defines a property / attribute which should be bound with the related component.
In this case the user
component.
@@ /** * If the html is <user name="Dude"></user> then * this property is "Dude" */ @ name;
Info
This little library is pretty new and under active development. Please report bugs and improvements :)
License
The ng-next library is open-sourced software licensed under the MIT License.