{"id":51031046,"url":"https://github.com/dreamfactorysoftware/angular2-sdk","last_synced_at":"2026-06-22T00:30:57.769Z","repository":{"id":142731726,"uuid":"52290256","full_name":"dreamfactorysoftware/angular2-sdk","owner":"dreamfactorysoftware","description":"An address book app for Angular 2 showing user registration, user login, and CRUD","archived":false,"fork":false,"pushed_at":"2023-12-06T22:37:35.000Z","size":76884,"stargazers_count":32,"open_issues_count":7,"forks_count":20,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-05T00:35:00.197Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dreamfactorysoftware.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-02-22T17:10:31.000Z","updated_at":"2023-09-01T11:19:51.000Z","dependencies_parsed_at":"2023-12-06T23:29:23.266Z","dependency_job_id":null,"html_url":"https://github.com/dreamfactorysoftware/angular2-sdk","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/dreamfactorysoftware/angular2-sdk","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamfactorysoftware%2Fangular2-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamfactorysoftware%2Fangular2-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamfactorysoftware%2Fangular2-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamfactorysoftware%2Fangular2-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dreamfactorysoftware","download_url":"https://codeload.github.com/dreamfactorysoftware/angular2-sdk/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamfactorysoftware%2Fangular2-sdk/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34630753,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-21T02:00:05.568Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-22T00:30:57.707Z","updated_at":"2026-06-22T00:30:57.761Z","avatar_url":"https://github.com/dreamfactorysoftware.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Address Book for Angular 2\r\n==========================\r\n\r\nThis repo contains a sample address book application for Angular 2 that demonstrates how to use the DreamFactory REST API. It includes new user registration, user login, and CRUD for related tables.\r\n\r\n#Getting a DreamFactory instance\r\n\r\nTo download and install DreamFactory, follow the instructions [here](http://wiki.dreamfactory.com/DreamFactory/Installation). Alternatively, you can create a [free hosted developer account](http://www.dreamfactory.com) at www.dreamfactory.com if you don't want to install DreamFactory locally.\r\n\r\n#Configuring your DreamFactory instance to run the app\r\n\r\n- Enable [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) for development purposes.\r\n    - In the admin console, navigate to the Config tab and click on CORS in the left sidebar.\r\n    - Click Add.\r\n    - Set Origin, Paths, and Headers to *.\r\n    - Set Max Age to 0.\r\n    - Allow all HTTP verbs and check the Enabled box.\r\n    - Click update when you are done.\r\n    - More info on setting up CORS is available [here](http://wiki.dreamfactory.com/DreamFactory/Tutorials/Enabling_CORS_Access).\r\n\r\n- Create a default role for new users and enable open registration\r\n    - In the admin console, click the Roles tab then click Create in the left sidebar.\r\n    - Enter a name for the role and check the Active box.\r\n    - Go to the Access tab.\r\n    - Add a new entry under Service Access (you can make it more restrictive later).\r\n        - set Service = All\r\n        - set Component = *\r\n        - check all HTTP verbs under Access\r\n        - set Requester = API\r\n    - Click Create Role.\r\n    - Click the Services tab, then edit the user service. Go to Config and enable Allow Open Registration.\r\n    - Set the Open Reg Role Id to the name of the role you just created.\r\n    - Make sure Open Reg Email Service Id is blank, so that new users can register without email confirmation.\r\n    - Save changes.\r\n\r\n- Make sure you have a SQL database service named 'db'. Most DreamFactory instances have a default 'db' service for SQLite. You can add one by going to the Services tab in the admin console and creating a new SQLite service. Make sure you set the name to 'db'.\r\n\r\n- Import the package file for the app.\r\n    - From the Apps tab in the admin console, click Import and click 'Address Book for Angular 2' in the list of sample apps. The Address Book package contains the application description, schemas, and sample data.\r\n    - Leave storage service and folder blank. You will be running the app locally on your machine so no file storage is required.\r\n    - Click the Import button. If successful, your app will appear on the Apps tab. You may have to refresh the page to see your new app in the list.\r\n\r\n- Edit your app API key and instance URL\r\n    - Edit app/config/constants.ts and set DREAMFACTORY_API_KEY to the key for your new app. The API key is shown on the app details in the Apps tab of the admin console. Set DREAMFACTORY_INSTANCE_URL to the base URL for your DreamFactory instance.\r\n\r\n#How to run the project on your local machine\r\n\r\n##Prerequisites\r\n\r\n- node v4.x.x higher and npm 2.14.7\r\n\r\n```bash\r\ngit clone https://github.com/dreamfactorysoftware/angular2-sdk.git\r\ncd angular2-sdk\r\n# paste your DREAMFACTORY_INSTANCE_URL and DREAMFACTORY_API_KEY in app/config/constants.ts\r\nnpm install -g nativescript\r\nnpm install -g typescript\r\nnpm install\r\nnpm start\r\n```\r\n\r\n#Example API calls \r\n\r\nThis app has a base HTTP service, an interceptor, and a login module\r\nwhich takes care of attaching authorization headers to every outgoing\r\nrequest. Therefore the BaseHttpRequest module should be imported in every\r\ncomponent that wants to make API calls.\r\n\r\nAngular 2 does not encourage the use of globals so as a workaround in the\r\nBaseHttpService we have an HTTP object which will be used for every HTTP\r\nAPI call. The login module will have the following code which takes care\r\nof setting the default headers for all requests.\r\n\r\n```javascript\r\nthis.httpService.http._defaultOptions.headers.set('X-Dreamfactory-Session-Token',\r\ndata \u0026\u0026 data.session_token);\r\n```\r\n\r\nwhere httpService is a BaseHttpService object.\r\n\r\n##Fetching data from server\r\n\r\nIn the current project we have separated the model, service, and the\r\ncontroller. We include all the business logic in services. It is\r\nalways recommended to keep the controller dumb and only interact with the\r\nUI. Interaction with the UI should be in the controllers and business logic should be\r\ndelegated to the services. For example see the following definition of a model and a service which takes\r\ncare of getting all contacts using an HTTP API call:\r\n\r\n```javascript\r\nexport class Contact {\r\n  constructor (\r\n    public id:string,\r\n    public firstName:string = '',\r\n    public lastName:string = '',\r\n    public image:string = '',\r\n    public skype:string = '',\r\n    public twitter:string = '',\r\n    public notes:string = ''\r\n  ) { }\r\n\r\n  static fromJson (json:any) {\r\n    if (!json) return;\r\n\r\n    return new Contact (\r\n      json.id,\r\n      json.first_name,\r\n      json.last_name,\r\n      json.image_url,\r\n      json.skype,\r\n      json.twitter,\r\n      json.notes\r\n    );\r\n  }\r\n\r\n  toJson (stringify?: boolean):any {\r\n    var doc = {\r\n      id: this.id,\r\n      first_name: this.firstName,\r\n      last_name: this.lastName,\r\n      image_url: this.image,\r\n      skype: this.skype,\r\n      twitter: this.twitter,\r\n      notes: this.notes\r\n    };\r\n\r\n    return stringify ? JSON.stringify({ resource: [doc] }) : doc;\r\n  }\r\n\r\n}\r\n```\r\n\r\n```javascript\r\n@import {Contact} from '../models/contact.ts';\r\n@import {BaseHttpService} from './BaseHttpService';\r\n\r\nexport class ContactService {\r\n  constructor (private httpService: BaseHttpService) {\r\n  }\r\n\r\n  query (params: UrlSerarchParams) {\r\n    this.httpService.http.get('/api/v2/_db/table/contacts', { search: params })\r\n    .map((response) =\u003e {\r\n      return response.json().resource.map((item) {\r\n        return Contact.fromJson(item);\r\n      })\r\n    });\r\n  }\r\n}\r\n```\r\n\r\nand in the controller or the in Angular 2 we should specify which component we will\r\nsubscribe to the above service. \r\n\r\n```javascript \r\n\r\n@Component({\r\n  selector: 'contact-list',\r\n  templateUrl: './components/contact-list/contact-list.html',\r\n  styleUrls: ['./components/contact-list/contact-list.css'],\r\n  providers: [ContactService, BaseHttpService],\r\n  directives: [ROUTER_DIRECTIVES]\r\n})\r\n\r\nexport class ContactListCmp {\r\n  public contacts: Contact[] = [];\r\n          \r\n    constructor (private contactService: ContactService, private\r\n    router: Router) {\r\n      this.getList();\r\n    }\r\n          \r\n    getList () {\r\n      let self = this;\r\n      let params: URLSearchParams = new URLSearchParams();\r\n      params.set('order', 'last_name+ASC');\r\n          \r\n      this.contactService.query(params)\r\n        .subscribe((contacts: Contact[]) =\u003e {\r\n          self.contacts = contacts\r\n        });\r\n    }\r\n}\r\n```\r\n\r\nThe getList method creates a URLSearchParams object which has the url\r\nparams to be sent on the request. These params will be sent to the\r\nservice which in turn will send to server in the form of query params.\r\n\r\n##Creating/Updating a record\r\n\r\nWe will extend out contact service to include one more function which\r\ntakes care of creating/updating a record.\r\n\r\n```javascript\r\nsave (contact: Contact) {\r\n  if (contact.id) {\r\n    return this.httpService.http.put(constants.DREAMFACTORY_INSTANCE_URL + '/api/v2/db/_table/contact/' + contact.id, contact.toJson(true))\r\n      .map((data) =\u003e {\r\n        return data;\r\n      });\r\n  } else {\r\n      return this.httpService.http.post(constants.DREAMFACTORY_INSTANCE_URL + '/api/v2/db/_table/contact', contact.toJson(true))\r\n        .map((data) =\u003e {\r\n          return data;\r\n        });\r\n  }\r\n}\r\n```\r\n\r\nThe above method takes a contact object as a param and decides whether to 'PUT' or 'POST' based on whether the object has an id or not.\r\n\r\n```javascript\r\nsave () {\r\n  var self = this;\r\n  var isNew = !!this.contact.id;\r\n\r\n  this.contactService.save(this.contact)\r\n    .subscribe((response) =\u003e {\r\n      if (isNew)\r\n        alert('New contact created');\r\n      else\r\n        alert('Contact updated');\r\n    })\r\n}\r\n```\r\n\r\n\r\n##Deleting records\r\n\r\n```javascript\r\nremove (id: string) {\r\n  return this.httpService.http\r\n    .delete(this.baseResourceUrl + '/' + id)\r\n    .map((response) =\u003e {\r\n      var result: any = response.json();\r\n      return result.id;\r\n    });\r\n}\r\n```\r\n\r\n#Additional Resources\r\n\r\nMore detailed information on the DreamFactory REST API is available [here](http://wiki.dreamfactory.com/DreamFactory/API).\r\n\r\nThe live API documentation included in the admin console is a great way to learn how the DreamFactory REST API works.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreamfactorysoftware%2Fangular2-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdreamfactorysoftware%2Fangular2-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreamfactorysoftware%2Fangular2-sdk/lists"}