AngularJS学习要点

最新推荐文章于 2021-02-25 06:09:04 发布

追梦码仔

最新推荐文章于 2021-02-25 06:09:04 发布

阅读量431

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/gs932899178/article/details/54880385

版权

Java 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一。简介

AngularJS 是谷歌的一个 JavaScript 框架，旨在简化前端应用程序的开发。

二。五大特性：

1.良好的应用程序架构

使用 AngularJS，您可以通过MVC（模型 - 视图 - 控制器）或MVM （模型 - 视图 - 视图模型）模式来组织源代码。

AngularJS 是一个 MVW 框架，其中W代表可以用于任何项目。你可以组织你的代码模块，它可显著提高应用程序的可测试性和可维护性。

2.双向数据绑定

　数据绑定肯定是 AngularJS 最佳功能之一。你可以声明绑定的模型到 HTML 元素。当模型发生变化时，视图会自动更新，反之亦然。

这可以减少大量的传统样板代码，保持模型和视图同步。

3.指令

AngularJS 指令让你使用 HTML 新语法快速的构建应用程序。您可以创建可重用的自定义组件与指令的API。

4.HTML模板

AngularJS 使用 HTML 模板，这使事情变得简单，并允许设计人员和开发人员同时工作。设计人员可以按照通常的方式创建用户界面，

而开发人员可以使用声明性绑定语法很容易配合不同的UI组件的数据模型。

5.可嵌入、注入、测试

AngularJS 官方网站说，你可以根据你需要使用尽可能多或尽可能少的在项目中使用 AngularJS。如果你只需要双向数据绑定，您可以引入

Angular，只是使用此功能。

AngularJS 支持依赖注入的开箱即用。如果你需要的东西，你只要调用 Angular 来注入。就这么简单。这巨大的提高可测试性，因为你可以很容易地在测试的模拟组件。

AngularJS 在创建时候始终考虑着可测试性。这些模块和依赖注入系统，使得单元测试更容易。此外， AngularJS 提供了一个称为量角器工具，

这使得终端到终端的测试变得轻而易举。所以，你开发的代码始终是可测试性和可维护性。

支持HTML5，AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

此外：AngularJS 还提供了更多的实用功能，如路由，过滤器，和动画等等。

AngularJS 表达式与 JavaScript 表达式的区别

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

三。导入：

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

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

ng-bind 指令把应用程序数据绑定到 HTML 视图。

<!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>
<div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>
</body>
</html>

指令---

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name。

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

ng-init 指令初始化 AngularJS 应用程序变量。

ng-repeat 指令用在一个对象数组上，例如:

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

创建自定义的指令

使用 .directive 函数来添加自定义的指令,要调用自定义指令，HTML 元素上需要添加自定义指令名。使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

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

通过添加 restrict 属性,并设置只值为 "A" , 来设置指令只能通过属性的方式来调用:

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

应用范例：

AngularJS 模块（Module）定义了 AngularJS 应用。

AngularJS 控制器（Controller）用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。

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

验证用户输入

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

若为必填，则添加属性：required

AngularJS Scope(作用域)

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

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

<!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>
<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>
<p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p>
</body>
</html>

AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

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

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

过滤输入

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

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });