AngularJS入门

news/2024/7/27 8:09:10/文章来源:https://blog.csdn.net/ab15176142633/article/details/136234525

1. AngularJS简介

AngularJS是一个JavaScript框架，用js编写的库

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<!-- 放在<body> 元素的底部。提高网页加载速度 -->

1.1. AngularJS 扩展了 HTML

AngularJS 通过 ng-directives扩展了HTML

ng-app 指令定义一个 AngularJS 应用程序。若不声明，将直接显示表达式。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。一般使用 **{ { ng-model 的值 }}**获取数据

<div ng-app=""><p>名字 : <input type="text" ng-model="name"></p><h1>Hello {{name}}</h1>    <!-- 常用方式 --><p ng-bind="name"></p>
</div>

当网页加载完毕，AngularJS 自动开启。

2. AngularJS表达式

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

使用{ { 表达式 }}进行数据的输出

表达式可以包含字符，操作符，变量

表达式可以写在HTML中

不支持条件判断，循环及异常

支持过滤器

<div ng-app=""><p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>

2.1. AngularJS数字

类似于JavaScript的数字

<div ng-app="" ng-init="quantity=1;cost=5">  <!-- ng-init用来初始化数据，不常用 --><p> 总价： {{ quantity * cost }} </p>
</div>

2.2. AngularJS字符串

类似于JavaScript的字符串

<div ng-app="" ng-init="firstName='Tom';lastName='Jack'"><p> 姓名： {{ firstName + " " + lastName }} </p>
</div>

2.3. AngularJS 对象

类似于JavaScript的对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p> 姓为 {{ person.lastName }} </p>
</div>

2.4. AngularJS 数组

类似于JavaScript的数组

<div ng-app="" ng-init="points=[1,12,9,3,40]"><p> 第三个值为 {{ points[2] }} </p>
</div>

3. AngularJS指令

通过指令来扩展HTML。通过内置的指令来为应用添加功能，可以自定义指令。

指令带有前缀 ng- ng-app指令用来初始化一个 AngularJS应用程序

3.1. 数据绑定

表达式**{{ firstName }}** 通过 ng-model=“firstName” 进行同步。

<div ng-app="" ng-init="firstName='Tom'"><input type="text" ng-model="firstName"><!-- 默认为Tom，输入值时 下方的表达式值会改变 -->{ { firstName }}
</div>

3.2. 重复HTML元素

ng-repeat指令：重复一个HTML元素，用作循环

<div ng-app="" ng-init="names=['Tom','Jack','Hege']"><ul><li ng-repeat="i in names"> {{ i }} </li></ul>
</div>

用在一个对象数组上

<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"><ul><li ng-repeat="i in names"> {{ i.name + "," + i.country }} </li></ul>
</div>

3.3. ng-app指令

在网页加载完毕时自动初始化一个 AngularJS应用程序

通过一个值**（ng-app=“myCode”）**连接到代码模块

3.4. ng-init指令

为 AngularJS 应用程序定义了初始值。一般不使用

3.5. ng-model 指令

/// ng-model="name" 声明一个name变量/// $scope.name 使用name变量

绑定应用程序数据到 HTML 控制器(input, select, textarea)的值
为应用程序数据提供类型验证（number、email、required）
为应用程序数据提供状态（invalid、dirty、touched、error）
为 HTML 元素提供 CSS 类
绑定 HTML 元素到 HTML 表单
将输入域的值（$scope）与 AngularJS 创建的变量绑定

<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
</div><script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = "John Doe"; }); </script>

双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改

<div ng-app="myApp" ng-controller="myCtrl"><input ng-model="name"/>      <!-- 默认显示Tom --><p> 你输入了： {{ name }} </p>  <!-- 修改输入框的值，此处名字也会相应修改 -->
</div><script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope){ $scope.name = 'Tom' }) </script>

验证用户输入 ng-show

