主题:

本篇主要介绍下angular里的一些概念,并且在咱们的小应用上加上点料。。

概念(大概了解即可,代码中遇到的会有详细注释):

模板:动态模板,是动态的,直接去处理DOM的,而不是通过处理字符串模版(静态模板)

mvc:核心思想实现“数据管理-数据模型Model、应用逻辑-控制器Controller、数据表现-视图View”三者的之间的分离。view从model获取数据把数据展示到界面上,当有用户操作处理交互时,控制器controller去改变数据model,然后通知view去做相应的改变;各司其职。

双向绑定:意味着当model变化的时候,view也去改变,view改变的时候,model也会相应的发生变化,也就是MVVM的概念,VM就是view和model的枢纽所在。

scope:是一个view和控制器之间的纽带,也就是作为数据模型model的,scope负责去监听model的变化,同时scope是和html结构一样具备层次结构的,每个angular app都会有且只有一个rootScope,他可以有childScope,每个childScope会有parentScope和childScope,也就意味着是可以继承的,继承方式也是原型继承,每一个childScope继承自他的parentScope。

controller:view后的代码,在angular中,规范的是在controller中不出现任何的DOM操作,controller仅仅是去更改(创建)scope上的数据就ok了,所以在ag中跑单元测试时很容易的。

model:数据模型,与模板结合产生视图,在angular中,他是scope的一个属性,值可以是任何的JS的对象(数字 字符串 数组...)

view:就是咱们的HTML呈现,angular会便利DOM树,然后经过compile,在和scope数据结合,完整的呈献给用户。

directive:指令,可以说是angular中相当占分量的概念,可以理解为去扩展HTML元素,使其具备一定的特性或者功能,类似于组件化HTML的意思,如果说DOM操作的话,就是在这里完成的;有人说这是未来的方向还是很有道理的,未来通道polymer O(∩_∩)O

依赖注入:其他好多语言也有这个概念,这样我们就不用创建依赖关系了,angular会自动帮我们注入到调用函数的参数中。

module:模块,可以理解为某类功能特性的集合,是一个应用块,模块是可以被依赖注入的,也是配置依赖的地方。

表达式:一个普通的JS代码片段,我们可以通过$parse服务对表达式求值,除了if else switch throw while for啊这些,基本上其他的JS代码片段都可以被parse求值,此外还增加了过滤器filter的管道|语法,例如3*10|currency,详见官网。

当然,还有一些概念这里是没涉及到的,例如service啊等等,等后边用到的时候,再去看也ok。

效果图:

细节:

说一下咱们的目的,密码长度限制,最长不超过10位,咱这里只是简单的demo,所以定10位;但用户输入的密码长度超过10的时候,提示用户,同时下边的预览区域,显示的输入密码只会显示10个,超出部分不显示。

之后会模拟注册(这里也意味着登录成功),然后跳转到主页,也就是咱们的主题内容部分。

详见代码注释即可。。

结束语:

开始旅程。。

本篇源码:https://github.com/dolymood/angular-example/tree/ls_2

欢迎吐槽

angular入门系列教程2的更多相关文章

  1. angular入门系列教程目录

    本系列教程的目标很明确,就是入门,会一步一步的从零到最终的能写出一个基本完整的应用.这个过程中不去纠结一些概念或者是如何实现等等深入的东西,只是停留在应用层. ps:如果条件允许的话,后续会有深入一点 ...

  2. angular入门系列教程4

    主题: 本篇主要目的就是继续完善home页下的index子页面的内容,处理一个列表,进行增删改查过滤等操作. 效果图: 细节: 主要的更改有两个,一个是修改模板index.html,还有就是增加控制器 ...

  3. angular入门系列教程3

    主题: 本篇主要目的就是继续完善home页,增加tab导航的三个页index index1 index2 效果图: 细节: 初始化的JS就是咱们的home.js,仔细来看. angular的route ...

  4. angular入门系列教程1

    主题: 一个能够跑起来的页面,神奇的效果,无需一样JS代码! 效果图: 细节: 当然,这里甚至连登陆都没做,只是看到神奇的当输入用户名或者密码的时候,下面的预览区域也会有相应的更改.没有一行的JS代码 ...

  5. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  6. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  7. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  8. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  9. ASP.NET MVC 入门系列教程

    ASP.NET MVC 入门系列教程 博客园ASP.NET MVC 技术专题 http://kb.cnblogs.com/zt/mvc/ 一个居于ASP.NET MVC Beta的系列入门文章,有朋友 ...

随机推荐

  1. JavaScript之放大镜效果

    在网上也浏览过许多关于JavaScript放大镜效果的文章,有的代码解释得些隐晦难懂,看的我头有点晕晕的╮(╯﹏╰)╭,我的心情是这样的: 吐槽完了,我们动动小鼠标,当鼠标经过下面这张美女图片时就实现 ...

  2. SQL 建表与查询 HTML计算时间差

    create database xue1 go --创建数据库 use xue1 go --引用数据库 create table xinxi ( code int, name ), xuehao ), ...

  3. 解析XML文档之二:使用PULL解析

    第一步:解析文档为一下文档 <?xml version="1.0" encoding="UTF-8"?> <students> < ...

  4. C++ 四则运算简单设计

    如果说要用C++写一个简单的四则运算的程序,相信难不到人,这还不简单吗?然后用不了五分钟,三下五除二,就出了下面的代码,一调试,没问题..... #include <iostream> u ...

  5. 一路走过的2013,welcome to 2014

    驻入博客园,还是在大学时,至今没写过一篇博客,一直都是在看人家写的博客.2014 年第一天,就从这一天,开启博客之旅,与大家分享好书,分享技术,结交好朋友. 简单,介绍下自己,大三实习,因为热衷于互联 ...

  6. jQuery 滑动方法slideDown向下滑动元素

    通过 jQuery可以在元素上创建滑动效果,jQuery slideDown() 方法用于向下滑动元素. jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以 ...

  7. DML,DDL,DCL,DQL的区别

      DML 英文缩写 DML = Data Manipulation Language,数据操纵语言,命令使用户能够查询数据库以及操作已有数据库中的数据的计算机语言.具体是指是UPDATE更新.INS ...

  8. Delphi XE5教程3:实例程序

    内容源自Delphi XE5 UPDATE 2官方帮助<Delphi Reference>,本人水平有限,欢迎各位高人修正相关错误! 也欢迎各位加入到Delphi学习资料汉化中来,有兴趣者 ...

  9. RealThinClient (RTC)是什么?

    RealThinClient SDK是用于开发标准的HTTP(S)服务器,ISAPI扩展以及客户端的VCL控件.可用于Windows下的CodeGear Delphi 6-XE5. 功能描述 Abou ...

  10. Delphi 两个应用程序(进程)之间的通信

    两个应用程序之间的通信实际上是两个进程之间的通信.由于本人知识有限,决定应用消息来实现.需要用到的知识: 1.RegisterWindowMessage(); //参数类型:pchar:返回值:Lon ...