1. 安装AngularJS

1.1 AngularJS官网

　　Github源码：https://github.com/angular/angular.js

1.2 npm安装AngularJS

npm install angular

2. AngularJS应用的构成元素

　　◊ 模型（Model）：AngularJS应用中用于展示到页面的数据，本质是一个JavaScript对象。

　　◊ 视图（View）：View是用户所看到的网页内容，View是AngularJS指令与表达式经过解析后的DOM元素。

　　◊ 控制器（Controller）：AngularJS中用于处理业务逻辑的JavaScript方法。

　　◊ 作用域（Scope）：作用域可以理解为一个容器，在控制器（Controller）中可以访问这个容器（Scope），往容器中放入数据模型，在视图（View）中可以通过表达式将数据展现给用户。

　　◊ 指令（Directives）：扩展的HTML属性或标签，能够被AngularJS框架识别，根据不同的指令执行相应的动作。

　　◊ 表达式（Expressions）：用于向页面输出信息。

　　◊ 模板（Template）：AngularJS以HTML作为模板语言，AngularJS模板时间是HTML片段。

3. AngularJS第一个应用

　　示例：

<!DOCTYPE html>

<html ng-app>

    <head>

        <meta charset="utf-8" />

        <script src="../lib/angular.min.js"></script>

    </head>

    <body>

        {{"Hello AngularJS!"}}

    </body>

</html>

　　说明：<html>标签中ng-app是AngularJS的一个内置指令，可以出现在任意位置。

　　ng-app两个作用：

　　(1). 启动AngularJS框架；

　　(2). AngularJS框架管理ng-app指令所在标签的开始标签到结束标签之间的所有DOM元素。

　　{{}}：是AngularJS的表达式形式，由两个嵌套的大括号构成，大括号中间为表达式内容。AngularJS会对表达式内容进行解析，将表达式内容输出到浏览器。

4. AngularJS表达式

　　AngularJS使用表达式把数据绑定到HTML。

4.1 表达式定义方式

　　AngularJS 表达式写在双大括号内：{{ expression }}。

4.2 表达式中的四则运算

<!DOCTYPE html>

<html ng-app>

    <head>

        <meta charset="utf-8" />

        <script src="../lib/angular.min.js"></script>

    </head>

    <body>

          四则运算：5 + 5 = {{ 5 + 5 }}

    </body>

</html>

4.3 表达式中的逻辑运算

<!DOCTYPE html>

<html ng-app>

    <head>

        <meta charset="utf-8" />

        <script src="../lib/angular.min.js"></script>

    </head>

    <body>

          逻辑运算：true && false = {{ true && false }}

    </body>

</html>

4.4 表达式与作用域

<!DOCTYPE html>

<html ng-app>

    <head>

        <meta charset="utf-8" />

        <script src="../lib/angular.min.js"></script>

    </head>

    <body>

        <div ng-init="points=[1,15,19,2,40]">

            <p>第三个值为 {{ points[2] }}</p>

        </div>

    </body>

</html>

　　ng-init指令：用于初始化作用域。

5. AngularJS数据绑定

　　数据绑定是AngularJS框架在视图（View）与作用域（Scope）之间建立的数据同步机制。

5.1 双向绑定ng-model

　　AngularJS双向绑定：View的操作能实时同步到Scope中，Scope中的数据修改能够实时回显到View中。

　　ng-model 指令：用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

　　ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

<!DOCTYPE html>

<html ng-app="app">

    <head>

        <meta charset="utf-8" />

        <script src="../lib/angular.min.js"></script>

        <script type="text/javascript">

            var app = angular.module("app", []);

            app.controller("HelloCtrl", function($scope) {

                $scope.text = "Hello AngularJS!";

            });

        </script>

    </head>

    <body>

        <div ng-controller="HelloCtrl">

            <input type="text" ng-model="text" /></div>

    </body>

</html>

<!DOCTYPE html>

<html ng-app>

    <head>

        <meta charset="utf-8" />

        <script src="../lib/angular.min.js"></script>

    </head>

    <body>

        <input type="text" ng-model="name" />

        {{ name }}

    </body>

</html>

　　注：上例中ng-app指令用于启动AngularJS应用。当AngularJS遇到ng-app指令时，会创建$rootScope作用域，为AngularJS的根作用域。

　　把ng-model制定作为属性添加到input标签中，AngularJS会在$rootScope作用域中添加属性。

　　当input表单中输入内容发生变化时，AngularJS会自动把输入的内容同步到作用域的属性中。

　　{{ name }}为AngularJS表达式形式，可以访问AngularJS作用域中的属性。AngularJS能够监控作用域中数据的变化，当数据发生变化时，页面实时更新显示内容。

5.2 单向绑定ng-bind

