一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用程序.在开始使用AngularJs开发SPA之前,我觉得有必要详细介绍下AngularJs所涉及的知识点.所有也就有了这篇文章. 二.AngularJs介绍 AngularJS是Google推出的一款Web应用开发框架.它提供了一系列兼容性良好并可扩展的服务,包括数据绑定.DOM操作.MVC和依赖注…
通过前面两篇的学习,基本上对AngularJS的使用有了一定的了解. 本篇将会自己手动写一个小程序,巩固下理解. 首先要注意的是,引用AngularJS的资源文件angular.min.js文件. 由于这个框架是Google的工作人员开发的,因此国内访问的时候,会被墙导致无法下载资源文件. 因此,可以使用百度开源的静态链接: http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js 代替原来的国外的资源文件链接:http://code…
目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 6 Angularjs 前端主体结构 6.1 Angularjs目录结构 还记得 上WebAPI项目主体结构(三) 我们在"Yiim.web",添加的"App" 目录吗? 这一章节我们讲解一下 angularjs 目录结构. App/images //存放系统使用的图标 App/styles //样式文件存储 App…
目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 2. 前言 Angularjs开发CRUD类型的Web系统生产力惊人,与jQuery,YUI,kissy,Extjs等前端框架区别非常大,初学者在学习的过程中容易以自己以往的经验来学习Angularjs 往往走入误区,最典型的特征是在的开发过程中,使用大量的 指令(directive) 来实现许多操作DOM的功能,从而失去了angularjs快速…
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的 是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入.等等. 废话少说,程序走起~ <!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8"> <title&g…
在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而ajax的一个致命缺点就是导致浏览器后退按钮失效,尽管我们可以在页面上放一个大大的返回按钮,让用户点击返回来导航,但总是无法避免用户习惯性的点后退.解决此问题的一个方法是使用hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过pushState(…
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板开始入手是个不错方式,因为这部分内容相对简单好理解,而且是视图层的东西,大家都喜欢可以立马看得见的东西嘛.本篇我将搜罗模板中的常用指令一一测试,了解其使用方法,有点像背单词的感觉,会比较枯燥.不过对于初学,这样的枯燥是必须要经历的,开始~ 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下…
什么是AngularJS AngularJS是一款优秀的前端JS框架,是Google多款产品之一,简称ng. ng有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 它可以让前端开发人员将获取数据.数据模型和视图隔离进行开发. Angular包括什么 ng包括指令.服务.筛选器和一些常用的类库,其中指令是最为让人炫目的功能,它为增强HTML标签的互动性提供了极大的便利. ng有一些非常棒的特性,包括控制器.指令.服务.路由.筛选器. 五大核心 MVVM…
用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入.对于比较小的项目,这是可行的,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有js文件,无疑会延缓页面加载的速度,造成不良额用户体验.那么分布加载(按需加载)就显得很有必要了. <!DOCTYPE html> <html lang="en…
The first things we need to do is create a reducer: /** * CONSTANT * @type {string} */ export const GET_CATEGORIES = "GET_CATEGORIES"; /** * INIT VALUE */ export const initialCategories = [ {id: , name: 'Development'}, {id: , name: 'Design'}, {i…