lizhonghui / Angular2 Demo
A simple demo for Angular 2
Stars: ✭ 77
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Angular2 Demo
Ngx Admin
Customizable admin dashboard template based on Angular 10+
Stars: ✭ 23,286 (+30141.56%)
Mutual labels: webpack, angular2
Component Pattern For Angular Js 1 X
Example of implementation of Component pattern for Angular JS 1.X using ES6 & Webpack
Stars: ✭ 75 (-2.6%)
Mutual labels: webpack, angularjs
Cc
一个基于angular5.0.0+ng-bootstrap1.0.0-beta.8+bootstrap4.0.0-beta.2+scss的后台管理系统界面(没基础的同学请先自学基础,谢谢!)
Stars: ✭ 416 (+440.26%)
Mutual labels: webpack, angular2
Tested
Angular Material in MEAN Stack Website Source
Stars: ✭ 35 (-54.55%)
Mutual labels: webpack, angularjs
Angular Hmr
🔥 Angular Hot Module Replacement for Hot Module Reloading
Stars: ✭ 490 (+536.36%)
Mutual labels: webpack, angular2
ng-apimock
Node plugin that provides the ability to use scenario based api mocking: for local development for protractor testing
Stars: ✭ 102 (+32.47%)
Mutual labels: angularjs, angular2
Codebe
CodeBe(码币)是一个是使用angular2整合各种插件的项目,包括(layer,bootstrap-table,markdown编辑器,highcharts,ckeditor,高德地图,fullcalendar 等等)。如果你有什么想要集成的插件,请告诉我,我来加进去。(请给我加个星,谢谢。)
Stars: ✭ 307 (+298.7%)
Mutual labels: angularjs, angular2
Ngautocomplete
Light-weight autocomplete component for Angular.
Stars: ✭ 52 (-32.47%)
Mutual labels: angularjs, angular2
Alfresco Ng2 Components
Alfresco Angular Components
Stars: ✭ 259 (+236.36%)
Mutual labels: webpack, angular2
Faqguru
🎒 🚀 🎉 A list of interview questions. This repository is everything you need to prepare for your technical interview.
Stars: ✭ 4,653 (+5942.86%)
Mutual labels: webpack, angularjs
Angular-Firebase-Sortable-Table
Angular Firebase Sortable Table is a module that makes tables creation with firebase an easy task.
Stars: ✭ 28 (-63.64%)
Mutual labels: angularjs, angular2
Nebular
💥 Customizable Angular UI Library based on Eva Design System 🌚✨Dark Mode
Stars: ✭ 7,368 (+9468.83%)
Mutual labels: webpack, angular2
Angular4-seed
Angular 4 Seed for Angular Forms
Stars: ✭ 37 (-51.95%)
Mutual labels: angularjs, angular2
angular2-cookie-law
Angular2+ component that provides a banner to inform users about cookie law
Stars: ✭ 38 (-50.65%)
Mutual labels: angularjs, angular2
Angular2 Webpack Boilerplate
A boilerplate for Angular 2 and Webpack
Stars: ✭ 30 (-61.04%)
Mutual labels: webpack, angular2
Angular2-Demo
慕课网课程《Angular2一小时快速入门》代码实操的示例代码。
注意
- 课程前面部分偏理论介绍,如果你对Angular本身有初步的了解再看这个视频,效果更好;
- 如果你更喜欢从实战代码开始,可以从这个Demo或者视频的第三部分开始学习。
使用
- 确保 Node 版本为 4.0 及以上
- 执行
npm install
安装依赖包 - 执行
npm start
编译并启动本地server - 打开浏览器访问 http://localhost:3000
内容
- 基于webpack的项目种子搭建(非Angular-CLI,见后面常见问题答复 #4)
- 内置指令的使用
- 自定义指令的开发与使用
- 服务的开发与使用
- 父子组件双向通讯
常见问题答复
1. 项目构建时 package.json 和 tsconfig.json 文件配置
package.json大致可以看看这个:https://github.com/lizhonghui/blog/issues/15 。关于tsconfig.json 这个涉及内容比较多,列巨几个需要关注的配置:
- compilerOptions.target: 指定 TS 编译后生产的目标语言,本例的es5表示编译后生成es5的代码,可选值有 'es3'(默认), 'es5', 'es6'。
- compilerOptions.module: 指定编译后的模块采用哪个 module 版本,可选值'none', 'commonjs', 'amd', 'system', 'umd', 'ES6'或'es2015'
- compilerOptions.moduleResolution: 指定TS代码的模块解释机制,可选值 node 和 classic
- compilerOptions.sourceMap: 是否生成source map文件
- compilerOptions.emitDecoratorMetadata:
- compilerOptions.typeRoots: 指定第三方库的类型定义的文件地址
更多选项解释可以移步这里:http://json.schemastore.org/tsconfig
2. VSCode编辑插件
几个字母生成模板有很多这样的插件,在vscode的extension里搜索“angular snippets”,有很多类似的工具,选一个喜欢的即可,且基本都可以自定义snippet。
3. 没有NG1基础可以学NG2么?
没有NG1的基础学NG2完全没问题的,有NG1的基础只是对理解NG2的部分概念有帮助,很多NG1的复杂概念在NG2里已经废弃掉了。
4. 关于Angular-CLI
本示例并不是用Angular-CLI搭建,而是从最基本的package.json开始搭建,方便从基础讲解,实际开发还是推荐使用Angular-CLI。
所以启动应用并不是用ng serve
,启动步骤如下:
npm install
npm start
运行完上面两部命令后,若没有报错,打开浏览器访问 http://localhost:3000
即可。
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].