An Angular starter kit featuring Angular 6, Ahead of Time Compile, Router, Forms,Http,Services,Tests, E2E), Karma, Protractor, Jasmine, Istanbul, TypeScript, @types, TsLint, Codelyzer, Hot Module Replacement, and Webpack.
If you're looking for Angular 1.x please use NG6-starterIf you're looking to learn about Webpack and ES6 Build Tools check out ES6-build-toolsIf you're looking to learn TypeScript see TypeStrong/learn-typescriptIf you're looking for something easier to get started with then see the angular-seed that I also maintain gdi2290/angular-seed
This seed repo serves as an Angular starter for anyone looking to get up and running with Angular and TypeScript fast. Using a Webpack 4 for building our files and assisting with boilerplate. We're also using Protractor for our end-to-end story and Karma for our unit tests.
Make sure you have Node version >= 8.0 and (NPM >= 5 or Yarn )
Clone/Download the repo then edit
app.component.ts
inside/src/app/app.component.ts
# clone our repo
# --depth 1 removes all but one .git commit history
git clone --depth 1 https://github.com/gdi2290/angular-starter.git
# change directory to our repo
cd angular-starter
# install the repo with npm
npm install
# start the server
npm start
# use Hot Module Replacement
npm run server:dev:hmr
# if you're in China use cnpm
# https://github.com/cnpm/cnpm
go to http://0.0.0.0:3000 or http://localhost:3000 in your browser
We use the component approach in our starter. This is the new standard for developing Angular apps and a great way to ensure maintainable code by encapsulation of our behavior logic. A component is basically a self contained app usually in a single file or a folder with each concern as a file: style, template, specs, e2e, and component class. Here's how it looks:
angular-starter/
├──config/ * our configuration
| ├──build-utils.js * common config and shared functions for prod and dev
| ├──config.common.json * config for both environments prod and dev such title and description of index.html
| ├──config.dev.json * config for devevlopment environment
| ├──config.prod.json * config for production environment
│ │ (note: you can load your own config file, just set the evn ANGULAR_CONF_FILE with the path of your own file)
| ├──helpers.js * helper functions for our configuration files
| ├──spec-bundle.js * ignore this magic that sets up our Angular testing environment
| ├──karma.conf.js * karma config for our unit tests
| ├──protractor.conf.js * protractor config for our end-to-end tests
│ ├──webpack.common.js * common tasks for webpack build process shared for dev and prod
│ ├──webpack.dev.js * our development webpack config
│ ├──webpack.prod.js * our production webpack config
│ └──webpack.test.js * our testing webpack config
│
├──src/ * our source files that will be compiled to javascript
| ├──main.browser.ts * our entry file for our browser environment
│ │
| ├──index.html * Index.html: where we generate our index page
│ │
| ├──polyfills.ts * our polyfills file
│ │
│ ├──app/ * WebApp: folder
│ │ ├──app.component.spec.ts * a simple test of components in app.component.ts
│ │ ├──app.e2e.ts * a simple end-to-end test for /
│ │ └──app.component.ts * a simple version of our App component components
│ │
│ └──assets/ * static assets are served here
│ ├──icon/ * our list of icons from www.favicon-generator.org
│ ├──service-worker.js * ignore this. Web App service worker that's not complete yet
│ ├──robots.txt * for search engines to crawl your website
│ └──humans.txt * for humans to know who the developers are
│
│
├──tslint.json * typescript lint config
├──typedoc.json * typescript documentation generator
├──tsconfig.json * typescript config used outside webpack
├──tsconfig.webpack.json * config that webpack uses for typescript
├──package.json * what npm uses to manage its dependencies
└──webpack.config.js * webpack main configuration file
What you need to run this app:
node
and npm
(brew install node
)v8.x.x
+ (or v9.x.x
) and NPM 5.x.x
+If you have
nvm
installed, which is highly recommended (brew install nvm
) you can do anvm install --lts && nvm use
in$
to run with the latest Node LTS. You can also have thiszsh
done for you automatically
Once you have those, you should install these globals with npm install --global
:
webpack
(npm install --global webpack
)webpack-dev-server
(npm install --global webpack-dev-server
)karma
(npm install --global karma-cli
)protractor
(npm install --global protractor
)typescript
(npm install --global typescript
)tslint
(npm install --global tslint@4.5.1
)fork
this repoclone
your forknpm install webpack-dev-server rimraf webpack -g
to install required global dependenciesnpm install
to install all dependencies or yarn
npm run server
to start the dev server in another tabAfter you have installed all dependencies you can now run the app. Run npm run server
to start a local server using webpack-dev-server
which will watch, build (in-memory), and reload for you. The port will be displayed to you as http://0.0.0.0:3000
(or if you prefer IPv6, if you're using express
server, then it's http://[::1]:3000/
).
# development
npm run server
# production
npm run build:prod
npm run server:prod
# development
npm run build:dev
# production (jit)
npm run build:prod
# AoT
npm run build:aot
npm run server:dev:hmr
npm run watch
npm run test
npm run watch:test
# update Webdriver (optional, done automatically by postinstall script)
npm run webdriver:update
# this will start a test server and launch Protractor
npm run e2e
# this will test both your JIT and AoT builds
npm run ci
npm run e2e:live
npm run build:docker
Configuration files live in config/
we are currently using webpack, karma, and protractor for different stages of your application
The following are some things that will make AoT compile fail.
form.controls.controlName
, use form.get(‘controlName’)
control.errors?.someError
, use control.hasError(‘someError’)
For more detailed guide on AoT's Do's and Don'ts refer to https://github.com/rangle/angular-2-aot-sandbox
Any stylesheets (Sass or CSS) placed in the src/styles
directory and imported into your project will automatically be compiled into an external .css
and embedded in your production builds.
For example to use Bootstrap as an external stylesheet:
styles.scss
file (name doesn't matter) in the src/styles
directory.npm install
the version of Boostrap you want.styles.scss
add @import '~bootstrap/scss/bootstrap.scss';
src/app/app.module.ts
add underneath the other import statements: import '../styles/styles.scss';
You can include more examples as components but they must introduce a new concept such as Home
component (separate folders), and Todo (services). I'll accept pretty much everything so feel free to open a Pull-Request
To take full advantage of TypeScript with autocomplete you would have to install it globally and use an editor with the correct TypeScript plugins.
TypeScript 2.7.x includes everything you need. Make sure to upgrade, even if you installed TypeScript previously.
npm install --global typescript
We have good experience using these editors:
Install Debugger for Chrome and see docs for instructions to launch Chrome
The included .vscode
automatically connects to the webpack development server on port 3000
.
When you include a module that doesn't include Type Definitions inside of the module you can include external Type Definitions with @types
i.e, to have youtube api support, run this command in terminal:
npm i @types/youtube @types/gapi @types/gapi.youtube
In some cases where your code editor doesn't support Typescript 2 yet or these types weren't listed in tsconfig.json
, add these to "src/custom-typings.d.ts" to make peace with the compile check:
import '@types/gapi.youtube';
import '@types/gapi';
import '@types/youtube';
When including 3rd party modules you also need to include the type definition for the moduleif they don't provide one within the module. You can try to install it with @types
npm install @types/node
npm install @types/lodash
If you can't find the type definition in the registry we can make an ambient definition inthis file for now. For example
declare module "my-module" {
export function doesSomething(value: string): string;
}
If you're prototyping and you will fix the types later you can also declare it as type any
declare var assert: any;
declare var _: any;
declare var $: any;
If you're importing a module that uses Node.js modules which are CommonJS you need to import as
import * as _ from 'lodash';
@Injectable()
for your service for typescript to correctly attach the metadata (this is a TypeScript problem)/src/app/home/home.component.spec.ts
EACCES
and EADDRINUSE
errors?
EADDRINUSE
error means the port 3000
is currently being used and EACCES
is lack of permission for webpack to build files to ./dist/
sass
for css?loaders: ['raw-loader','sass-loader']
and @Component({ styleUrls: ['./filename.scss'] })
see Wiki page How to include SCSS in components, or issue #136 for more information.vscode-chrome-debug
support?
launch.json
see issue #1440.0.0.0
so revert these changes #205node_modules/
and run npm cache clean
then npm install
npm run server:dev:hmr
RangeError: Maximum call stack size exceeded
mangle
to false
then you should be good.Error:Error: Parse tsconfig error [{"messageText":"Unknown compiler option 'lib'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'strictNullChecks'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'baseUrl'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'paths'.","category":1,"code":5023},{"messageText":"Unknown compiler option 'types'.","category":1,"code":5023}]
node_modules/typescript
and run npm install typescript@beta
. This repo now uses ts 2.0c:\[path to angular-starter]
to C:\[path to angular-starter]
see 926#issuecomment-245223547Contact us anytime for anything about this repo or Angular
@PatrickJS__
on twitter
To run project you only need host machine with operating system with installed git (to clone this repo)and docker and thats all - any other software is not needed(other software like node.js etc. will be automatically downloaded and installed inside docker container during build step based on dockerfile).
brew cask install docker
And run docker by Mac bottom menu> launchpad > docker (on first run docker will ask you about password)
sudo apt-get update
sudo apt-key adv --keyserver hkp://p80.pool.sks-keyservers.net:80 --recv-keys 58118E89F3A912897C070ADBF76221572C52609D
sudo apt-add-repository 'deb https://apt.dockerproject.org/repo ubuntu-xenial main'
sudo apt-get update
apt-cache policy docker-engine
sudo apt-get install -y docker-engine
sudo systemctl status docker # test: should be ‘active’
And add your user to docker group (to avoid sudo
before using docker
command in future):
sudo usermod -aG docker $(whoami)
and logout and login again.
Because node.js is big memory consumer you need 1-2GB RAM or virtual memory to build docker image(it was successfully tested on machine with 512MB RAM + 2GB virtual memory - building process take 7min)
Go to main project folder. To build image type:
docker build -t angular-starter .
The angular-starter name used in above commands is only example image name.To remove intermediate images created by docker on build process, type:
docker rmi -f $(docker images -f "dangling=true" -q)
To run created docker image on localhost:8080 type (parameter -p 8080:80
is host:container port mapping)
docker run --name angular-starter -p 8080:80 angular-starter &
And that's all, you can open browser and go to localhost:8080.
To create and run docker image on localhost:8080 as part of large project you may use docker-compose. Type
docker-compose up
And that's all, you can open browser and go to localhost:8080.
If you want to run image as virtual-host on sub-domain you must setup proxy. You should install proxy and set sub-domain in this way:
docker run -d -p 80:80 --name nginx-proxy -v /var/run/docker.sock:/tmp/docker.sock:ro jwilder/nginx-proxy:alpine
And in your /etc/hosts
file (linux) add line: 127.0.0.1 angular-starter.your-domain.com
or in yor hosting addfolowing DNS record (wildchar *
is handy because when you add new sub-domain in future, you don't need to touch/add any DNS record)
Type: CNAME
Hostname: *.your-domain.com
Direct to: your-domain.com
TTL(sec): 43200
And now you are ready to run image on subdomain by:
docker run -e VIRTUAL_HOST=angular-starter.your-domain.com --name angular-starter angular-starter &
docker exec -t -i angular-starter /bin/bash
You can quickly create a free site to get started using thisstarter kit in production on Netlify:
Assuming you have SonarQube 5.5.6 (LTS) installed
npm install --global sonar-scanner
npm install karma-sonarqube-unit-reporter --save-dev
sonar-project.properties
file for the property sonar.host.url
to point to your SonarQube server. By default this assumes that the SonarQube server is running locally using the default portsonar.host.url=<Sonar Host URL and Port>
npm run test:sonar
sonar-scanner
sonarQubeUnitReporter: {
sonarQubeVersion: '6.x',
}
enjoy — PatrickJS
Angular 是一款十分流行且好用的 Web 前端框架,目前由 Google 维护。这个条目收录的是 Angular 2 及其后面的版本。由于官方已将 Angular 2 和之前的版本 Angular.js 分开维护(两者的 GitHub 地址和项目主页皆不相同),所以就有了这个页面。传送门:Angular.js 特性 跨平台 渐进式 Web 应用 借助现代化 Web 平台的力量,交付 app
即将到来的Angular 2框架是使用TypeScript开发的。 因此Angular和TypeScript一起使用非常简单方便。 Angular团队也在其文档里把TypeScript视为一等公民。 正因为这样,你总是可以在Angular 2官网(或Angular 2官网中文版)里查看到最新的结合使用Angular和TypeScript的参考文档。 在这里查看快速上手指南,现在就开始学习吧!
从头开始创建项目 lint你的代码 运行您的单元测试和端到端测试。 Angular 2 CLI目前只在TypeScript中生成框架,稍后还会有其他版本。
这小节内容是译者加的,因为我认为对于新手而言,学习一个框架是有成本的,特别是对于一个不算简单的技术来说,我希望这篇教程是对新手友好的,所以我首先要让你放心的将时间和精力投入到Angular2 中。那我们先不谈技术细节,先用数据说话。 这里我多说一句,最近看一些文章中谷歌趋势截图,大都没有把范围限定在“编程”上。图中可以看出Vue2非常少,所以在下面比较中不再单独统计。 教程数量 这里我选取的主要是
我们已经在Highcharts Configuration Syntax一章中看到了用于绘制图表的配置 。 下面给出角度计图表的示例。 配置 (Configurations) 现在让我们看一下所采取的其他配置/步骤。 chart.type 将图表类型配置为基于计量。 将类型设置为“规格”。 var chart = { type: 'guage' }; pane 此类型仅适用于极坐标图和角度
角度计图表用于绘制仪表/仪表类型图表。 在本节中,我们将讨论不同类型的角度计图表。 Sr.No. 图表类型和描述 1 角度计 角度表。 2 实心仪表 实心图表。 3 Clock 时钟。 4 带双轴的仪表 带双轴的仪表图。 5 VU表 VU表图表。
Highcharts Angular 是我们基于 Angular 框架封装的 Highcharts,可以很方便的在 Angular 开发环境中使用 Highcharts 创建交互性图表。 开发环境 确保您的 node, NPM, Angular 已经更新到最新版本。以下是经过测试和要求的版本: node 6.10.2+ npm 4.6.1+ @angular/cli 6.0.0+ Highchar
Angular Kickstart 是基于 AngularJS,GulpJS 和 Bower 的完整可伸缩构建系统,能加快 AngularJS 应用的开发。开发者只需关注代码的编写和测试,剩下的工作 AngularJS Kickstart 会帮忙完成。 特性: 5 个简单的任务:gulp serve,gulp serve:dist, gulp serve:tdd, gulp test:unit,