{"id":21129106,"url":"https://github.com/pmcalabrese/angular-typescript","last_synced_at":"2025-07-09T00:31:47.445Z","repository":{"id":32911720,"uuid":"36506913","full_name":"pmcalabrese/angular-typescript","owner":"pmcalabrese","description":"Tiny Angular version 1 app written in Typescript with modularized Gulp tasks. Perfect as boilerplate.","archived":false,"fork":false,"pushed_at":"2016-03-12T17:16:37.000Z","size":164,"stargazers_count":9,"open_issues_count":0,"forks_count":5,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-04-13T09:10:28.683Z","etag":null,"topics":["angular","frontend","gulp","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pmcalabrese.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-29T13:47:04.000Z","updated_at":"2021-01-15T09:51:16.000Z","dependencies_parsed_at":"2022-08-01T09:38:58.599Z","dependency_job_id":null,"html_url":"https://github.com/pmcalabrese/angular-typescript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmcalabrese%2Fangular-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmcalabrese%2Fangular-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmcalabrese%2Fangular-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pmcalabrese%2Fangular-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pmcalabrese","download_url":"https://codeload.github.com/pmcalabrese/angular-typescript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225470732,"owners_count":17479368,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["angular","frontend","gulp","typescript"],"created_at":"2024-11-20T05:15:57.324Z","updated_at":"2024-11-20T05:15:57.758Z","avatar_url":"https://github.com/pmcalabrese.png","language":"JavaScript","readme":"# Angular Typescript app\n\nTiny Angular app written in Typescript perfect as boilerplate.\n\n![Angular Typescript](./angular-typescript.png)\n\n## Getting started\n\nPrerequisites: *You need to have [nodejs npm](https://nodejs.org/) and [git](https://git-scm.com/) installed*\n\n- Clone or download the repo\n- Run ```sudo npm install -g gulp bower tsd``` ( *install global tools* )\n- ```cd``` into the project folder\n- Run ```npm run build``` ( *install project tools, libs and typings* )\n- run ```gulp watch``` (if you want build and serve the frontend and automatic reload the browser in case of changes, **good for development**)\n- or ```gulp``` ( *build frontend* ) and ```gulp serve``` ( *serve the ```dist``` folder* ).\n\nNote: *if you want to change port of the static server go to ```gulp_tasks/gulp.serve.js``` file*\n\n## TL;DR\n\n###Folder structure\n\n- src folder contains the source code, here is where you need to work\n- dist folder contains the deployed folder this is what is served when you run ```gulp serve``` or ```gulp watch```\n- in the ```src``` folder the app is bootstrap in the ```components/app.ts``` file\n- in the ```src``` folder each component has its own folder containing controller and view. The home controller for example will have:\n\n- ```components/home/home.ts``` (angular controller in Typescript)\n- ```components/home/home.html``` (HTML view)\n- ```components/home/_home.scss``` (SASS style)\n\n###Tasks (Gulp)\n\n- The app use [Gulp](http://gulpjs.com/) as task manager, mostly you will use ```gulp watch``` and ```gulp```. You can see all the tasks in by running ```gulp help```.\n- The configuration for gulp is in ```gulp.config.js``` file.\n\n**It supports sourcemaps for Typescript**\n\n![Angular Typescript](./typescript-sourcemaps.png)\n\n###Frontend library dependency manager (Bower)\n\n- Third party libs are managed with [Bower](http://bower.io/). It comes down to two basically commands: ```bower install \u003cpackage\u003e``` and ```bower update```. Bower keeps track of these packages in a manifest file, bower.json.\n\n###Typescript\n\n- This app is written in [Typescript](http://www.typescriptlang.org/).\n- The Typescript Definition are managed by [tsd](https://www.npmjs.com/package/tsd) and are downloaded by tsd in the folder ```typings```. The type definition file for the libs (```src/typings/tsd.d.ts```) is automatically genereated.\n- For manage type definitions there are two main commands ```tsd install \u003cpackage\u003e --resolve --save``` for install and ```tsd query angular*``` for search, for more info follow the guide on [tsd](https://www.npmjs.com/package/tsd).\n- The type definition references of your app go to the file ```src/_app.d.ts```.\n\n\nUseful resources for learn Typescript and Angular:\n- http://kwilson.me.uk/blog/writing-cleaner-angularjs-with-typescript-and-controlleras/\n- https://github.com/tastejs/todomvc/blob/gh-pages/examples/typescript-angular/js/controllers/TodoCtrl.ts\n\n# Resources \u0026 Articles\n__Very very good read on folder structure and Style guide__\n\n[Folder structure](https://scotch.io/tutorials/angularjs-best-practices-directory-structure)\n\n[Todd Motto Style guide](https://github.com/toddmotto/angularjs-styleguide)\n\n[John Papa Style guide](https://github.com/johnpapa/angular-styleguide)\n\n[Simple Angualr Typescript written by Dan Wahlin](https://github.com/DanWahlin/AngularIn20TypeScript)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmcalabrese%2Fangular-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpmcalabrese%2Fangular-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpmcalabrese%2Fangular-typescript/lists"}