Angular2以组件化的视角来看待web应用，使用Angular2开发的web应用，就是一棵组件树。组件大致分为两类：一类是如list、table这种通放之四海而皆准的通用组件，一类是专为业务开发的业务组件。实际开发中大部分时间我们都需要处理业务组件。对于SPA应用来说，一个通用的问题就是如何控制页面的切换，解决这个问题的通用方法就是利用路由器来实现。 路由配置 现在我们先撇开Angular2来看看通用的路由器模型。通常来讲SPA应用需要路由...
在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道，并且可以将它们的访问权限声明为公有，以使外部模块的组件可以访问和使用到它们。 模块是用来组织应用的，通过模块机制外部类库可以很方便的扩展应用，Rc5之后，Angular2将许多常用功能都分配到一个个的模块中，如:FormModule、HttpModule、RouterModule。 NgModule...
首先，介绍下$filter服务： 1、$filter是用来进行数据格式化的专用服务； 2、AngularJS内置了currency、date、filter、json、limitTo、lowercase、uppercase、number、orderBy这8个filter； 3、filter可以嵌套使用，用管道符号"|"来分隔（有点像linux）； 4、filter可以传递参数； 5、用户可自定义filter。介绍下内置filter： currency：用于格式化货币，如在数值前自动加上"$"或"￥"之类的。 date：格式化日期，它会提供丰富的日期...
双向绑定双向绑定是AngularJS最实用的功能，它节省了大量的代码，使我们专注于数据和视图，不用浪费大量的代码在Dom监听、数据同步上，关于双向更新，可看下图：数据-->视图 这里我们只演示有了数据以后，如何绑定到视图上。<!DOCTYPE html><html ng-app="App"> <head><script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script><script type="text/javascript">var App = angul...
最近在看AngularJS权威指南，由于各种各样的原因（主要是因为我没有money，好讨厌的有木有......），于是我选择了网上下载电子版的（因为它不要钱，哈哈...），字体也蛮清晰的，总体效果还不错。但是，当我看到左上角的总页码的时候，479页....479....479....俺的小心脏被击穿了二分之一有木有啊，上半身都石化了有木有啊，那种特别想学但是看到页码又不想学的纠结的心情比和女朋友吵架了还复杂有木有啊，我平常看的电子书百位数都...
今天主要跟大家详细讲解一下angularjs的三大模块： modal，controller，view。 首先跟大家说一下这三个模块之间的关系。 1.数据模型（modal）主要提供数据。它不会和视图（view）直接操作。 2.controller保存modal提供的数据，与视图进行操作。 3.view是视图，也就是页面展示。 4.总而言之，controller负责数据和视图之间的通信，就是两者的接口人。他们分工明确，实现了模块化。 一.如何使用数据模型（modal）？ 讲到数据模型，...
今天的主要讲解部分有以下几点：1.演示一个完整的项目结构 2.$scope的含义 3.模块化和依赖注入。 一.演示一个完整的项目结构。 下面的所有这些代码，都是转载于@大漠穷秋 老师的。我转载来之后放到了github上，大家可以去这个链接看源代码。一边看，一边学习，效果最好了～～～～下面我们来看这个截图，这就是一个完整的angularjs项目应该有的目录结构。下面我来讲解每一个文件夹对应的分别是什么含义。1.css：不用说了，就是放一些...
一.angularjs简介 AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用 数据绑定 和 依赖注入，它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现，这也使得它能够完美地和任何服务器端技术结合。 说了这么多，估计你啥都没有理解。。。对吗？别着急，我来说说他的几个特点吧：模块化，数...
AngularJS学习笔记之基本指令(init、repeat) <h3>ng-init初始化变量</h3> <div ng-init="name=aurora;age=18"><p ng-bind="name+,+age"></p><p>{{name+,+age}}</p><p ng-bind="name"></p><p ng-bind="age"></p> </div> <h3>ng-init初始化对象</h3> <div ng-init="hero={name:aurora,role:sup,line:不管刮风还是下雨，太阳照常升起}"><p ng-bind="hero.name+,+hero.role+,+hero.line"></p><p ng-bind="hero.name"></p><p ng-bind="h...
1.基本下拉效果(lable for value in array)其中select标签中的ng-model属性必须有，其值为选中的对象或属性值。 <div ng-controller="ngselect"><p>usage:label for value in array</p><p>选项，{{selected}}</p><select ng-model="selected" ng-options="o.id for o in optData"><option value="">-- 请选择 --</option></select> </div> m1.controller("ngselect",[$scope,function($sc){$sc.selected = ;$sc.optData = [{id: 10...
AngularJS是一个JavaScript框架。它可以通过<script>标记被添加到HTML页面中。 AngularJS通过指令对HTML属性进行了扩展，然后通过表达式将数据绑定到HTML元素中。 AngularJS是一个JavaScript框架AngularJS是一个JavaScript框架，它是由JavaScript语言编写的类库。AngularJS以JavaScript文件的形式进行发布，我们可以通过script标记将它添加到web页面中：代码如下:<script src="http://cdn.bootcss.com/angular.js/1.3.14/angular.m...
AngularJS通过表达式将数据绑定到HTML。 AngularJS表达式AngularJS表达式写在双大括号中：{{ 表达式语句 }}。AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同。AngularJS会准确地将表达式“输出”为计算的结果。AngularJS表达式与JavaScript表达式有许多相似之处，它们都包含文字、运算符和变量。例如{{ 5 + 5 }}和{{ firstName + " " + lastName }}<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/...
AngularJS通过指令将HTML属性进行了扩展。 AngularJS指令AngularJS指令是带有ng-前缀的扩展HTML属性。ng-app指令用来初始化AngularJS application。ng-init指令用来初始化application数据。ng-model指令用来将HTML控件（如input，select，textarea等）的值绑定到application数据。<div ng-app="" ng-init="firstName=John"><p>Name: <input type="text" ng-model="firstName"></p> <p>You wrote: {{ firstName }}</p></div> ng-...
AngularJS控制器用来控制AngularJS applications的数据。AngularJS控制器就是普通的JavaScript对象。 AngularJS控制器AngularJS applications通过控制器进行控制。ng-controller指令定义了一个application的控制器。一个控制器就是一个JavaScript对象，它可以通过标准的JavaScript对象构造函数来创建。<div ng-app="myApp" ng-controller="myCtrl">First Name: <input type="text" ng-model="firstName"><br> Last Name: <input ty...
最近一段时间一直在看AngularJS，趁着一点时间总结一下。 官网地址：http://angularjs.org/ 先推荐几个教程 1. AngularJS入门教程 比较基础，是官方Tutorial的翻译。 2. 七步从AngularJS菜鸟到专家 也比较基础，制作了一个在线音乐播放网站。 3. AngularJS开发指南 这个教程比较全面，但我感觉翻译的有些晦涩难懂。 看过这些教程后，觉得AngularJS也懂一点了，就想用它干点事，就分析一下AngularJS写的todomvc吧。 Todomvc官网地址...