初始Angularjs2

一、为什么使用Angularjs2

Angularjs2全面使用了模块化、组件化的思想,它有如下的特性:

1)模块化

  • 在ng2的应用中,所有的系统功能都是模块化的,开发者只需要按需导入
  • 模块化的好处在于可以当应用加载时,是按需加载的,大大提高了应用启动时候的性能
  • 对于开发和维护非常方便,同时易于协作开发

2)使用了TypeScript

  • TypeScript是JavaScript的超集,通过开发发现,JavaScript有语法错误并不会影响整个应用,所以有了TypeScript,TypeScript的代码会先编译成JS代码,只要有什么语法错误都能后在编译的过程中发现
  • TypeScript具有面向对象语言的一些特性,例如接口,继承,包等,例如,在TypeScript中就直接使用implemes,interfaces这样的字段,非常方便

二、Angularjs架构

通过了解Angularjs2,我觉用一句话可以概括Angularjs2的核心概念:“用Angular扩展的语法来编写HTML模板,用组件来管理这些模版,用服务添加应用逻辑,用模块打包发布组件与服务,最后通过引导根模块来启动应用”

通过这个图我们可以看到,Angular框架的主要构造块有以下8个部分:

  • 模块
  • 组件
  • 模板
  • 元数据
  • 数据绑定
  • 服务
  • 指令
  • 依赖注入

  与用户直接交互的就是模版视图,模版视图并不是独立的模块,它是组件的重要元素之一,另一个重要的重要元素就是组件类,,用以维护组件的的数据模型机功能逻辑,不同组件之间的切换通过路由模块来控制。指令与模板之间存在关联,主要的作用就是增强模板特性,间接扩展模版的语法。服务是封装某一功能呢逻辑单元,这个功能逻辑可以通过依赖注入的机制引入之组件内部,作为组件的功能扩展;

  通过上述可以发现,Anaularjs应用始终都是围绕“组件”设计的,所以说应用是由一个个大大小小的松耦合的组件构成。

后续将对每一个构造块进行深入探讨~

三、Angularjs从框架到平台

可以说Angularjs2现在更像是一个平台而不是一个简单的类库了,目前在此基础上构建其他好用的工具:

框架核心包含:

  • 依赖注入
  • 装饰器支持
  • zone.js
  • 编译服务
  • 变化检测
  • 渲染引擎

外部工具库:

  • Angular Material,Google官方的设计风格的UI组件库

工具:

  • CLI为开发者提供了工作流自动化解决方案。功能涵盖了创建项目,生成组件,配置路由,启动开发服务器,构建测试,运行测试,预处理CSS,部署前的构建
  • Augury用于调试,分析性能和可视化查看应用组件树,可以快速定位问题和调优

 

转载于:https://www.cnblogs.com/Henry-World/p/6487286.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/572691.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux中输入ls出现蓝色的点,linux上ls的蓝色太深,怎么处理

linux下ls的蓝色太深,怎么办?在linux下使用ls命令时,会将目录以蓝色显示。在某些显示器上,黑底蓝字,看起来相当费力,以至于我有时候不得不使用dir命令,全部显示成白色。先看一个图:看…

Discuz常见小问题-如何取消登陆发帖验证码

1 正常情况下,用户点击登录之后,需要填写验证码 2 进入后台,点击防灌水,验证设置,然后下面的各个选项可以设置是否启用验证码。 转载于:https://www.cnblogs.com/acetaohai123/p/6504754.html

RC电路的充放过程C语言实现,RC串联电路的暂态过程基本原理介绍

RC串联电路的特点:由于有电容存在不能流过直流电流,电阻和电容都对电流存在阻碍作用,其总阻抗由电阻和容抗确定,总阻抗随频率变化而变化。RC 串联有一个转折频率:f01/2πR1C1当输入信号频率大于f0 时,整个 …

Java 导出Excel

前台代码&#xff1a; View Code?12345678910111213141516171819202122232425262728293031323334353637383940414243444546<button class"btn btn-sm btn-success" type"submit" id"detailEp" onclick"return exportCheck(true);"…

android 键盘 自动消失,android 软键盘 回到键 消失事件 监听

弹出输入法 时 隐藏了 ‘底部状态栏’ 在按 物理 返回键 后&#xff0c; 软键盘消失后 恢复 ‘底部状态栏’public class ImageViewCareIME extends ImageView{public ImageViewCareIME(Context context){super(context);// TODO Auto-generated constructor stub}public stati…

android 开机动画尺寸,Android开机Logo动画制作

