angularJS学习感想

最新推荐文章于 2021-05-20 14:49:13 发布

IT技术研究院

最新推荐文章于 2021-05-20 14:49:13 发布

阅读量375

点赞数

本文链接：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>