博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
码农视角 - Angular 框架起步
阅读量:5332 次
发布时间:2019-06-14

本文共 3233 字,大约阅读时间需要 10 分钟。

开发环境

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有:

Built first and foremost for Angular. Turnkey setup for beginners; powerful for experts.

Capable and Ergonomic Java * IDE

VS Code is a Free, Lightweight Tool for Editing and Debugging Web Apps.

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

  
Test2

 

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.

转载于:https://www.cnblogs.com/icoolno1/p/7490765.html

你可能感兴趣的文章
DCDC(4.5V to 23V -3.3V)
查看>>
kettle导数到user_用于left join_20160928
查看>>
activity 保存数据
查看>>
typescript深copy和浅copy
查看>>
linux下的静态库与动态库详解
查看>>
hbuilder调底层运用,多张图片上传
查看>>
较快的maven的settings.xml文件
查看>>
Git之初体验 持续更新
查看>>
随手练——HDU 5015 矩阵快速幂
查看>>
Maven之setting.xml配置文件详解
查看>>
SDK目录结构
查看>>
malloc() & free()
查看>>
HDU 2063 过山车
查看>>
高精度1--加法
查看>>
String比较
查看>>
Django之Models
查看>>
CSS 透明度级别 及 背景透明
查看>>
Linux 的 date 日期的使用
查看>>
PHP zip压缩文件及解压
查看>>
SOAP web service用AFNetWorking实现请求
查看>>