Angular入门、Angular控制器、Angular常见内置指令总结

最新推荐文章于 2020-12-08 17:23:22 发布

请叫我龙仔c

最新推荐文章于 2020-12-08 17:23:22 发布

阅读量911

点赞数 1

分类专栏： web前端前端菜鸟 H5入门者 JavaScript探索者文章标签： angular

本文链接：https://blog.csdn.net/Jnlong_vae/article/details/70824135

版权

web前端同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

JavaScript探索者

11 篇文章 0 订阅

订阅专栏

前端菜鸟

8 篇文章 0 订阅

订阅专栏

Angular入门、Angular控制器、Angular常见内置指令总结

首先我还是一名学生，现在在外培训HTML5这门技术，这几天刚学到Angular这块内容，个人感觉Angular这块学习内容挺多的，所以先把这几天学到的知识做个总结，以下我从三个方面做个总结。

一、Angular入门

简介：AngularJS是一个基于MVC处理模式，实现了MVVM数据双向绑定的用于开发动态web项目的框架。

以其数据和展现分离、MVVM、MVC、DI等强大的特性活跃于前端开发市场，是前端敏捷开发使用的主流的必须掌

握的框架之一。

AngularJS是web应用前端的一个完整的解决方案，框架不仅提供了优雅的DOM操作和基于Ajax的数据交互技术，

同时进行了良好的结构整理和常规的业务逻辑处理的封装，使得Angular构建的应用能够灵活的适应不同的项目场景。

是前后端分离软件架构模型下，前端业务处理的解决方案！

注意：AngularJS中提供了如下的解决方案用以前端开发：数据双向绑定、基本模板指令、自定义指令、表单验证、

路由操作、依赖注入、过滤器、内置服务、自定义服务、组件、模块

外链：Angular官方网站：http://angularjs.org

AngularJS应用中，对传统的HTML进行了扩展，增加并强化了HTML的功能，从入口属性ng-app(指令)

开始加载应用，并逐行编辑解释这些扩展的内容。AngularJS就是因为对传统的HTML进行了功能的扩展，

所以在一定程度上实现了软件开发过程中前后端的架构级别的分离——也就是软件前后端分离架构模型。

通常我们要用Angular框架写项目时，首先要引入angular.min.js(我通常用的就是这个版本，有异者可以到官网

下载别的版本)这个文件。

例如:

		<head>
    			<meta charset="UTF-8">
    			<title></title>
   			 <script src="js/AngularJS/angular.min.js"></script>
		</head>

二、Angular控制器(controller)

标准的用Angular框架写的页面如下

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
Mustache:{{name}}**--{{param}}--**
ng-bind: <span ng-bind="name"></span>
</div>
<hr>
<div ng-controller="myCtrl2">
Mustache:{{name}}**--{{param}}--**
ng-bind: <span ng-bind="name"></span>
<button ng-click="test()">clickMe test()</button>
<button ng-click="testFn()">clickMe testFn()</button>
</div>
</body>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.name = "jerry";
});
app.controller("myCtrl2", function($scope) {
$scope.name = "tom";
$scope.testFn = function() {
alert("用户点击了按钮...");
}
});
/* 常规定义的普通变量和函数 */
var param = "hello!";
function test() {
alert("用户点击......");
}
</script>
</html>

AngularJS的核心之一就是控制器部分，主要对于视图中的数据和事件处理函数进行挂载，同时进行一定的业务功能的

底层封装和处理

控制器在AngularJS中的作用

通过$scope进行数据状态的初始化操作

通过$scope进行事件处理函数的挂载操作

注意：不要使用控制器做下面的事情

DOM操作：使用AngularJS中的数据双向绑定和自定义指令执行操作

表单处理：使用Angular中的form controls进行操作

数据格式化展示：使用Angular中的过滤器Filter来进行操作

不同控制器之间的数据共享：使用Angular中的自定义服务Service进行处理

组件生命周期的操作：使用Angular中的自定义服务Service进行处理

代码：控制器语法结构

var app = angular.module(“myApp”, []);

app.controller(“myCtrl”, function($scope) {

// 控制器函数操作部分

// 控制器主要进行数据的初始化操作和事件函数的定义

});

控制器中的参数$scope，这个参数不需要赋值，angular会自动给$scope参数传递一个数据进行使用

三、Angular常见的内置指令（directive）

指令：就是扩展了HTML的基本功能，通过额外的标签、属性来增强HTML功能
Angular的指令在页面中体现出来就是一个标签\属性\class名称\注释等等

常见指令，按照指令的功能，划分为五大类
1.控制指令，用于Angular应用程序加载流程控制
2.渲染指令，用于Angular将数据在网页中进行展示/隐藏处理
3.节点指令，用于Angular对标签、属性、样式、内容进行处理的指令、
4.事件指令，用于处理常规事件操作的指令
5.其他指令....

