rrrrrrrrrrrrrrrrrrr

最新推荐文章于 2025-08-12 14:37:12 发布

weixin_30617695

最新推荐文章于 2025-08-12 14:37:12 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/flyroc-cyf/p/10283473.html

本文深入介绍了AngularJS框架，包括其核心组件View、Model和Controller的作用，以及如何通过<script>标签添加到HTML页面。文章详细解释了AngularJS指令的功能，特别是ng-app、ng-init、ng-controller和ng-model的使用方法，展示了如何利用这些指令创建和管理AngularJS应用程序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

title: final

一、AngularJS简介：

AngularJS是一个JavaScript框架，可通过<script>标签添加到HTML页面：
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

AngularJS应用组成：
1.View(视图)，即HTML。
2.Model(模型)，当前视图中可用的数据。Scope便是模型。
3.Controller(控制器)，即JavaScript函数，可以添加或修改属性。

二、AngularJS指令：

形式： ng-directives
作用： AngularJs指令是以(ng作为前缀)的HTML属性，拓展了HTML。
常用指令：
ng-app

定义一个AngularJS应用程序，定义了AngularJS应用程序的根元素，其在网页加载完毕时会自动引导(初始化)应用程序。

ng-init

初始化AngularJS应用程序变量(并不常用，通常使用一个控制器或模块来代替它)。

ng-controller

指明一个(应用程序的)控制器，AngularJS使用$scope对象来调用控制器。

ng-model

将HTML元素的值与应用程序数据绑定(如将输入域的值与应用程序变量name绑定)。ps：此绑定为双向绑定，在修改输入域的值时，AngularJS属性的值也将修改。

为应用程序数据提供类型(number、email、required)和状态(valid/invalid、dirty、pristine、touched、error)验证。
$valid/$invalid字段内容合法/非法
$dirty/$pristine表单已被用户操作/未被用户操作
$touched通过触屏点击
实例：

<form ng-app="" name="myForm" ng-init="myText='test@qq.com'">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

基于指令自身状态为HTML元素提供CSS类(ng(-not)-empty、ng-(un)touched、ng-(in)valid、ng-dirty、ng-pending、ng-pristine)。

<form ng-app="" name="myForm" ng-init="myText='test@qq.com'">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

转载于:https://www.cnblogs.com/flyroc-cyf/p/10283473.html