码农视角 - Angular 框架起步
开发环境
1、npm
安装最新的Nodejs，便包含此工具。类似Nuget一样的东西，不过与Nuget不同的是，这玩意完全是命令行的。然后用npm来安装开发环境，也就是下边的angular cli。
2、Angular Cli
通过命令行创建项目，“编译”代码，启动调度环境等功能。angular本身使用typescript编写，需要通过ng命令，将相关的ts代码转换成js代码，以便在浏览器中运行。
安装angular cli
npm install -g @angular/cli
3、IDE
复杂的界面中，通过IDE可以大大提高开发的效率。官方推荐的IDE有：
Angular IDE by Webclipse
Built first and foremost for Angular. Turnkey setup for beginners; powerful for experts.
IntelliJ IDEA
Capable and Ergonomic Java * IDE
Visual Studio Code
VS Code is a Free, Lightweight Tool for Editing and Debugging Web Apps.
Webstorm
Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js
代码结构
1、程序入口
推荐将启动代码放一个单独的文件里，比如main.ts。通过ng new 命令创建的项目文件里main.js内容如下：
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
一个承载脚本的HTML页面:index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test2</title>
<base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
2、模块
模块可以认为是一个个独立的ts文件，当然要求这些文件里有export出来的类型。
3、组件
可以认为是控制器
4、模板
即视图，可以写在组件内，也可以单独的html文件。
调试测试
具体参考：https://angular.io/guide/testing
打包部署
ng build
具体参考：https://angular.io/guide/deployment
框架结构
1、模板
2、表单
3、依赖注入
4、Http客户端
5、测试
6、路由与导航
第三方UI组件
ag-Grid
A datagrid for Angular with enterprise style features such as sorting, filtering, custom rendering, editing, grouping, aggregation and pivoting.
Amexio - Angular Extensions
Amexio (Angular MetaMagic EXtensions for Inputs and Outputs) is a rich set of Angular components powered by Bootstrap for Responsive Design. UI Components include Standard Form Components, Data Grids, Tree Grids, Tabs etc. Open Source (Apache 2 License) & Free and backed by MetaMagic Global Inc
Angular Material 2
Material Design components for Angular
Clarity Design System
UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences
DevExtreme
50+ UI components including data grid, pivot grid, scheduler, charts, editors, maps and other multi-purpose controls for creating highly responsive web applications for touch devices and traditional desktops.
jQWidgets
Angular UI Components including Grids, Charts, Scheduling and more.
Kendo UI
One of the first major UI frameworks to support Angular
ng-bootstrap
The Angular version of the Angular UI Bootstrap library. This library is being built from scratch in Typescript using the Bootstrap 4 CSS framework.
ng-lightning
Native Angular components & directives for Lightning Design System
ngx-bootstrap
Native Angular directives for Bootstrap
Onsen UI
UI components for hybrid mobile apps with bindings for both Angular & AngularJS.
Prime Faces
PrimeNG is a collection of rich UI components for Angular
Semantic UI
UI components for Angular using Semantic UI
Vaadin
Material design inspired UI components for building great web apps. For mobile and desktop.
Wijmo
High-performance UI controls with the most complete Angular support available. Wijmo’s controls are all written in TypeScript and have zero dependencies. FlexGrid control includes full declarative markup, including cell templates.
码农视角 - Angular 框架起步的更多相关文章
- android码农神器 偷懒工具 android懒人框架 LoonAndroid 3 讲解
LoonAndroid 3.0 Loonandroid是一个注解框架,不涉及任何UI效果,目的是一个功能一个方法,以方法为最小颗粒度对功能进行拆解.把功能傻瓜化,简单化,去掉重复性的代码,隐藏复杂的实 ...
- 【github repo自荐】码农周刊一周精选分类
以下内容节选自我的github码农周刊整理repo,欢迎大家star. 写在最前面的话 作为最初的一批码农周刊的订阅者,不能说经历了其成长,但是确实见证了他的壮大.码农周刊确实从开始第一期的基本上都是 ...
- angular源码分析：angular的源代码目录结构说明
一.读源码,是选择"编译合并后"的呢还是"编译前的"呢? 有朋友说,读angular源码,直接看编译后的,多好,不用管模块间的关系,从上往下读就好了.但是在我看 ...
- angular源码分析：angular中的依赖注入式如何实现的
一.准备 angular的源码一份,我这里使用的是v1.4.7.源码的获取,请参考我另一篇博文:angular源码分析:angular源代码的获取与编译环境安装 二.什么是依赖注入 据我所知,依赖注入 ...
- .net 码农转战 iOS - 初探
好久没写博客了,之前还打算把毕业设计中涉及到的两个算法拿出来说说(脸型分析 + 声音分析),博文都写了一半了,后来实在太忙了,那篇随笔也就沉在草稿列表中没动过. 我原先是专职 .net 开发的,在公司 ...
- 《码农周刊》干货精选（Python 篇）
<码农周刊>已经累计发送了 38 期,我们将干货内容进行了精选.此为 Python 篇. <码农周刊>往期回顾:http://weekly.manong.io/issues/ ...
- PHP码农在Golang压力下的生存之道－PHP性能优化实践
随着国内Golang的火爆,phper的生存压力越来越大,在一次内部技术讨论中,gopher甚至提出,要什么php,写php的全部开掉,唉,码农何苦为难码农. 本文试图寻找一种有效实践,减少php w ...
- 码农很忙代理IP系统V1.0版本上线
码农很忙代理IP系统V1.0版本上线 经过为期一个月的重写和测试,新版本的码农很忙代理IP系统已于今日正式上线.新版本拥有更精准的匿名类型识别和更高效的验证调度算法. 新版本仍旧采用ASP.NET B ...
- 关于期权池Option Pools与Vesting：码农创业防身必备法器
之前又看到饿了么创始人团队纠纷的几篇文章,参考了百科.wiki.36Kr.虎嗅.知乎以及邵亦波老师的文章,对之前一直感兴趣的期权汇编初略总结了下 ,仍觉粗糙,对一些具体操作还是不甚了了,不过感觉在中国 ...
随机推荐
- layui——上传图片，并实现放大预览
一般上传文件后会返回文件的路径,然后存储到数据库,那么首先实现上传后的放大和删除功能 function uploadSmallPic() { var upload = layui.upload; up ...
- Spring Boot学习笔记(五)整合mybatis
pom文件里添加依赖 <!-- 数据库需要的依赖 --> <dependency> <groupId>org.mybatis.spring.boot</gro ...
- Java基础——面向对象
Hello 大家好,我又来啦,今天我们来说说Java的面向对象. 还记得之前去面试几家公司的实习生职位,大部分面试官都问过我有关面向对象 的问题,不知道以后还会不会问,估计是不会了吧...(:3[▓▓ ...
- [LeetCode]Generate Parentheses题解
Generate Parentheses: Given n pairs of parentheses, write a function to generate all combinations of ...
- HDU 1757 矩阵求第n的递推式
A Simple Math Problem Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- HTML中的Head标签学习
在页面加载完成的时候,标签head里的内容,是不会在页面中显示出来的.它包含了像页面的<title>(标题) ,CSS(如果你想用CSS来美化页面内容),图标和其他的元数据(比如 作者,关 ...
- netstat 检测及监测网络连接
网站没有很多流量,可查带宽却跑了几十M? 这是什么情况呢? 如果是出现这种情况,不排除是被CC了的可能.那么如何确定是否真的被CC了,被CC又有什么对应政策呢? netstat -na ,用 ...
- SSH 无法启动的原因分析及解决方法
简介 Secure Shell(缩写为 SSH),由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为一项创建在应用层和传输层基础上的安全协议,为计算机上的 S ...
- SQL Server ->> 高可用与灾难恢复（HADR）技术之 -- Transaction Replication（事务复制）
复制类型: 1)事务型复制:通过复制事务日志到订阅点重做的方式,属于增量型复制: 2)合并型复制:通过触发器和元数据表追踪表数据改变,同样属于增量型复制: 3)快照型复制:通过创建数据库快照,并把快照 ...
- [翻译] JNWSpringAnimation
JNWSpringAnimation https://github.com/jwilling/JNWSpringAnimation JNWSpringAnimation is a subclass o ...