开机Logo制作1.准备Logo图片准备一张符合尺寸要求(例如&#xff1a;1280x720)的图片&#xff0c;最好是png或jgp。2.用Hitool工具制作镜像文件海思芯片使用的是Hitool工具&#xff0c;打开Hitool&#xff0c;选择HiFastplay&#xff0c;选择右下角的Logo设置&#xff0c;添加图…

照片边框 app android,Screener App-一手搞定将手机截图加上外框

记得几年前想要在Android手机上截图&#xff0c;得安装类似截图软件与Root 才行&#xff0c;层层的关卡还真不是一般使用者能处理的&#xff0c;如今Android手机大部分都已内置截图功能&#xff0c;对于我撰写App文章来说帮助很大&#xff0c;但有时想要表现哪台手机外框画面时…

JAVA补充-抽象类

1.抽象类基本概念 1 package com.neusoft.abstracted;2 /**3 * 抽象类&#xff1a;在class之前加abstract关键字4 * 抽象方法语法&#xff1a; 修饰符 abstract 返回值类型 方法名&#xff08;形参列表&#xff09;&#xff1b;5 * 1.抽象方法的返回值前面有abstract关键…

android谷歌补丁日期,久违的Android更新补丁:多年前的坑,谷歌终于给填上了

3月5日消息&#xff0c;近日谷歌在最新的Android安全公告中称&#xff0c;当前更新的补丁CVE-2020-0069已修复联发科芯片设备的安全漏洞。据了解&#xff0c;联发科曾在2016年左右确认&#xff0c;部分搭载联发科芯片的Android设备存在安全性问题&#xff0c;所涉及的设备数量达…

android个人微信支付,Android之微信支付

Android开发中&#xff0c;大多数电商APP都会有支付这么模块&#xff0c;此博客就讲一下微信支付&#xff0c;代码不多&#xff0c;很简单就可以完成&#xff0c;支付宝支付请看博客 Android支付之支付宝封装类先来看看效果图微信支付首先要去微信开发平台申请&#xff0c;得到…

华为鸿蒙山海,华为包圆了整部《山海经》,鸿蒙是何意?还有青龙白虎朱雀玄武?...

华为已经申请注册“华为鸿蒙”商标并标注该商品可用于操作系统程序鸿蒙一个自带书香气的名字一听就是文化人&#xff01;一听就是中华文化传承人&#xff01;那么鸿蒙是啥意思鸿蒙就是一团气不是普通的气体传说盘古在昆仑山开天辟地之前世界是一团混沌的元气这种自然的元气叫做…

ASP.NET MVC5使用Area区域

转载&#xff1a;http://www.lanhusoft.com/Article/217.html 在大型的ASP.NET mvc5项目中一般都有许多个功能模块&#xff0c;这些功能模块可以用Area&#xff08;中文翻译为区域&#xff09;把它们分离开来&#xff0c;比如&#xff1a;Admin&#xff0c;Customer&#xff0c…

html5 最小化,当前界面最小化快捷键 窗口最小化和全屏化的快捷键是什么?

怎样用快捷键显示最小化的窗口在键盘上同时按下WinD 键&#xff0c;可以最小化所有窗口。在键盘上再次同时按下WinD 键&#xff0c;可以还原步骤1最小化的所有窗口。在键盘上同时按下WindowsM键&#xff0c;可以最小化所有窗口。在键盘上同时按下WindowsShiftM键。电脑窗口最小…

华为鸿蒙用户体验计划怎样关闭,华为用户要注意,手机关闭这3个“默认选项”,还能流畅再用2年...

华为用户要注意&#xff0c;手机关闭这3个“默认选项”&#xff0c;还能流畅再用2年众所周知&#xff0c;我们在使用手机的时候&#xff0c;经常会有这样的感触&#xff0c;就是手机明明才刚买没多久&#xff0c;使用起来却相当的卡顿&#xff0c;这还是为什么&#xff1f;手机…

html5手机端三级联动城市选择代码,省市县三级联动(jQuery手机端收货地址选择地区代码)...

【实例简介】【实例截图】【核心代码】jQuery手机端收货地址选择代码 - 站长素材默认调用所在地区&#xff1a;设置默认值所在地区&#xff1a;/*** 默认调用*/!function () {var $target $(#J_Address);$target.citySelect();$target.on(click, function (event) {event.stop…

内连接、左外连接、右外连接、交叉连接区别

在之前&#xff0c;我对MSSQL中的内连接和外连接所得出的数据集不是很清楚。这几天重新温习了一下SQL的书本&#xff0c;现在的思路应该是很清楚了&#xff0c;现在把自己的理解发出来给大家温习下。希望和我一样对SQL的连接语句不太理解的朋友能够有所帮助。&#xff08;发这么…

winform数据传递到html,C#下winform和JS的互相调用和传参(webbrowser)

不多说&#xff0c;直接上代码&#xff0c;winform下button1调用js函数&#xff0c;从html页面获取值&#xff0c;然后JS调用WINFORM的函数&#xff0c;传送获取到的值到winform并通过messagebox的方法show出来。一步到位&#xff0c; winform调用JS函数 和JS调用winform函数的…

xcode开发html5工具,5个Xcode开发调试技巧

1.Enable NSZombie Objects(开启僵尸对象)Enable NSZombie Objects可能是整个Xcode开发环境中最有用的调试技巧。这个技巧非常非常容易追踪到重复释放的问题。该技巧会以非常简洁的方式打印指出重复释放的类和该类的内存地址。怎么开启僵尸对象呢&#xff1f;首先打开“Edit Sc…

Unity 协程深入解析与原理

先来直接放一段代码 1 using System.Collections;2 using System.Collections.Generic;3 using UnityEngine;4 5 public class CoroutineTest : MonoBehaviour6 {7 8 void Start()9 { 10 Debug.Log("Start Begin"); 11 12 CustomCoroutine …

NAT协议详解

NAT&#xff08;Network Address Translation&#xff0c;网络地址转换&#xff09;是将IP数据报头中的IP地址转换为另一个IP地址的过程。在实际应用中&#xff0c;NAT主要用于实现私有网络访问公共网络的功能。这种通过使用少量的公网IP地址代表较多的私网IP地址的方式&#x…