码农视角 - 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.虎嗅.知乎以及邵亦波老师的文章,对之前一直感兴趣的期权汇编初略总结了下 ,仍觉粗糙,对一些具体操作还是不甚了了,不过感觉在中国 ...
随机推荐
- 二进制之Java中的进制（二）
1. jdk中的进制转换 十进制转十六进制 Integer.toHexString(int i); 十进制转八进制 Integer.toOctalString(int i); 十进制转二进制 Inte ...
- 最全的HTTP 响应状态码列表！
摘要: HTTP状态码,我们要学会现查现用能记住最好. 简单举例几个常用的状态码,比如200,302,304,404, 503. 一般来说我也只需要了解这些常用的状态码就可以了.如果是做AJAX,RE ...
- GString惰性求值
当对一个GString实例求值时,如果其中包含一个变量,该变量的值会被简单地打印到一个Writer,通常是一个StringWriter.然而,如果GString中包含的是一个闭包,而非变量,该闭包就会 ...
- JDK的安装与卸载
1.jdk 下载链接:http://www.oracle.com/technetwork/java/javase/downloads/jdk9-downloads-3848520.html 2.在 ...
- 为什么推荐用ui-router替代ngRoute
初学angularjs,第一个实例是官网的phoneCat,里面路由用的是ngRoute,后来看到别的用ui-router,觉得好奇,ui-route是什么呢?百度一些,得到如下解释: ui-rout ...
- 001profile条件化创建bean
01.类级别条件创建 @Configuration @Profile("dev") public class Aclass{}---->影响整个类,包括类的注解.开发环境,类 ...
- MUI框架-12-使用原生底部选项卡（凸出图标案例）
MUI框架-12-使用原生底部选项卡(凸出图标案例) 今天,用 mui 做 app 时,遇到了可能各位都遇到过的头疼问题:底部中间图标凸起,如下图: 最后有源代码 [提示]:有人问我在 HBuilde ...
- ubuntu16下面 redis 无法链接到客户端问题
1.今天从github上面下载了一个项目,链接到自己的tomcat里面的redis,结果在虚拟机里面可以链接成功,但是在客户端总是提示链接失败.google之后,原来是 因为 需要在redis里面设置 ...
- pt-summary
pt-summary主要是用来统计机器信息: [root@mxqmongodb2 bin]# ./pt-summary # Percona Toolkit System Summary Report ...
- CSS标准文档流 块级元素和行内元素
标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...