Skip to content
An example app for Angular
TypeScript HTML CSS JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
.vscode Initialize the project Jan 29, 2018
e2e fix(configuration): add/update configurations May 20, 2018
src
.editorconfig Initialize the project Jan 29, 2018
.gitignore Initialize the project Jan 29, 2018
.jsbeautifyrc fix(configuration): add/update configurations May 20, 2018
LICENSE
README.md docs: add some features May 26, 2018
README.zh_CN.md docs: add some features May 26, 2018
angular.json feat(angular-cli): update `@angular/cli` and related configurations May 13, 2018
karma.conf.js
media.gif feat: add project documentation May 20, 2018
package-lock.json dependencies: upgrade packages to latest Jan 13, 2019
package.json dependencies: upgrade packages to latest Jan 13, 2019
protractor.conf.js Initialize the project Jan 29, 2018
proxy.json feat: use the new URL and proxy May 25, 2018
sass-lint.yml install `sass-lint` package Feb 7, 2018
tsconfig.json Initialize the project Jan 29, 2018
tslint.json feat(angular-cli): update `@angular/cli` and related configurations May 13, 2018

README.md

angular-app-example

angular-app-example

This is an example app for Angular.

中文文档

The demo account information:

  • Username: demo
  • Password: demo

Note: Please don't change the password. You can add an account for yourself

This application provides the following features:

  • Google Material Design
  • Sass themes
  • Use the beautiful RESTful API
  • No cookies
  • User Login
  • Charts and Datatable
  • Create/Update/Delete Data
  • Search/Sort Data
  • File upload
  • HTTP Interceptor

Quick Start

git clone https://github.com/daixianceng/angular-app-example.git
cd angular-app-example

# Install Angular CLI if necessary
npm install -g @angular/cli@latest

# For Windows user if an error occurred
npm install -g windows-build-tools

# Install dependencies
npm install
# Run application in development
npm start

Now you can open localhost:4200 in your borwser. The project depends on the API of yii2-app-example. This is a clean and beautiful RESTful API, you will love it. The project has a default proxy to https://demo.zhaidongxi.com/yii2-app-example-backend-api, so you do not need to install yii2-app-example.

Compile the project:

npm run build

Directory Layout

Before you start, take a moment to see how the project structure looks like:

.
├── /dist/                           # The folder for compiled output
├── /e2e/                            # The end-to-end tests
├── /node_modules/                   # 3rd-party libraries and utilities
├── /src/                            # The source code of the application
│   ├── /app/                        # The core source code
│   │   ├── /common/                 # The utilities
│   │   ├── /components/             # Angular components
│   │   ├── /containers/             # The page modules
│   │   ├── /layouts/                # The page layouts
│   │   ├── /models/                 # The data models
│   │   ├── /services/               # Angular services
│   │   ├── /stores/                 # The stores of the application
│   │   ├── /app-routing.module.ts   # The routing module
│   │   ├── /app.component.html      # The template of the root component
│   │   ├── /app.component.scss      # The style of the root component
│   │   ├── /app.component.spec.ts   # The unit test for root component
│   │   ├── /app.component.ts        # The root component
│   │   └── /app.modules.ts          # The root module
│   ├── /assets/                     # Static files which are copied into the /dist folder
│   ├── /environments/               # The folder contains environment configurations
│   │   ├── /environment.prod.ts     # The file for production environment
│   │   └── /environment.ts          # The file for development environment
│   ├── /themes/                     # The folder contains themes of the application
│   ├── /app-theme.scss              # Define the current theme
│   ├── /favicon.ico                 # Angular icon
│   ├── /index.html                  # The main HTML page
│   ├── /main.ts                     # The main entry point for application
│   ├── /polyfills.ts                # The file includes polyfills
│   ├── /styles.scss                 # The global styles of the application
│   ├── /test.ts                     # The main entry point for unit tests
│   ├── /tsconfig.app.json           # TypeScript compiler configuration for application
│   ├── /tsconfig.spec.json          # TypeScript compiler configuration for unit tests
│   └── /typings.d.ts                # TypeScript Typings
├── .editorconfig                    # Configuration for your editor
├── .gitignore                       # Git ignore configuration
├── .jsbeautifyrc                    # Configuration for Beautify plugin
├── angular.json                     # Configuration for Angular CLI
├── karma.conf.js                    # Configuration for Karma
├── LICENSE                          # The license of the project
├── media.gif                        # The project demo animation file
├── package.json                     # The list of 3rd party libraries and utilities
├── protractor.conf.js               # End-to-end test configuration for Protractor
├── proxy.json                       # The proxy configuration in development
├── README.md                        # Documentation
├── README.zh_CN.md                  # Chinese documentation
├── sass-lint.yml                    # Configuration for Sass Lint
├── tsconfig.json                    # TypeScript compiler configuration
└── tslint.json                      # Linting configuration for TSLint and Codelyzer

License

angular-app-example is released under the BSD 3-Clause License. See the bundled LICENSE for details.

You can’t perform that action at this time.