什么是PWA PWA（Progressive Web App）利用TLS，webapp manifests和service workers使应用程序能够安装并离线使用。 换句话说，PWA就像手机上的原生应用程序，但它是使用诸如HTML5，JavaScript和CSS3之类的网络技术构建的。 如果构建正确，PWA与原生应用程序无法区分。 PWA 的主要特点包括下面三点： 可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现体验 - 快速响应，并且有平滑的动画响应用户的操作粘性 - 像设备上的原生应...
序言： Angular APP 视图之间的跳转，依赖于 Router （路由），这一章，我们来讲述 Router 的应用 实例讲解 运行结果如下。 设置了3个导航栏， Home、 About、Dashboard。 点击不同的导航栏，跳转到相应的页面：创建3个 component ng g c homeng g c aboutng g c dashboard路由与配置 （1）**引入 Angular Router ** 当用到 Angular Router 时，需要引入 RouterModule，如下： // app.module.ts import { RouterModule } from @ang...
一.模块化的好处 (1)实现逻辑更清晰、可读性强; (2)团队开发分工明确,容易控制; (3)充分利用可以重用代码; (4)抽象出可公用的模块,可维护性强; (5)模块化的遗留系统方便组装开发新的相似系统. 二.AngularJS模块的定义 (1)angular对象的module()使用方法：// 定义一个无依赖模块angular.module(appModule,[]);// 定义一个依赖module1、module2的模块angular.module(appModule,[module1,module2]);(2)angular.module()方法：接收三个...
Angular 的口号是 - "一套框架，多种平台。同时适用手机与桌面 (One framework.Mobile & desktop.)"，即 Angular 是支持开发跨平台的应用，比如：Web 应用、移动 Web 应用、原生移动应用和原生桌面应用等。 为了能够支持跨平台，Angular 通过抽象层封装了不同平台的差异，统一了 API 接口。如定义了抽象类 Renderer 、抽象类 RootRenderer 等。此外还定义了以下引用类型：ElementRef、TemplateRef、ViewRef 、ComponentRef 和 View...
Angular 和 React 都是伟大的框架/库。Angular 提供了 MVC（模型、视图、控制器）的定义结构。React 提供基于状态变化的轻量级呈现机制。通常情况下，开发者在 AngularJS 上有一个旧的应用程序后，他们会想用 ReactJS 建立新的特性。 虽然将 AngularJS 应用移除，从头开始建立一个 ReactJS 应用是不错的选择。但对于大规模应用来说，它不是一个可行的解决方案。在这种情况下，单独建立一个 React 组件并将其导入 Augular 会更容易。...
引子 这篇文章是写给AngularJS新手的，如果你已经对AngularJS的双向数据绑定有了深入的了解，直接去阅读源代码好了。 背景 AngularJS开发者都想知道双向数据绑定是怎么实现的。与data-binding相关的术语琳琅满目： $watch,$apply,$digest,dirty-checking等等它们是如何工作的呢？让我们从头开始讲起吧 AngularJS 的双向数据绑定是被浏览器逼的 浏览器看上去很美，其实在数据交互这块儿，由于浏览器的“不作为”，导致浏览器的数据刷...
从 Angular1 到 Angular2Angular2 作为著名前端 MVVM 架构 Angular1 的继承者，从一定程度上说，引领了新一代 Web 前端开发技术的革新。从最新版的 ember.js, react.js, vue.js 中，可以看到这几种技术相互借鉴，取长补短，最终向一种技术方向演进。 组件化技术的崛起Angular1 也有组件，叫另外一个名字：指令。在 Angular1 中，指令是 DOM 元素紧密结合的一段包含控制逻辑、数据管理的代码。在指令中，我们可以清楚的看到 Angular...
前言 之前已经给大家介绍了Angular2开发环境搭建教程之VS Code，本文将详细介绍利用VS Code如何开发AngularJS2应用程序的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 运行环境： 1、Windows 10 2、Node 6.7.03、npm 3.10.84、TypeScript 2.0.3创建项目 1、创建文件夹：angular2-quickstart，启动VS Code，打开刚创建的文件夹：angular2-quickstart。 2、在根文件夹（angular2-quickstart）下，创...
本文实例为大家分享了Angular表格神器ui-grid的具体代码，供大家参考，具体内容如下 HTML: （代码仅用于解释得更清楚，并未完全展示） <!doctype html> <html ng-app="app"><head><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script><script src="http://ajax.googleapis.com/ajax/libs/an...
RxJS是一种针对异步数据流编程工具，或者叫响应式扩展编程；可不管如何解释RxJS其目标就是异步编程，Angular引入RxJS为了就是让异步可控、更简单。 而今就是要探讨什么是Observable、observer、operator、Submit、EventEmmit，以及如何去使用它们。 什么是Observable？ Observable只是一个普通函数，要想让他有所作为，就需要跟observer一起使用；前者是受后者是攻。而这个observer（后面我们会介绍）只是一个带有 next、error、co...
本文将介绍如何亲手来完成一个yeoman的generator，以实现快速构建最适合自己的项目。 本文将实现的generator起名为ngtimo，依照yeoman的命名规矩就叫做generator-ngtimo，是笔者这周末一晚上加一上午参考着yeoman官方给出的几个generator(generator-generator、generator-node)给强行催生出来的，目前也已经在github上托管并发布到npm。 实现效果 首先确保已经全局安装了yeoman，然后再全局安装generator-ngtimo: npm install -g g...
前言 本文主要给大家介绍的是关于利用angular.js + require.js构建模块化单页面应用的方法，分享出来供大家参考学习，需要的朋友们下面来一起看看详细的介绍吧。 AngularJS描述: angularjs是可以用来构建WEB应用的，WEB应用中的一种端对端的完整解决方案。通过开发者呈现一个更高层次的抽象来简化应用的开发。最适合的就是用它来构建一个CRUD应用，它提供了非常方便的且统一高效的解决方案，其数据绑定、基本模版标识符、表单验证、...
前言 AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。 本文是接上篇，angular 实战部分，angular比较适合spa项目，这里不借助任何seed和构建工具，直接从零搭建，基本的angular项目结构大致包含如下几个部分：1）app.js 入口2）index.html html...
本篇文章是对单页面的一个简单的基本逻辑操作，这个方法可以搭建基本的单页面的逻辑结构。 简单理解：单页面应用，锚点值切换，一个路由对应一个页面。 路由：此时会创建一个信息保存路由的信息，之后对页面a标签进行操作，会进入路由表中查找与之匹配的路由信息。 ----html <div><a href=#/news>跳转到news</a><a href=#/share>跳转到share</a><router-view></router-view></div>----script var router=new VueRouter({routes:[{n...
本文实例讲述了AngularJS ng-repeat指令及Ajax的应用。分享给大家供大家参考，具体如下： ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。 定义： <element ng-repeat="expression"></element>说明：experssion表达式定义了如何循环集合。常用的如：x in records 下面通过一个例子,来说明ng-repeat如何绘制一个表格： <div ng-app=mainApp ng-controller=studentController><table border="0"><tr><td>姓...