angular2-carbonldp
Helping classes that simplify the integration between Angular2 and CarbonLDP
Installation
Install through npm using the following command:
npm install angular2-carbonldp
Usage
To use this library, you have to follow three steps:
- Initialization of your Carbon context
- Provision of the context to your app
- Injection of the desired context to your app
1. Initialization
In the bootstrapping file of your Angular2 application (commonly main.ts), you need to initialize the active Carbon's context you are going to use across your application. The contexts with which you can initialize your Carbon instance can be the following:
- App Context
- Platform Context
App Context
If your application is going to use only one App Context (which is normally the case), the initialization needs to be as follows:
;; ;; ;; ;// Here you can configure this instance of carbon (setSetting, extendObjectSchema, etc.)// e.g: carbon.setSetting( "domain", CARBON_DOMAIN ); // Initialize carbon with you application contextactiveContext.initialize carbon, "your-app-slug/" ; platformBrowserDynamic.bootstrapModule AppModule .then .catch ;
Platform Context
If instead, your web application is going to work with several Carbon App Contexts (an Advanced use), the initialization would be exactly the same but without providing an app slug:
activeContext.initialize carbon ;
2. Provision
After the initialization of your contexts, you can now proceed to provide to your main module the generated contexts. To do this, the provision needs to be as follows:
;; // Providers;; // Components;
3. Injection (DI Objects)
After initializing the context and registering the providers, the following objects can be injected:
; ;;; ;; // The main carbon Contextconstructor private carbon:Carbon // The App Context (only if you initialized the active context with an app slug!)constructor private appContext:App.Context // The active context (either carbon or an app context, depending on your initialization).constructor @Inject ContextToken private context:Context // A basic AuthService that handles cookie based sessionsconstructor @Inject AuthService.Token private authService:AuthService.Class
Until here, your app is now integrated with Carbon. You can now make use of Carbon inside your app.
But if you want to use Carbon inside the routes of your app, let's say to allow or forbid routes, you can also use the Resolvers and Guards that this library provides.
Resolvers & Guards
Resolvers
Resolvers help you to assure that a desired data will be available before rendering a routed component. This library provides you the following resolver:
ActiveContextResolver
Resolver that will make sure the Carbon active context is resolved before activating the route.
It needs a route to redirect the user to in case an error occurs configured in the route data.onError
property.
;// Resolvers; ;
Guards
Guards help you to continue or block navigation to a given route depending on a condition.
All guards need a route to redirect the user to, if the guard rejects the route activation. This route needs to be
defined in the route's data.onReject
property.
We provide you the following two guards:
AuthenticatedGuard
Guard that will prevent the route from being activated when the user hasn't authenticated himself.
;// Guards; ;
NotAuthenticatedGuard
Guard that will prevent the route from being activated when the user is already authenticated.
;// Guards; ;
Development
To develop this library you need to have installed the following:
The steps to develop the library are as follows:
cd
to the project pathnpm install
gulp
to bundle the librarygulp:watch
to watch for changes inside thesrc
folder
Gulp tasks
Gulp defines two tasks:
default
: Runs thebuild
taskbuild
: Runs the following tasks:clean:dist
,compile:typescript:aot
,build:prepare-npm-package
compile:typescript
: Compiles typescript using thegulp-typescript
plugincompile:typescript:aot
: Compiles typescript using the@angular/compiler-cli
ensuring an AOT compliant libraryclean:dist
: Cleansdist
directorybuild:prepare-npm-package
: Prepares publishable npm package inside of thedist
directorybuild:prepare-npm-package:copy:docs
: Copies documentation files for the publishable npm packagebuild:prepare-npm-package:copy:package-json
: Copies and prepares thepackage.json
file for the publishable npm packagewatch
: Sets up a service to watch for any change to any source file and run the associated tasks to them. Really useful for developmentwatch:typescript
: Watches for changes in typescript files (ts)
File structure
.
├── dist # Compiled files
├── src # Source files
│ ├── guards
│ │ ├── abstract-authentication.guard.ts # Guard implementing CanActivate
│ │ ├── authenticated.guard.ts # Guard preventing access to unauthenticated users
│ │ └── not-authenticated.guard.ts # Guard peventing access to authenticated users
│ ├── resolvers
│ │ └── acitve-context.resolver.ts # Resolver that checks if there's an activeContext
│ ├── services
│ │ ├── auth.service.ts # Interface and token to use when implementing an Auth Service
│ │ └── carbon-auth.service.ts # Service implementing the Auth Service usin Carbon
│ ├── boot.ts # Exports appInjectorFn, CARBON_PROVIDERS and activeContext
│ ├── guards.ts # Exports guards
│ ├── index.ts # Exports boot, guards, services and resolvers
│ ├── resolvers.ts # Exports resolvers
│ └── services.ts # Exports services
├── gitignore # Ignore file for git
├── .travis.yml # Travis configuration file
├── CHANGELOG # File to track package changes
├── gulpfile.js # Gulp's tasks definition file
├── LICENSE
├── package.json # npm configuration file
├── README.md # this
└── tsconfig.json # Typescript and Angular compiler configuration file.
TODO
- Linting
- Testing
License
Copyright (c) 2015-present, Base22 Technology Group, LLC.
All rights reserved.
This source code is licensed under the BSD-style license found in the
LICENSE file in the root directory of this source tree.