主题:

一个能够跑起来的页面,神奇的效果,无需一样JS代码!

效果图:

细节:

当然,这里甚至连登陆都没做,只是看到神奇的当输入用户名或者密码的时候,下面的预览区域也会有相应的更改。没有一行的JS代码!
为什么会这样,这里不多说,指的我们必须注意的一些细节:

body元素上加了一个ng-app的属性,在input上加了ng-model以及在预览区"{{username}}"这样的东东,其他的什么都没。
1、启动方式:

一个angular应用是跑起来的“入口”,有两方式:

(1)在元素上添加ng-app指令(暂时无需关心什么意思);ng-app可以有属性值(ng-app="app"),这样的话就需要咱们去写一个名为app的module了,后续详解。

(2)不去指定ng-app,通过JS代码执行:angular.bootstrap(element, ['模块名'...]),一样也是可以启动的

2、大概过程

由于在这里我们只是加了一个ng-app,但是没指定名字,所以angular默认会帮助我们创建一个。。
input元素上的ng-model指令,指定的名字其实是挂在一个叫scope(暂时不去关心什么东东)的对象上的,也就是scope.username=输入框的值;

然后在下面的预览区域,用了{{}},也叫插值表达式,里面的值是scope上的一个属性username,渲染出来的结果就是input的value值,这里就是angular神奇的地方之一,他实现了双向绑定,所以当咱们更改input的值得时候,scope.username就会发生改变,然后在插值表达式的地方就会相应的绑定,也就是说view绑定了model,model绑定了view,不管是view还是model更改了,相对应的都会一起更改。

结束语:

细节暂时不用去纠结,这只是开始。。

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

欢迎吐槽

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

  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入门系列教程2

    主题: 本篇主要介绍下angular里的一些概念,并且在咱们的小应用上加上点料.. 概念(大概了解即可,代码中遇到的会有详细注释): 模板:动态模板,是动态的,直接去处理DOM的,而不是通过处理字符串 ...

  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. (Android)处理图片成圆形

    Android将一张Bitmap处理成圆形是十分常见的,经常见的场合就是作为用户头像,我们可以Canvas来辅助实现这个功能,代码如下 public static Bitmap toRoundCorn ...

  2. 北大ACM(POJ1007-DNA Sorting)

    Question:http://poj.org/problem?id=1007 问题点:逆序数及快排. Memory: 248K Time: 0MS Language: C++ Result: Acc ...

  3. (转)Linux下Oracle启动、建立表空间、用户、授权、数据库导入导出

    Linux系列 启动1.启动数据库实例,分为两步:第一步,启动监听:第二步,启动数据库实例. 1.1进入到sqlplus启动实例 [oracle@redhat ~]$ su - oracle      ...

  4. Spring IoC容器的设计—2—主线

    第二条接口设计主线是,以ApplicationContext应用上下文接口为核心的接口设计,这里涉及的主要接口设计有,从BeanFactory到ListableBeanFactory,再到Applic ...

  5. think in java 第四版读书笔记 第一章对象导论

    很久没有碰过java了,为了项目需要以及以后找工作,还是有必要将think in java通读一遍.欢迎大家一起讨论学习 1.1抽象过程 面向对象语言的5个特性: 1.万物皆对象 任何事物都可以抽象为 ...

  6. java集合(交集,并集,差集)

    说明:这里没有求差集的代码,有了交集和并集,差集=并集-交集       package com; import java.util.ArrayList; import java.util.HashS ...

  7. IAR产生可烧录的镜像文件

    Technorati 标签: IAR 烧录镜像 在IAR中,产生能够使用烧录器烧写的hex文件的方法: 1. 只生成可烧写的hex文件:     1.1   在Project Option中的Link ...

  8. Linux下OpenCV的环境搭建

    OpenCV is the most popular and advanced code library for Computer Vision related applications today, ...

  9. Uncaught SyntaxError: Unexpected token ILLEGAL【js错误】

    应该是逗号的中英文状态错了,应该是英文状态的逗号.还有百度应用后面的逗号.college后面的冒号

  10. Linux系统环境变量及命令

    Linux哪些我们常用,但是用的时候想不起来,这里做一个备忘录. Linux常用的变量: PATH 决定了shell将到哪些目录中寻找命令或程序 HOME 当前用户主目录 HISTSIZE 历史记录数 ...