AngularJS 简介

it2022-06-20  81

简介

AngularJS 是一个 JavaScript 框架AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTMLAngularJS表达式可以写在HTML里面AngularJS表达式不支持条件和循环语句,而且没有exception语句AngularJS表达式支持过滤器

AngularJS 应用组成

View(视图), 即 HTMLModel(模型), 当前视图中可用的数据($scope/$rootScope)Controller(控制器), 即 JavaScript 函数,可以添加或修改属性

指令

AngularJS 通过 ng-directives 扩展了 HTMLAngularJS 指令是以 ng 作为前缀的 HTML 属性ng-app 指令定义一个 AngularJS 应用程序ng-controller 定义了控制器注:一个页面只能有一个ng-app,可以有多个ng-controllerng-model 指令把元素值(比如输入域的值)绑定到应用程序,可以为应用数据提供状态值(invalid, dirty, touched, error)ng-bind 指令把应用程序数据绑定到 HTML 视图(双向绑定)ng-init 指令初始化 AngularJS 应用程序变量ng-repeat 指令让每个重复项都访问了当前的重复对象,对于集合中(数组中)的每个项会 克隆一次 HTML 元素ng-show 指令验证用户输入ng-invalid 指令,处理当数据不合法的时候详细指令查询:http://www.runoob.com/angularjs/angularjs-reference.html

表达式

AngularJS 表达式写在双大括号内:{{ expression }}AngularJS 表达式把数据绑定到 HTML(双向绑定),这与 ng-bind 指令有异曲同工之妙AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量

示例

ng-app不可省略ng-init初始化变量ng-bind绑定变量,显示

<div ng-app="" ng-init="firstName='John'"> <p>姓名为 <span ng-bind="firstName"></span></p> </div> ``` AngularJS 表达式使用 ```html <div ng-app=""> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> </div> ``` ng-controller指令定义了应用程序控制器,控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建(如下) $scope(相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象 控制器也可以有方法(变量和函数),调用fullName这个方法需要括号 ```html <p>尝试修改以下表单。</p> <div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} <br /> 全名: {{fullName()}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName = "Doe"; $scope.fullName = function () { debugger; return $scope.firstName + " * " + $scope.lastName; }; }); </script> </script> ``` 验证用户输入 ```html <form ng-app="" name="myForm"> Email: <input type="email" name="myAddress" ng-model="text"> <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span> </form> <p>在输入框中输入你的邮箱地址,如果不是一个合法的邮箱地址,会弹出提示信息。</p> ``` ng-invalid与required合用,在数据合理/不合理的两种情况下,显示不同效果 ```html <style> input.ng-invalid { border-color:red; } </style> <form ng-app="" name="myForm"> 输入你的名字: <input name="myName" ng-model="myText" required> </form> <p>编辑文本域,不同状态边框颜色会发送变化。</p> <p>文本域添加了 required 属性,该值是必须的,如果为空则是不合法的。</p> ``` 摘自:http://www.runoob.com/angularjs/angularjs-intro.html

转载于:https://www.cnblogs.com/Lulus/p/7873887.html

相关资源:数据结构—成绩单生成器

最新回复(0)