1. 安装AngularJS

1.1 AngularJS官网

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

　　官网：https://angularjs.org/

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）的更多相关文章

  1. Springboot 1.简介 及第一个demo

    按照官网上的新建一个maven项目,然后将类引入pom.xml文件中 <?xml version="1.0" encoding="UTF-8"?> ...

  2. 测试框架httpclent 1.HttpClient简介及第一个demo

    httpclient就是一个模拟 发送http请求的一个工具. 首先在pom.xml文件里面添加工具类 <dependencies> <dependency> <grou ...

  3. SpringBoot简介及第一个应用

    一.Spring时代变换 1. Spring1.x 时代 Spring初代都是通过xml文件配置bean,随着项目的不断扩大,繁琐的xml配置,混乱的依赖关系,难用的bean装配方式,由此衍生了spr ...

  4. [原创]java WEB学习笔记04：Servlet 简介及第一个Servlet程序（配置注册servlet，生命周期）

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  5. 跟我学AngularJs:AngularJs入门及第一个实例

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...

  6. [后端人员耍前端系列]AngularJs篇：30分钟快速掌握AngularJs

    一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...

  7. Angular系列----AngularJS入门教程05：双向绑定（转载）

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...

  8. Angular系列----AngularJS入门教程00：引导程序（转载）

    我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...

  9. Angular系列------AngularJS快速开始（转载）

    Hello World! 开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”: 使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html. ...

随机推荐

  1. 【Docker】基础学习及在.Net Core应用

    一.Docker基础 Docker 是一个开源的应用容器引擎,基于 Go 语言 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 Linux 机器上 ...

  2. 跨平台 webapp 开发技术之 Hybrid App

    前所知的 APP 开发模式有三种: 基于操作系统运行的 APP -> Native App,侧重于原生开发,用户体验好,需要安装才会升级 基于浏览器运行的 APP -> Web App,侧 ...

  3. Dubbo开发，利用项目模拟提供者和消费者之间的调用--初学

    开发工具:IDEA,虚拟机 VMware Workstation 预备工作:安装好zookeeper的虚拟机,电脑jdk更换为1.7,本地tomcat启动,能够访问以下页面即可进行开发 2.建立以下s ...

  4. 前后端分离djangorestframework——认证组件

    authentication 认证是干嘛的已经不需要多说.而前后端未分离的认证基本是用cookie或者session,前后端分离的一般用token 全局认证 先创建一个django项目,项目名为drf ...

  5. Asp.Net Core 下 Newtonsoft.Json 转换字符串 null 替换成string.Empty

    public class NullToEmptyStringResolver : DefaultContractResolver { /// <summary> /// 创建属性 /// ...

  6. 周一01.4安装PyCharm步骤

    安装集成开发工具 步骤一 步骤二 步骤三 步骤四

  7. PHAR系列之导言

    由于之前都是在现成的PHP框架下写web项目,一般都只专注于框架内部的使用跟优化.但是对于一些PHP很有特色的功能跟特性很少过多的深入了解.最近做项目调研的时候偶尔注意到一个PHP中一个比较常见的概念 ...

  8. Selenium自动化测试-unittest单元测试框架使用

    一.什么是unittest 这里我们将要用的unittest是python的单元测试框架,它的官网是 https://docs.python.org/2/library/unittest.html,在 ...

  9. 在Linux系统中同步更新我们的Github博客

    原理介绍 类似于版本管理,我们把我们的hexo博客文件系统在Github上建立一个分支,通过管理分支提交最新的博客文件系统,保证我们博客框架的更新.然后我们基于最新的博客框架,撰写文章,进行Githu ...

  10. 周末班：Python基础之面向对象基础

    面向对象基础 面向对象和面向过程 编程思想是什么,就是用代码解决现实生活中问题的思路. 面向过程 核心点在过程二字,过程指的是解决问题的步骤,说白了就是先做什么再干什么.这种解决问题的思路就好比是工厂 ...