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
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
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
angular-app-example is released under the BSD 3-Clause License. See the bundled LICENSE for details.