码农视角 - 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.虎嗅.知乎以及邵亦波老师的文章,对之前一直感兴趣的期权汇编初略总结了下 ,仍觉粗糙,对一些具体操作还是不甚了了,不过感觉在中国 ...
随机推荐
- 撩课-Web大前端每天5道面试题-Day16
1.for循环中的作用域问题? 写出以下代码输出值,尝试用es5和es6的方式进行改进输出循环中的i值. ; i<=; i++) { setTimeout(function timer() { ...
- nginx+uwsgi部署flask应用后只能在本机访问解决办法，ipv4 和ipv6
我的系统是centos7 nginx监听8888端口 在window下 :telnet 192.168.81.224 8888 发现连接不上, 端口22能连上 关闭224的防火墙就好了 syste ...
- MySQL的预编译功能
1.预编译的好处 大家平时都使用过JDBC中的PreparedStatement接口,它有预编译功能.什么是预编译功能呢?它有什么好处呢? 当客户发送一条SQL语句给服务器后,服务器总是需要校验S ...
- CF891E Lust
传送门 题目大意 你有 \(n\) 个数 \(a_1,a_2...a_n\) 要进行 \(k\) 次操作 每次随机选择一个数 \(x\),使得答案加上 \(\prod_{i \neq x}a_i\) ...
- System.out.println与System.err.println的区别
public class Test2 { static { System.out.println("1"); } { System.out.println("2" ...
- vs code上配置Scala
转自:https://www.cnblogs.com/steven-yang/p/5852988.html 百度的结果表达太奇怪,简单记一笔. 1.下载一个scala的压缩包,https://www. ...
- input button 与 submit 的区别
在表单中,我们会经常提交数据,通常使用<input type="submit" value="提交"/>进行提交数据, 另一种方式是使用<bu ...
- apm飞控飞行模式详解
1.稳定模式Stabilize稳定模式是使用得最多的飞行模式,也是最基本的飞行模式,起飞和降落都应该使用此模式.此模式下,飞控会让飞行器保持稳定,是初学者进行一般飞行的首选,也是FPV第一视角飞行的最 ...
- 把KB转化为KB及以上单位
/** * 把KB转化为KB及以上单位 * @param int $kb * @return string $new_val */ function return_over_kb($kb) { $kb ...
- Intelij IDEA 配置Tomcat时找不到 “Application Server”
由于公司突然断电,再打开idea的时候,tomcat就消失了.然后在网上搜了一下,没搜到自己乱点了一下. 如图 : plugins >> application servers Vie ...