Angular 快速入门
Angular 快速入门
AngularJS 官方网址
Angular:https://www.angular.cn/
Angular官网:https://angularjs.org/
AngularJS 1.X 的困境
- 饱受诟病的性能问题。
- 落后当前web的发展理念(如组件开发方式)
- 对手机端支持不够友好
Angular 2.x 特性
16年5月正式发布。
2版本取消了JS的叫法,直接叫做 Angular
2版本不能兼容1版本的代码。
- 移除 controller + $scope 设计,改用组件式开发(更易上手)
- 性能更好(渲染更快,变化监测效率更高)
- 优先为移动端应用设计(angular mobile toolkit)
- 更加贴合未来的标准(如/ES67,WebComponent)
Angular2 的核心概念
组件
组件使用案例
组件要素
组件的通讯机制
组件全生命周期
组件示例
元数据与装饰器
模板
数据绑定
属性绑定-[value] :把组件类的数据传递到组件模板中。
事件绑定-[keyup] :把模板产生的数据通过函数调用传递到组件类。
双向绑定-[(ngModel)] :实现数据双向流动。
组件渲染
组件树
数据流向
指令
案例
自定义指令
服务
服务是实现专一目的的逻辑单元,如日志服务。
依赖注入
组件一如外部构建(如服务)的一种机制。
分层注入
模块
- 框架代码以模块形式组织(文件模块)
- 功能单元以模块形式组织(应用模块)
文件模块
文件模块使用
应用模块
应用模块就是对应用类零散的组件、指令、服务等按照功能进行归类包装。
同模块的指令可以相互使用同模块的组件,跨模块的不可以。
应用模块
核心概念总览图
Angular 快速上手
TypeScript
TypeScript 是微软开发的编程语言。
JavaScript 的超集,兼容 JavaScript。
运行前需要预编译生成 JavaScript 代码。
加入类型判断,编译时进行类型检查。
文件扩展名为 .ts 。
案例
TypeScript = Type + JavaScript
类与接口
装饰器
一种特殊的类型的声明。
能够被附加到类、方法、访问符、属性或参数上。
想要了解更多,浏览TypeScript官网:https://www.typescriptlang.org
开发环境的准备
Node.js :推荐使用6.0以上版本。
webpack:打包工具,可以使用 npm install -g webpack 安装。
开发IDE开发工具(VS Code) :微软推出的免费跨平台编辑器,支持TypeScript 语法及高亮提示。
webpack 原理
转载于:https://www.cnblogs.com/wjw1014/p/10262309.html
Angular 快速入门相关推荐
- angular快速入门教程
angular 安装: 1.安装node.js 2.安装angular npm i -g @angular/cli 3.创建项目 ng new 项目名 4.文件结构: e2e:测试目录src: {in ...
- vue.js快速入门
以前看到多少天学习系列,我都深感烦躁,短短几天怎么可以精通,那是对于他们而言.但是,今天我要写一个快速入门,本人觉得还是有一点用处,因为,我不可能在一天之内精通某种东西,却可以在一两小时入门. 回到v ...
- angularAMD快速入门
ngularAMD是作者 marcoslin 使用 RequireJS + AngularJS开发的前端mvvm框架,因此你可以使用它快速创建一款Web App.他特别适合快速开发SPA应用,适当的和 ...
- AngularJS快速入门指南09:SQL
我们可以将之前章节中的代码用来从数据库中读取数据. 通过PHP Server从MySQL数据库中获取数据 <div ng-app="myApp" ng-controller= ...
- .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用
写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
- .NET Core快速入门教程 2、我的第一个.NET Core App(Windows篇)
一.前言 本篇开发环境? 1.操作系统: Windows 10 X64 2.SDK: .NET Core 2.0 Preview 二.安装 .NET Core SDK 1.下载 .NET Core 下 ...
- .NET Core快速入门教程 3、我的第一个.NET Core App (CentOS篇)
一.前言 本篇开发环境? 1.操作系统:CentOS7(因为ken比较偏爱CentOS7) 2.SDK版本:.NET Core 2.0 Preview 你可能需要的前置知识 1.了解如何通过Hyper ...
- AngularJS快速入门指南03:表达式
AngularJS通过表达式将数据绑定到HTML. AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}. AngularJS表达式绑定数据到HTML的方式与ng- ...
- AngularJS快速入门指南15:API
API即Application Programming Interface(应用程序接口). AngularJS全局API AngularJS全局API是一组全局JavaScript函数,用来进行一些 ...
- 不会几个框架,都不好意思说搞过前端: Vue.js - 60分钟快速入门
Vue.js--60分钟快速入门 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的 ...
最新文章
- 神经网络的分类行为怎么就不能是一种力的行为?
- 可视化日历(Java实现)
- Java中J.U.C扩展组件之ForkJoinTask和ForkJoinPool
- 浏览器的工作原理:新式网络浏览器幕后揭秘(转)
- 戴尔电脑装ubuntu报ACPI错误解决过程
- 不可用来编辑html的文件,Word2016
- ES6新特性有哪些?
- OSChina 周六乱弹 —— 谁小时候没当过熊孩子呀
- QT项目负责人必须掌握的Ui设计师功能——Promote to !
- Jenkins 打包配置
- 滴滴出行技术副总裁赖春波:每天发现几十万异常订单,仅有几起为真!
- 数论-卢卡斯定理(lucas)与拓展卢卡斯定理 (exlucas)
- 工作心得之接口数据同步
- 【评分卡】评分卡入门与创建原则——分箱、WOE、IV、分值分配
- 前端通信:ajax设计方案(三)--- 集成ajax上传技术
- 钻石值钱吗?python分析近年钻石价格走势【包含图表分析】
- 论文研读-图可视化-NetV.js:Web端可视化工具库
- php mpdf导航栏信息,PHP Mpdf-如果表不适合实际页面,则将其移到下一页
- 企业IT、OT与CT的融合,加快数字化制造转型
- 注册表中shell文件不见了_win7系统误删注册表的shell文件导致无法打开文件的解决方法...
热门文章
- python多线程提高速度_Python3如何使用多线程升程序运行速度
- 安装Vue +webpack ,以及出现的问题d的解决
- mysql关于时间的面试题_关于面试中的mysql试题1
- python输入文字、成为字典_python中将字典形式的数据循环插入Excel
- nohup的程序能不能再转到前台查看啊?_小程序开发之路入门
- 蓝牙学习笔记(十)——BLE透传传输延迟分析
- 中小型网络工程设计与实现_小型网络如何实现经济可靠的设计和部署 (一)...
- openresty lua集成kafka
- Windows核心编程_静态编译和动态编译的区别
- jsp- el表达式