ng-material-crank

This project was created in order to try features of Angular, Angular Material and Webpack. In a nutshell, this is a single-page app which loads photos from Flickr using Http and shows them in the form of cards. The cards are divided into three groups that are actually Routes: the photostream, the list of photo albums and the content of the albums.

Please visit the live demo to test the app in action.

Legal

This software uses the Flickr API but is not endorsed or certified by Flickr.

The source code is distributed under the MIT license. Its copy is available in the LICENSE file. The terms of the license don't apply to photos/videos obtained from Flickr. Each photo/video may have its own author and license.

Setup

• Install Node and Yarn
• Clone the repo git clone https://github.com/AndreySenov/ng-material-crank.git [*]
• Change the current working directory to the clone location cd ng-material-crank
• Run git update-index --assume-unchanged define.json
• Open the define.json file and replace the asterisks with your Flickr API key and user id:

{
  "flickr": {
    "apiKey": "********",
    "userId": "********"
  }
}

• Run yarn to download dependencies

* Alternatively, you can either fork the repo first then clone your fork or just download a ZIP archive with the source code.

Build

Run yarn build to make a production build of the project. The build artifacts are placed in the dist/ subdirectory. There will be the following chunks:

• runtime.{hash}.js - the Webpack runtime chunk.
• polyfill.{hash}.js - polyfilling libs.
• vendor.{hash}.js - 3rd party dependencies.
• app.{hash}.js - the application code along with external HTML templates of Angular components.
• vendor.{hash}.css - style rules imported from 3rd party libs.
• app.{hash}.css - the application style rules.

Development server

Run yarn serve to start serving a development bundle on port 8080. The app will be available at localhost:8080 and automatically reloaded when any source files are changed. The bundle contains source maps so you'll be able to debug the code. If you need to choose a different port number, add port: <number> entry to the devServer section of the webpack.config.ts file.