<form ng-app="" name="myForm">Email: <input type="email" name="myAddr" ng-model="text"><span ng-show="myForm.myAddr.$error.email">不是一个合法的邮箱地址</span>
</form>

为应用数据提供状态值（invalid, dirty, touched, error）

<form ng-app="" name="myForm" ng-init="myText = 'test@lwclick.com'">Email:<input type="email" name="myAddr" ng-model="myText" required><h1>状态</h1>{ { myForm.myAddr.$valid }}         如果输入的值是合法的则为 true{ { myForm.myAddr.$dirty }}         如果值改变则为 true{{ myForm.myAddr.$touched }}       如果通过触屏点击则为 true{{ myForm.myAddr.$error.email }}   如果输入的Email的值非法则为 true
</form>

CSS类，基于它们的状态为 HTML 元素提供了 CSS 类

<!-- 输入框有required属性，必须输入数据，若不输入则为非法的，触发input.ng-invalid -->
<style> input.ng-invalid { background-color: lightblue; } 
</style><form ng-app="" name="myForm">输入你的名字: <input name="myAddress" ng-model="text" required>
</form>

ng-empty 为空的时候
ng-not-empty 不为空的时候
ng-touched 控件已失去焦点
ng-untouched 控件未失去焦点
ng-valid 验证通过
ng-invalid 验证失败
ng-dirty 值改变的时候
ng-pending 任何为满足 $asyncValidators 的情况
ng-pristine 控件为初始状态

3.6. ng-repeat指令

对于集合中（数组中）的每个项会克隆一次 HTML 元素。用于循环输出

3.7. 创建自定义指令

声明：使用 .directive 函数来添加自定义的指令，声明时使用驼峰命名法

<body ng-app="myApp"><!-- 使用 --><lw-click></lw-click><!-- 声明 --><script> var app = angular.module("myApp", []); app.directive("lwClick", function(){ return { template: "<h1>自定义指令~</h1>" } }); </script>
</body>

调用：调用时使用 – 分割

元素名： <lw-click> </lw-click>

属性： <div lw-click> </div>

类名： <div class="lw-click"> </div>

必须设置 restrict 的值为 “C” 才能通过类名来调用指令。

<script> app.directive("lwClick", function(){ return { restrict: "C", template: "<h1>自定义指令~</h1>" } }); 
</script>

注释：

添加 replace 属性，使注释可见

设置 restrict 的值为 “M”

<script> app.directive("lwClick", function(){ return { restrict: "M", replace: true, template: "<h1>自定义指令~</h1>" } }); 
</script>

4. AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

4.1. 使用Scope

在AngularJS创建控制器时，可以将$scope对象当作一个参数传递

<div ng-app="myApp" ng-controller="myCtrl"><h1> { { carName }} </h1>                         <!-- 获取变量的值 -->
</div><script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope){ // scope作为参数传递 $scope.carName = "Volvo"; // 声明一个变量 })
</script>

4.2. Scope概述

AngularJS应用组成如下：

View（视图），即HTML scope的属性和方法
Model（模型），当前HTML中可用的数据 scope
Controller（控制器），JavaScript函数，可以添加或修改属性 scope的属性和方法

<div ng-app="myApp" ng-controller="myCtrl"><input ng-model="name">       <!-- 数据绑定 --><h2> {{ greeting }} </h2><button ng-click="sayHello()"> 点我 </button>
</div><script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope){ $scope.name = "lwclick"; // 声明name // 创建方法，响应点击事件 $scope.sayHello =  function(){ $scope.greeting = 'hello' + $scope.name + '!'; } }) 
</script>

4.3. Scope作用范围

根作用域：$rootScope

作用在 ng-app 指令包含的所有HTML元素中
用 $rootScope 定义的值，可以在各个controller中使用

<div ng-app="myApp" ng-controller="myCtrl"><h1>{{ lastName }} 家族成员:</h1> <ul><li

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_996230.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！