控制指令：
> ng-app
用于定义Angular应用入口的指令，用于[自动引导]Angular程序的运行
在定义应用程序运行入口的同时，可以绑定一个DOM元素
DOM元素的开始标签和结束标签之间~就可以认为是模块的作用范围
Angular通过ng-app指令，实现自动引导程序运行，底层是通过
bootstrap()进行模块DOM元素加载，开始运行！

> ng-controller
模块中，可以给模块挂载一个或者多个控制器
挂载好的控制器在当前模块范围内，可以通过ng-controller指令来指定控制器的作用范围

渲染指令：
指令的作用就是将数据，渲染展示到页面上【底层是封装了DOM操作】
>ng-repeat 循环渲染指令

属性直接写在要循环的标签上
>ng-bind 变量渲染指令，mustache语法的替代写法

这个指令，类似于原生JS的innerHTML

但是使用的时候一定要慎重，对于它修饰的内容，必须确保安全性
如果内容的来源不确定，不要使用编译html标签的属性或者函数>>>XSS攻击

节点指令：主要用于标签、样式、属性、内容的操作

>ng-switch 请参考 js中的switch-case
ng-switch **> switch()
ng-switch-when **> case:
ng-switch-default **> default
>ng-show VS ng-hide 用于显示或者隐藏元素的指令
>ng-if指令：用于判断输出
>ng-if指令，会将DOM元素在DOM树上显示或者移除
>ng-class指令： {样式名称:布尔类型}

事件指令：Angular封装的用于操作事件的指令
通常是ng-[event]来命名指令，如ng-click表示单击事件
Angular中的事件处理，需要将处理函数挂载到对应控制器的$scope上

根据以上知识做了一个小页面（"购物车"计算小计金额、运费计算、实际金额计算、删除）

<!DOCTYPE html>
<html ng-app="shop">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="stylesheet" href="js/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="js/AngularJS/angular.min.js"></script>
<style>
input{
width: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="container" ng-controller="shopcart">
<div class="row">
<div class="page-header">
<h2>我的购物车</h2>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table table-hover table-striped">
<tr>
<th>编号</th>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计金额</th>
<th>操作</th>
</tr>
<tr ng-repeat="goods in goodses">
<td>{{goods.goodsID}}</td>
<td>{{goods.goodsName}}</td>
<td>{{goods.goodsPrice}}</td>
<td><input type="text" ng-model="goods.count"></td>
<td>￥{{goods.subtotal}}</td>
<td><a href="javascript:;" ng-click="del($index)">删除</a></td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-body text-right">
<span>总金额￥{{total}}</span>  |
<span>运费￥{{freight}}</span>  |
<span>实际金额￥{{actual}}</span>  |
<span><a href="javascript:;" ng-click="delall()">清空购物车</a></span>
</div>
</div>
</div>
</div>
</div>
<script>
var app=angular.module("shop",[]);
app.controller("shopcart",["$scope",function ($scope) {
$scope.goodses = [
{goodsID:1, goodsName:"商品A", goodsPrice:10, count:1, subtotal:10},
{goodsID:2, goodsName:"商品B", goodsPrice:10, count:1, subtotal:10},
{goodsID:3, goodsName:"商品C", goodsPrice:10, count:1, subtotal:10},
{goodsID:4, goodsName:"商品D", goodsPrice:10, count:1, subtotal:10},
{goodsID:5, goodsName:"商品E", goodsPrice:10, count:1, subtotal:10},
{goodsID:6, goodsName:"商品F", goodsPrice:10, count:1, subtotal:10},
{goodsID:7, goodsName:"商品G", goodsPrice:12, count:1, subtotal:12},
{goodsID:8, goodsName:"商品H", goodsPrice:10, count:1, subtotal:10},
{goodsID:9, goodsName:"商品I", goodsPrice:10, count:1, subtotal:10}
]

$scope.$watch("goodses",function () {
$scope.total=0;
$scope.freight=0;
$scope.actual=0;
for (var i=0;i<$scope.goodses.length;i++){
$scope.goodses[i].subtotal=$scope.goodses[i].goodsPrice*$scope.goodses[i].count; //小计金额
$scope.total+=$scope.goodses[i].subtotal; //总计金额
if ($scope.total<100){ //运费判断
$scope.freight=10;
}else if ($scope.total<200){
$scope.freight=20;
}else if ($scope.total<500){
$scope.freight=30;
}else {
$scope.freight=0;
}
$scope.actual=$scope.total+$scope.freight; //实际金额
}
},true);

$scope.del=function (index) {
$scope.goodses.splice(index,1);

}
$scope.delall=function () {
$scope.goodses=[];
}

}]);
</script>
</body>
</html>

生成的界面见上传的图片

请叫我龙仔c

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Angular入门、Angular控制器、Angular常见内置指令总结

Angular入门、Angular控制器、Angular常见内置指令总结首先我还是一名学生，现在在外培训HTML5这门技术，这几天刚学到Angular这块内容，个人感觉Angular这块学习内容挺多的，所以先把这几天学到的知识做个总结，以下我从三个方面做个总结。一、Angular入门简介：AngularJS是一个基于MVC处理模式，实现了MVV
复制链接

扫一扫