Angular入门--项目框架搭建

Angular介绍

Angular在2012年发布版本1.0,是最早流行的前端MVVM框架,目前流行的React和Vue框架都在它之后。
由于React的流行,以及angular 1.0版本暴露出来的一些性能,组件化等的一些缺点,谷歌决定重写angular,在2016年推出angular2.0.
Angular 2.0采用TypeScript开发,集成了RxJS库。目前最新版本是6.0

Angular生态
1、服务端渲染解决方案 Angular Universal
2、PWA(Progressive web apps )解决方案angular service worker
3、Ionic。基于angular语法开发原生应用的开发框架

开发工具

建议采用vs code进行开发。
需要安装扩展插件Angular 6 Snippets。
如果结合ant-design的angular版本ng-zorro-antd,需要安装扩展插件
ng-zorro snippets。可以很好地提供代码补全功能

Angular项目的构建

基于Angular CLI构建项目

npm install -g @angular/cli 安装Angular CLI
ng new <项目名称> 自动生成项目目录
ng serve --open 启动本地服务,并自动打开浏览器
本地服务默认使用4200端口,如果要修改端口加 --port <端口号>
ng buid 对项目进行打包
如果使用ant-design的ng-zorro Ui组件库直接运行
ng add ng-zorro-antd

配置代理:
本地开发配置代理可以防止跨域问题。
在项目根目录下新建proxy.config.json
{
"/api": {
"target": "http://xxx.xxx.xxx.xxx:8076",
"changeOrigin": true,
"secure": false,
}
}
修改package.json文件

目录结构
e2e 测试模块配置
src 开发目录
  app 项目目录,放置组件和页面
  assets静态资源
  index.html页面模板
  styles.css 项目公共样式
  proxy.config.json 代理配置文件
tsconfig.json typescript配置文件
tslint.json typescript语法检测配置文件

原文地址:https://www.cnblogs.com/leejay6567/p/9351668.html

时间: 2024-10-06 06:06:27

Angular入门--项目框架搭建的相关文章

(三) Angular2项目框架搭建心得

前言: 在哪看到过angular程序员被React程序员鄙视,略显尴尬,确实Angular挺值得被调侃的,在1.*版本存在的几个性能问题,性能优化的"潜规则"贼多,以及从1.*到2.*版本的面目全非,不过宽容点来看这个强大的框架,升级到ng2肯定是一件好事情,虽然截至目前ng2还存在或多或少需要完善的地方,但是ng2做到了留下并强化ng1好的部分,移除或改善其不好的部分,并且基于许多较新Web技术来开发,不去看从ng1迁移到ng2的门槛和工作量的话,ng2的编程体验是很酷炫的. 目前n

[AngularJS]项目框架搭建-MyFirst Skeleton

前文有提到过 做一个简单的订餐系统,最近花了点时间,了解了一下AngularJS框架的使用.因此本文的目的根据了解的知识重新搭建基于 AngularJS框架. 该框架是基于对于AngularJS的学习而制定的,这其中肯定有很多不足,在以后的学习中在加以改进. 一.系统准备 安装Node.js version>=0.10.0版本 Git  Shell 并添加该 Shell脚本到Path环境变量中  Path=:,"$git_home/bin"   二.手动搭建框架 2.1 创建开发

1、Android项目框架搭建 (分析需求、整理资料)

闲来无事.想搭个框架试试 分析一般应用 将资料整理整理 粗略统计 需要以下资料 1.android-pulltorefresh 一个强大的拉动刷新开源项目,支持各种控件下拉刷新 ListView.ViewPager.WevView.ExpandableListView.GridView.(Horizontal )ScrollView.Fragment上下左右拉动刷新,比下面johannilsson那个只支持ListView的强大的多.并且他实现的下拉刷新ListView在item不足一屏情况下也

第一节项目框架搭建

动软代码生成器的使用 创建三个类库项目DAL.BLL.Model,创建两个asp.net应用程序Web:Front(前台).Admin(后台管理).DAL引用Model,BLL引用Model和DAL,Web引用BLL和Model. 如果报错“添加服务器配置失败”,则以管理员身份运行“动软代码生成器”. (*)根据我的表命名规范,配置“动软”的“选项”→“代码生成器设置”,命名规则中“替换表中的字符”填“T_”(大小写敏感),“类命名规则”中,除了Model最后一个文本框留空之外,其他两个填BLL

ASP.NET MVC企业级项目框架搭建实战

MVC项目搭建笔记---- 项目框架采用ASP.NET MVC+Entity Framwork+Spring.Net等技术搭建,搭建过程内容比较多,结合了抽象工厂的思想降低了三层之间的耦合,可以使用此套框架进行可扩展性要求高的企业级MVC项目开发.本框架的架构图如下: 第一步(创建分类文件夹): 创建5个文件夹.分别为UI,Model,BLL,DAL,Common,以便于将各模块分类整理. 第二步(项目类库的创建): 在UI文件夹创建ASP.NET MVC4项目模板选择基本. 在Model文件夹

记录-项目java项目框架搭建的一些问题(maven+spring+springmvc+mybatis)

伴随着项目框架的落成后,本以为启动就能成功的,but.... 项目启动开始报错误1:java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener 这个错百度到说是缺少这个包,但实际在项目中看到maven里面是有这个包的.于是继续百度到[可能包是找到了,但没有依赖在项目中] 项目右击-----project-----deployment assembly , add ,java bui

2.0项目框架搭建

2.1.科学减肥网: http://www.kxjf1.com 项目架构如下 解决方案分层 01UI KXJF.Helper(web.wap帮助类库) KXJF.Logic(web控制器逻辑) KXJF.Logic.SysAdmin(web后台控制器逻辑) KXJF.Logic.Wap(wap控制器逻辑) KXJF.UrlProvider(URL优化,提供良好的URL) 02Service KXJF.IBLL(业务逻辑接口层) KXJF.BLL(业务逻辑实现层) 03Repository KXJ

Spring MVC 入门 - 框架搭建

感觉网上从环境搭建讲起的教程不多,好多示例也比较复杂,而且也没个图啥的,所以就上一个简单易懂的版本. 有多简单捏?从eclipse建立工程开始,结束后作出一个可以响应请求的Servlet. 在这个文章里面,我们需要 - 建立一个eclipse工程: 编写两个xml: 编写两个jsp页面: 编写一个Java文件. 准备工作 - Eclipse J2EE版本: Tomcat 一只: 注:所有斜体字代表-文件名,类名,变量名等可替换内容. 第一步: 使用Eclipse建立动态网页工程. 输入项目名字,

springmvc+mybatis+maven项目框架搭建

项目的目录 1.配置web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com