breeze-bridge-angular2
Advanced tools
A bridge that configures Breeze to work with Angular 2 out of the box.
Install breeze-client
npm install breeze-client --save
Install breeze-bridge-angular2
npm install breeze-bridge-angular2 --save
A comprehensive example app that makes use of the bridge can be found here: https://github.com/Breeze/temphire.angular2.
To use the bridge in your own application, the following steps are required.
Configure breeze-client and breeze-bridge-angular2 in systemjs.config.js.
// map tells the System loader where to look for things
var map = {
...
'breeze-client': 'node_modules/breeze-client',
'breeze-bridge-angular2': 'node_modules/breeze-bridge-angular2'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
...
'breeze-client': { main: 'breeze.debug.js', defaultExtension: 'js'},
'breeze-bridge-angular2': { main: 'index.js', defaultExtension: 'js'}
};
Import BreezeBridgeAngular2Module and add it to the app module's imports.
import { BreezeBridgeAngular2Module } from 'breeze-bridge-angular2';
@NgModule({
imports: [
BreezeBridgeAngular2Module
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Now we can use Breeze normally from something like a data service for example.
import { Injectable } from '@angular/core';
import { EntityManager, EntityQuery } from 'breeze-client';
import { Customer } from './entities';
@Injectable()
export class DataService {
private _em: EntityManager;
constructor() {
this._em = new EntityManager();
}
getAllCustomers(): Promise<Customer[]> {
let query = EntityQuery.from('Customers').orderBy('companyName');
return <Promise<Customer[]>><any> this._em.executeQuery(query)
.then(res => res.results)
.catch((error) => {
console.log(error);
return Promise.reject(error);
});
}
}
Notice that we are also importing breeze-client instead of loading it as a static script as you might have seen in other examples. Make sure you don't have an extra script tag in your index.html that attempts to statically load breeze.debug.js or similar.
Example index.html:
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
FAQs
A bridge that configures Breeze and Angular2 to work together.
We found that breeze-bridge-angular2 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.