码迷,mamicode.com
首页 > 其他好文 > 详细

码农视角 - Angular 框架起步

时间:2017-09-07 21:33:28      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:dev   creat   row   weight   odm   nal   back   erp   put   

开发环境

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

打包部署

 具体参考: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 框架起步

标签:dev   creat   row   weight   odm   nal   back   erp   put   

原文地址:http://www.cnblogs.com/icoolno1/p/7490765.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!