版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/k0mwak/article/details/78104439
1.angular是什么?
angularjs(简称ng)是一个用于设计动态web应用结构框架,是js的框架,它的核心是对HTML标签的增强.
动态web应用?
随着用户的操作而不断更新视图(html文件),而不会进行URL跳转
HTML标签的增强?
angular可以使用标签来实现页面一部分逻辑,具体方式:自定标签,自定义属性,这些在原生当中没有的属性和标签 称之为指令.
2.angular适用场景?
1) 数据量比较多的应用(除游戏,图像处理外)
2) 单手机页面应用(SAP)
2.1.angular不适用场景?
1)内容网站,需要seo
2)交互比较频繁的应用(游戏,图像处理等)
3)太过于简单的页面
3.angular核心
1)双向数据绑定
2)模板
3)MVVM
4)依赖注入
5)指令
4.为什么要使用angular?
1)前后端分离,后端只提供API,路由,模板等渲染都在前端完成
2)HTML与js分离,展示与逻辑分开
3)减少js代码,减少DOM操作
4)适合API开发
基本使用
1.表达式
<div>
<span>表达式:{{1+100}}</span>
</div>
<!--两个变量相加-->
<div ng-init="a=12;b=13">
<p>{{a+b}}</p>
</div>
<!--等价于:
<div ng-init="a=15;b=16">
<p ng-bind='a+b'></p>
</div>
-->
<!--变量是对象-->
<div ng-init='s={name:"张三",age:27}'>
{{s.name}} {{s.age}}
</div>
{{s['name']}}
<!--变量是数组-->
<p ng-init='arr=[1,2,3,4,5]'>
{{arr[0]}}
</p>
注意:在实际项目当中,一般不采用ng-init来初始化数据,主要用过控制器来完成数据的初始化.
2.控制器
// 1.定义一个模块
var app = angular.module('myapp',[]);
/* 参数说明:
第一个参数:字符串类型,模块名字
第二个参数[]:表示字符串数组,表示的该模块依赖其它模块的一个列表,如果不依赖其它模块,则为空数组
*/
//第一种:推断式写法
app.controller('my',function ($scope) {
// 定义变量
$scope.name = "张三";
$scope.age="27";
$scope.fn = function () {
$scope.age="270";
}
});
// 第二中控制器写法
app.controller('my1',['$scope',function ($scope) {
$scope.str = "hello world";
}]);
/*
解释:第一种方式省略数组,
app.controller('my',function ($scope)
省略模块声明,让angular自己根据函数的参数寻找
第二个方式:带数组,
app.controller('my1',['$scope',function ($scope)
告诉angular需要(依赖)哪些模块实现功能,然后angular就会根据模块去查找,交给我们用,这个过程称之为注入.
*/
3.指令介绍
普通指令:
1.ng-app 定义应用程序的范围
2.ng-init 应用数据的初始化
3.ng-bind 把数据绑定到元素中显示
4.ng-model 与表单元素结合使用
5.ng-bind-html
6.ng-controler
7.ng-class
8.ng-bind-templete
9.ng-class-even
10.ng-class-odd
11.ng-style
12.ng-repeate
13.ng-cloak
14.ng-if
15.ng-switch
16.ng-src
17.ng-href
18.ng-list
事件指令:
ng-click
ng-dbl-click
ng-show
ng-hide
ng-mouseover
ng-mouseout
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
键盘事件:
ng-keypress
ng-keydown
ng-keyup
表单事件:
ng-change
ng-submit
ng-blur
ng-checked
粘贴复制事件
ng-copy
ng-cut
ng-paste
3.1指令讲解
1.ng-app 标明应用程序的作用域,值是一个模块名 如:ng-app="模块名",一般写在html标签里面,只能写一次.
2.ng-model:用于表单标签,把输入的内容与ng-model中的变量绑定在一起,并且保存应用元素中(全局)
<hr>
<input type="text" ng-model='vv'>
<h1>{{vv}}</h1>
3.ng-init 应用程序数据的初始化
<div ng-init="a=100;b=100"></div>
{{a}}
<hr>
<input type="text" ng-model='d'>*
<input type="text" ng-model='f'>=
<input type="text" value="{{d*f}}">
4.ng-bind 绑定变量的值到元素中等价于{{}} 适用于除了(input,textarea,select)外的所有标签
<div ng-bind='122'></div>
<div ng-bind='{{122}}'></div>
<div ng-bind='true'></div>
<div ng-bind='false'></div>
<div ng-init='bb=1000' ng-bind='bb'></div>
<div ng-bind="'hhhhhh'"></div>
<!--注意:如果是纯数字,变量名,字符串,true或false直接写,不需要写在{{}}里面-->
<hr>
<h1>{{123}} {{345}}</h1>
5.ng-bind-template 绑定多个表达式值到标签里面
<h1 ng-bind-template='{{123}} {{345}}'></h1>
<h1 ng-bind='{{123}}{{345}}'></h1>
<div ng-controller='my'>
<p ng-bind='str'></p>
<p ng-bind-html='str'></p>
</div>
6.ng-bind-html 绑定html内容到标签中,且把html内容解析后的结果显示在标签中
<hr>
<script>
var app = angular.module('myapp',['ngSanitize']);
app.controller('my',['$scope',function ($scope) {
$scope.str = "hello<h1>world</h1>";
}]);
</script>
<ul>
<!--数组的遍历语法:ng-repeat='i in arr'中i表示的是数组元素值-->
<li ng-repeat='i in arr'>
{{i}}
</li>
</ul>
<!--对象的遍历语法:ng-repeat='(key,value) in obj'-->
<ul>
<li ng-repeat='(k,v) in obj1'>
{{k+'==='+v}}
</li>
</ul>
<ul>
<li ng-repeat='i in obj.info'>
<div>{{i.name}}</div>
<h2>{{i.age}}</h2>
</li>
</ul>
<script>
var app = angular.module('myAPP',[]);
app.controller('my',['$scope',function ($scope) {
$scope.arr = [1,2,3,4,5,6,7];
$scope.obj = {info:[
{name:'战三',age:23},
{name:'李四',age:26},
{name:'王五',age:43},
{name:'王六',age:73}]};
$scope.obj1 = {A:222,B:333,C:444};
}]);
</script>
4.购物车案例分析
<!--{name:"青苹果味美年达",num:"15",price:"3"},-->
<table class="table table-condensed table table-hover">
<tr>
<th>商品名称</th>
<th>数量</th>
<th>价格</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr ng-repeat='v in list'>
<td>{{v.name}}</td>
<td>
<input type="button" value='+' class="btn btn-primary" ng-click = 'add(v)'>
<input type="text" ng-model='v.num' >
<input type="button" value='-' class="btn btn-primary" ng-click="sub(v)">
</td>
<td>{{v.price|currency}}</td>
<td>{{v.num*v.price|currency}}</td>
<td>
<input type='button' ng-click='re(v)' value="删除"/>
</td>
</tr>
</table>
<script>
var app = angular.module('app',[]);
app.controller('my',['$scope',function ($scope) {
$scope.list=[
{name:"青苹果味美年达",num:"15",price:"3"},
{name:"和路雪雪糕",num:"10",price:"4"},
{name:"卫龙辣条超值装",num:"10",price:"4"},
{name:"经典椰汁",num:"3",price:"15"},
{name:"原味牛奶",num:"15",price:"2"}
];
$scope.add = function (item) {
var ins = $scope.list.indexOf(item);
$scope.list[ins].num++;
}
$scope.sub = function (item) {
var ins = $scope.list.indexOf(item);
$scope.list[ins].num--;
}
$scope.re = function (item) {
var ins = $scope.list.indexOf(item);
$scope.list.splice(ins,1);
}
}]);
</script>