angular（使用Angular&指令）
曾晨
一、设计模式
所谓的设计模式就是一套被反复使用的，多数人知道的，经过分类编写的，代码设计经验的总结，使用设计模式可以提高代码的重用性和可读性。
1、设计模式分类
单例模式、代理模式、观察者模式、MVC模式
2、mvc
m-模型，model，可以看出js中变量、对象
v-视图，view，用于展示数据的视图，dom元素
c-控制器，controller，用于处理m和v之间的交互，类似于js中的函数
mvc的核心理念：把管理数据的代码（model）、应用逻辑代码（c）、向用户展示的数据代码（v）分离出来
二、单页面应用
1、概念
将所有功能都局限于一个web页面，在该页面初始化时加载相应的html文件、js和css，一旦页面加载完成，页面将不会随着用户的操作而去加载页面；而是使用js动态的改变html内容；单页面应用可以提高用户体验
2、优缺点
1）优点
-用户体验好
-前后端工作分离
-减轻服务端压力
-可以多端共用一套代码
2）缺点
-搜索引擎难度较高
-无法使用前进后退
-初次加载耗时较长
三、AngularJS
1、概念
AngularJS是一个js框架，遵循MVC设计模式，实现了视图、数据、逻辑组件间的松耦合
-高内聚低耦合：内聚就是一个模块独立性比较强，对外界的依赖比较少；耦合指的是容易受外界影响
2、Angularjs版本
-1.x
-2.x 16年9月
-4.x 17年3月
3、使用Angular
首先引入Angularjs的文件，然后在指定元素添加指令ng-app="xx"；
3、指令
指令是扩展的html属性，带有前缀ng-，在h5中，允许扩展自己的属性，需要以data-开头；所在html5中可以使用data-ng-开头
1）内置指令
-ng-app
初始化一个AngularJS应用程序，告诉系统，该元素是Angular应用的拥有者，可以理解为js中的作用域
-ng-init
初始化应用程序数据，通常不建议使用，一般会选择使用控制器或模块
-ng-model
双向数据绑定，帮元素绑定到应用程序，当元素中的值发生改变或使用js改变变量值，都会相互通知;
一般用在表单元素上
-ng-bind
单向数据绑定
把参数绑定到html元素上
-ng-repeat
用于循环创建元素
语法：
在需要循环创建的元素上添加属性：ng-repeat=“变量 in 数组” 变量是数组中的元素，可以使用ng-bind或表达式进行值得显示
-ng-class
用来给元素绑定雷鸣，其指令表达式的返回值可以为
使用控制器中的变量
通过键值对方式绑定
-ng-style
用于设定元素的css样式
-ng-show
元素是否显示，取值为布尔值,通过修改display的值，来控制显示或不显示
-ng-if
元素是否显示，取值为布尔值，根据值，决定元素是否添加到页面中
-ng-hide
作用于ng-show类似
-ng-switch
根据一个值来决定哪个节点显示，其他节点会被移除，对应的子元素使用ng-switch-when，还可以通过ng-switch-default指令设置默认选项，如果没有匹配的，则会使用default
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="angular.min.js"></script>
<style>
table,td{
border: 1px solid black;
}
td{
width: 100px;
}
.class1{
border: 1px solid red;
height: 100px;
background-color: blue;
}
.class2{
color: red;
}
.class3{
font-size: 30px;
}
</style>
</head>
<body ng-app="myApp" ng-init="arr=['abc','bcs','wed','dew']" ng-controller="myVC">
<ul>
<li ng-repeat = "value in arr" ng-bind="value"></li>
</ul>
<div ng-init="persons = [{name:'张三',age:10,sex:'男'},
{name:'李四',age:14,sex:'女'},
{name:'王五',age:20,sex:'未知'}]">
<table>
<tr ng-repeat="obj in persons">
<td ng-bind="obj.name"></td>
<td ng-bind = "obj.age"></td>
<td ng-bind="obj.sex"></td>
</tr>
</table>
</div>
<div class = "{{className}}"></div>
<div ng-class="{true:'class2',false:'class3'}[isHave]">123123</div>
<div ng-style="{color:'blue'}">这是一个div</div>
<div ng-style="styleObj">qwwqqw</div>
<div ng-show="false">123123</div>
<div ng-if="false">www</div>
<div>
<input type="text" ng-model="index">
<ul ng-switch on ="index">
<li ng-switch-when="1">123</li>
<li ng-switch-when="2">abc</li>
<li ng-switch-when="3">kkk</li>
<li ng-switch-default>默认</li>
</ul>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller("myVC",function($scope){
$scope.className = "class1";
$scope.isHave = false;
$scope.styleObj = {
"font-size":"30px"
}
})
</script>
</body>
</html>
类似资料：