AngularJS初步认识与学习

最新推荐文章于 2020-02-21 23:19:42 发布

凤舞九天的博客

最新推荐文章于 2020-02-21 23:19:42 发布

阅读量307

点赞数

分类专栏： angularJs javaweb前端

本文链接：https://blog.csdn.net/qq_36526703/article/details/53007986

版权

javaweb前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

angularJs

3 篇文章 0 订阅

订阅专栏

一.简介

angular js 是一个JavaScript框架，通过<script>标签添加到HTML页面：<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
注：我们建议把脚本放在<body>元素的底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

AngularJS通过指令扩展了HTML，且通过表达式绑定数据到HTML。

1.表达式:写在双大括号内{{ expression }}
2.模块（Module）定义了AngularJs应用
控制器（Controller）用于控制AngularJS应用
例：

<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

3.AngularJs表达式与Js表达式
都可以包含字母、操作符、变量，但AngularJs可以写在Html中，不支持条件判断、循环以及异常，支持过滤器。

二.AngularJs指令

1.常用指令
(1)ng-app：初始化一个AngularJs应用程序
(2)ng-init：初始化应用程序数据
(3)ng-model：把元素值（比如输入域的值）绑定到应用程序
(4)ng-repeat：指令对于集合中（数组中）的每一项还会克隆一次Html元素

ng-model：用于绑定应用程序数据到Html控制器（input select textare）的值，如邮箱验证：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<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>

</body>
</html>

应用状态：（文本域必须添加required属性）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">

Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

</form>

</body>
</html>

ng-model基于他们的状态为Html元素提供了CSS类（定位元素）：

ng-empty，ng-not-empty，ng-touched，ng-untouched，
ng-valid，ng-invalid，ng-dirty，ng-pending，ng-pristine

2.自定义指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>
</html>

调用方式：

元素名----<runoob-directive></runoob-directive>
属性----<div runoob-directive></div>
类名----<div class="runoob-directive"></div>
注释----<!-- 指令: runoob-directive -->

3.限制使用：通过设置restrict来设置调用方式，如restrict：‘A’

E——>元素名    A——>属性    C——>类名    M——>注释

三.AngularJs Scope 作用域

scope是作用在HTML（视图）和JavaScript（控制器）之间的纽带。
当你在 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.carname = "Volvo";
});
</script>