码农视角 - 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.虎嗅.知乎以及邵亦波老师的文章,对之前一直感兴趣的期权汇编初略总结了下 ,仍觉粗糙,对一些具体操作还是不甚了了,不过感觉在中国 ...
随机推荐
- 看libevent所遇到的英语生词
libevent – an event notification library The libevent API (libevent应用程序)provides a mechanism(机制) to ...
- 使用TreeDMS进行MySQL数据库的Web页面远程管理
在互联网应用蓬勃发展的时代背景下,各种各样的网络平台,网络应用,移动应用层出不穷,那么这些应用及平台都需要使用到数据库.如何高效的对数据进行日常维护.管理.监控成为迫切需要解决的问题. 基于web的方 ...
- HDU-2046 骨牌铺方格【递推】
http://acm.hdu.edu.cn/showproblem.php?pid=2046 和前面的一样,a[i] = a[i-1] + a[i-2] #include<iostream> ...
- 最小生成树（prim）
里姆算法(Prim算法),图论中的一种算法,可在加权连通图里搜索最小生成树.意即由此算法搜索到的边子集所构成的树中,不但包括了连通图里的所有顶点(英语:Vertex (graph theory)),且 ...
- NodeList、HTMLCollection和NamedNodeMap
上篇文章以arguments为例讲到了类数组对象,这篇我们讨论更多的类数组对象NodeList.HTMLCollection和NamedNodeMap.既然是类数组对象,这3种对象也都能应用上篇文章中 ...
- 【HTML&CSS】基本的入门
在公司培训一段时间不久就去流浪了一段时间,现在回来重新捧起心爱的编程,特别亲切. 自学HTML&CSS,别人说了很多,这那这那的,无论简单还是困难,不亲自去俯下身子学习,怎么都学不会HTML和 ...
- Bootstrap学习笔记(排版)
bootstrap简介: ☑ 简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集. ☑ 基于html5.css3的bootstrap,具有大量的诱人特性:友好 ...
- Using Apache Spark and MySQL for Data Analysis
What is Spark Apache Spark is a cluster computing framework, similar to Apache Hadoop. Wikipedia has ...
- C#调用SQlite常见问题汇总
最近在做SQLite开发,开发环境是VS2010+ SQLite Ado.Net data Provider.这套Data Provider程序是基于System.Data.SQLite 1.0.66 ...
- GetModuleFileName和获取应用程序当前目录
原文:http://www.cnblogs.com/xuemaxiongfeng/articles/2465544.html API函数GetModuleFileName():获得应用程序目录相对路径 ...