理解AngularJs篇：30分钟快速掌握AngularJs资源-CSDN文库

112 浏览量 2020-10-20 19:15:29 上传评论收藏 114KB PDF 举报

资源推荐

资源详情

资源评论

理解理解AngularJs篇：篇：30分钟快速掌握分钟快速掌握AngularJs

主要介绍了理解AngularJs篇：30分钟快速掌握AngularJs，详细介绍了AngularJs所涉及的知识点，有兴趣的可

以了解一下。

一、前言一、前言

对于前端系列，自然少不了AngularJs的介绍了。在前面文章中，我们介绍了如何使用KnockoutJs来打造一个单页面程序，后

面一篇文章将介绍如何使用AngularJs的开发一个单页面应用程序。在开始使用AngularJs开发SPA之前，我觉得有必要详细介

绍下AngularJs所涉及的知识点。所有也就有了这篇文章。

二、二、AngularJs介绍介绍

AngularJS是Google推出的一款Web应用开发框架。它提供了一系列兼容性良好并可扩展的服务，包括数据绑定、DOM操

作、MVC和依赖注入等特性。相信下面图片可以更好地诠释AngularJs具体支持哪些特性。

从上图可以发现，AngularJs几乎支持构建一个Web应用的所有内容——数据绑定、表单验证、路由、依赖注入、控制器、模

板和视图等。

但并不是所有的应用都适合用AngularJs来做。AngularJS主要考虑的是构建CURD应用，但至少90%的Web应用都是CURD应

用。哪什么不适合用AngularJs来做呢? 如游戏、图像界面编辑器等应用不适合用AngularJs来构建。

三、三、AngularJS核心知识点核心知识点

接下来，我们就详细介绍了AngularJS的几个核心知识点，其中包括：

指令（directive）和数据绑定(Data Binding)

模板(Module)

控制器(Controller)

路由(Route)

服务(service)

过滤器(Filter)

3.1 指令和数据绑定指令和数据绑定

在没有使用AngularJs的Web应用，要实现前台页面逻辑通过给HTML元素设置ID，然后使用Js或Jquery通过ID来获取HTML

DOM元素。而AngularJS不再需要给HTML元素设置ID，而是使用指令的方式来指导HTML元素的行为。这样做的好处是开发

人员看到HTML元素以及指令(Directive)就可以理解其行为，而传统设置Id的方式并不能给你带来任何有用的信息，你需要深

入去查看对应的Js代码来理解其行为。

上面介绍了这么多，好像没有正式介绍指令是什么呢？光顾着介绍指令的好处和传统方式的不同了。指令可以理解为声明特殊

的标签或属性。AngularJs内置了很多的指令，你所看到的所有以ng开头的所有标签，如ng-app、ng-init、ng-if、ng-model

等。

ng-app:用于标识页面是一个AngularJs页面。一般加载HTML的根对象上。

ng-init 用于初始化了一个变量

ng-model：用户在Property和Html控件之间建立双向的数据绑定(Data Binding)。这样Html控件的值改变会反应到

Property上，反过来也同样成立。

AngularJs通过表达式的方式将数据绑定到HTML标签内。AngularJs的表达式写在双大括号内：{{expression}}

下面具体看一个指令的例子：

<!DOCTYPE html>

<head>

<title>Using Directives and Data Binding Syntax</title>

</head>

<div>

Name: <input type="text" ng-model="name" /> {{name}}

</div>

</body>

</html>

当我们改变输入框的值时，对应的改变会反应到name属性上，从而反应到表达式的值。AngularJs中双向绑定的使用主要是靠

ng-model指令来完成的。前面说的都是一些AngularJs内置的指令，其实我们也可以自定义指令。关于这部分内容将会在后面

介绍到。

3.2 模板模板

在Asp.net MVC中提供了两种页面渲染模板，一种是Aspx，另一种是Razor.然而Asp.net MVC的这两种模板都是后端模板，即

页面的渲染都是在服务端来完成的。这样不可避免会加重服务器端的压力。AngularJs的模板指的是前端模板。AngularJS有

内置的前端模板引擎，即所有页面渲染的操作都是放在浏览器端来渲染的，这也是SPA程序的一个优势所在，所有前端框架都

内置了前端模板引擎，将页面的渲染放在前端来做，从而减轻服务端的压力。

在AngularJs中的模板就是指带有ng-app指令的HTML代码。AngularJs发现Html页面是否需要用AngularJs模板引擎去渲染的

标志就是ng-app标签。

在AngularJs中，我们写的其实也并不是纯的Html页面，而是模板，最终用户看到的Html页面（也就是视图）是通过模板渲染

后的结果。

下面来看下模板的例子：

<!DOCTYPE html>

<head>

<title>Template Demo</title>

(function() {

// 创建模块

var mainApp = angular.module("mainApp",[]);

// 创建控制器，并注入scope

mainApp.controller("tempController", ["$scope", function ($scope) {

$scope.val = "Welcome to Study AngularJs.";

}]);

})()

</script>

</head>

<body>

<h2>AngularJS 模块演示</h2>

</div>

</body>

</html>

3.3 控制器控制器

其实模板中的例子中，我们就已经定义了名为"tempController"的控制器了。接下来，我们再详细介绍下AngularJs中的控制

器。其实AngularJs中控制器的作用与Asp.net MVC中控制器的作用是一样的，都是模型和视图之间的桥梁。而AngularJs的模

型对象就是$scope。所以AngularJs控制器知识$scope和视图之间的桥梁，它通过操作$scope对象来改变视图。下面代码演

示了控制器的使用：

<!DOCTYPE html>

<head>

<title>AngularJS 控制器演示</title>

</script>

(function() {

// 创建模块

var mainApp = angular.module("mainApp", []);

mainApp.controller("cntoController", ["$scope", function ($scope) {

var defaultValue = "Learninghard 前端系列";

$scope.val = defaultValue;

$scope.click = function () {

$scope.val = defaultValue;

};

}]);

})()

</script>

</head>

<body>

<h2>AngularJS 控制器演示</h2>

剩余6页未读，继续阅读

评论收藏

内容反馈

weixin_38623000

粉丝: 5
资源: 925

理解AngularJs篇：30分钟快速掌握AngularJs

30分钟教你轻松掌握正则表达式

30分钟掌握stl

60分钟掌握AngularJS

Angularjs_in_action

Angularjs 合集 Angularjs 合集

AngularJS:AngularJS 作业和项目

30分钟快速掌握Bootstrap

30分钟掌握STL

AngularJS学习 chm 文件

Angularjs2--最简单的结构

AngularJS1.X快速入门

AngularJS 中文API参考手册

Beginning AngularJS

5分钟快速掌握Java 类加载器

快速理解和掌握MIB

30分钟掌握Project2003

30分钟快速掌握Bootstrap框架

创建你自己的angularjs

angularJS_学习资料

Professional AngularJS

angularjs 小猫杯全套 代码

Professional AngularJS 电子书

最新资源

angularjs 小猫杯全套代码