　　ng-bind指令：实现作用域（Scope）到视图（View）的单向数据绑定，和表达式功能类似。

<div>{{ text }}</div>

<div ng-bind="text"></div>

　　ng-bind与{{ expression }}区别：

　　在使用AngularJS表达式{{ expression }}时，如果遇到网络问题，会导致AngularJS加载缓慢，浏览器会直接把AngularJS表达式当作字符串渲染到页面中。

　　ng-bind指令在AngularJS没有加载完毕时不会解析执行，只有AngularJS加载完毕才会解析显示。

　　推荐使用ng-bind指令。

AngularJS 1.x系列：AngularJS简介及第一个应用（2）的更多相关文章

Springboot 1.简介及第一个demo
按照官网上的新建一个maven项目,然后将类引入pom.xml文件中 <?xml version="1.0" encoding="UTF-8"?> ...
测试框架httpclent 1.HttpClient简介及第一个demo
httpclient就是一个模拟发送http请求的一个工具. 首先在pom.xml文件里面添加工具类 <dependencies> <dependency> <grou ...
SpringBoot简介及第一个应用
一.Spring时代变换 1. Spring1.x 时代 Spring初代都是通过xml文件配置bean,随着项目的不断扩大,繁琐的xml配置,混乱的依赖关系,难用的bean装配方式,由此衍生了spr ...
[原创]java WEB学习笔记04：Servlet 简介及第一个Servlet程序（配置注册servlet，生命周期）
本博客为原创:综合尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和网络上的现有资源(博客,文档,图书等),资源的出处我会标明本博客的目的:①总结自己的学习过程,相当 ...
跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
[后端人员耍前端系列]AngularJs篇：30分钟快速掌握AngularJs
一.前言对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...
Angular系列----AngularJS入门教程05：双向绑定（转载）
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
Angular系列----AngularJS入门教程00：引导程序（转载）
我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...
Angular系列------AngularJS快速开始（转载）
Hello World! 开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”: 使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html. ...

随机推荐

openjduge 求简单表达式的值
表达式求值总时间限制: 10000ms 单个测试点时间限制: 1000ms 内存限制: 131072kB 给定一个只包含加法和乘法的算术表达式,请你编程计算表达式的值. 输入输入仅有一行 ...
Java基础：一个100%会发生死锁的程序
多线程是Java工程师进阶所必须掌握的一项技能,也是面试中绕不过的一个环节,而死锁又是多线程同步失败的经典案例,对于复杂的系统,死锁是很难通过代码层面来做静态检测和排查的,所以有的面试官会从反 ...
Linux下GitLab服务器搭建
系统环境操作系统:CentOS6.9关闭防火墙安装步骤 1. 安装Postfix 2. 下载rpm包并安装 3. 配置gitlab,vim /etc/gitlab/gitlab.rb,指定ip+端 ...
Windows7 64位环境6sv2.1大气传输模型修改源码添加国产高分卫星GF-1 GF-2光谱响应支持
下面开始添加国产卫星光谱响应的支持: 以下主要参考文章“6S大气传输模型修改源码添加.自定义卫星光谱响应(以HJ-1B CCD为例)”网址:http://blog.csdn.net/sam92/art ...
在AndroidStudio上使用AddressSanitizer
在AndroidStudio上使用AddressSanitizer AddressSanitizer是Google主导的一个开源内存问题检测工具.现在也开始支持Android平台,且受Google推荐 ...
DVWA 黑客攻防演练（二）暴力破解 Brute Froce
暴力破解,简称"爆破".不要以为没人会对一些小站爆破.实现上我以前用 wordpress 搭建一个博客开始就有人对我的站点进行爆破.这是装了 WordfenceWAF 插件后的统计 ...
C#生成JOSN字符串
C#如何生成JSON字符串?(序列化对象) 第一章:C#如何拿到从http上返回JSON数据? 第二章:C#如何解析JSON数据?(反序列化对象) 第三章:C#如何生成JSON字符串?(序列化对象 ...
python模块（os，sys，hashlib，collections）
列出目录下所有文件 os.listdir('dirname'):列出指定目录下的所有文件和子目录,包括隐藏文件,并以列表方式返回. 创建文件夹: os.mkdir('文件夹') 创建文件夹 os ...
数字信号处理专题（1）——DDS函数发生器环路Demo
一.前言会FPGA硬件描述语言.设计思想和接口协议,掌握些基本的算法是非常重要的,因此开设本专题探讨些基于AD DA数字信号处理系统的一些简单算法,在数字通信信号分析与检测等领域都会或多或少有应用 ...
在Visual Studio 2017上配置Glut
在Visual Studio 2017上配置Glut 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 在Visual Studio 2017上配置并使用 ...

AngularJS 1.x系列：AngularJS简介及第一个应用（2）