angularjs学习笔记二——代码结构简介

来源：互联网发布：自动装修软件编辑：程序博客网时间：2024/05/29 20:00

通过上一篇博文，为大家解答了几个初学常见的问题，并展示了第一个程序。这里我们就上一篇博文中的代码基础上，来了解一下ng(AngularJS简称)的基本结构

首先我们先从上一篇博文的代码开始，代码如下

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <title>程序1</title>        <!-- 引入angularJS -->        <script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script>    </head>    <body>        <div ng-app="" ng-init="inputName='Funco_小风'"><!-- 定义变量inputName初始值为字符串'Funco_小风' -->            name:<input type="text" placeholder="inputyourname" ng-model="inputName" /><!-- 通过ng-model将该input标签与变量inputName绑定 -->            <br />            你的名字是 -{{inputName}}<!-- 显示变量inputName -->        </div>    </body></html>

body下的第一个div标签，有一个ng-app，如果你没学过ng，那么你可能会认为他是HTML标签属性，就像width和bgcolor一样，但事实上，这东西在ng中我们称为指令。

在运行时，浏览器会解析获取的angular.js文件，这个angular.js中的运行机制你目前初学不需要去掌握，只需要知道它被解析后，就相当于有了一个ng解析器，它会解析HTML中的ng指令。

这里我们看到有三个ng指令，依次是ng-app\ng-init\ng-model。首先，你应该从这里可以看出，这些ng指令都以 “ng-” 开头，事实上，几乎所有(目前我已知的范围内)ng指令都是以ng-开头。

ng-app用来声明ng应用，只有声明了ng-app的标签，其内容中属于ng的部分才会被解析。如果你尝试将上面代码中的ng-app=""移除，你会发现，原本的效果都将失去。当然，在声明了ng-app的标签以外的地方使用ng，也是无效的。此外，上方的ng-app指令也可以被赋予一个字符串，比如将上方中的ng-app=""改为ng-app="Myapp"则表示声明一个应用，名为Myapp。他的具体用法在后面具体讲指令的时候会详细讲

ng-model用于绑定变量，在ng中这样的变量也称为模型。它可以将HTML标签的值绑定到ng-model声明的模型中，如上方就将input标签输入的值绑定到了inputName这个属性中。值得注意的是，该指令仅能用与表单元素上，其他元素使用你可能得不到任何效果。实际上，你在表单以外的标签使用这个指令也没有意义，毕竟非表单的标签没办法输入值。

{{}}是表达式，在这里面你可以直接调用已经定义的模型，也可以进行各种运算，并将结果输出到该表达式所在位置。如上方中{{inputName}}就是输出inputName的值。

由此我们可以了解到，正是用ng-app声明了ng应用，使用ng-model将HTML标签与模型绑定，同时使用表达式{{}}输出，才能实现一边输入表单，另一边同时输出表单内容。

这么一来你应该能感受到，ng与原生js和jquery的不同指出，至少就这样的功能而言，你用原生js和jquery都要至少好五六行的代码，而ng仅仅需要三步走，他甚至不需要你定义并注册事件函数。因为他会自动监视模型，当模型发生改动时，自动重新运行app中所有与该模型关联的操作(这样的机制在ng中称为数据绑定)。这也是为什么jquery程序员可能很难接受ng的原因之一，毕竟ng封装程度较jquery更高，这也是为什么我们见到称jquery更多时候是库，而称ng更多时候是框架

这里我们仅仅对angularJS结构作基本了解，你只要大概能了解到ng的使用方法和大致过程即可，实际上，除了指令，表达式，和模型外，它还有很多概念，很多指令，比如控制器、作用域、过滤器、动画、包含、路由。还有它的网络操作，如cookies、提供异步操作的promis。以及它如何编写UI，比如与Twiter出品的前端框架Bootstrap协作。这些仅需要知道就行。后面会开始按照如上所述的次序进一步了解学习。

阅读全文

1 0