AngularJS框架

来源：互联网发布：有没有5g网络编辑：程序博客网时间：2024/05/22 06:34

一、下载安装

https://angularjs.org/

1.6.2版本zip

二、核心特性

1.MVC

核心概念：数据的管理（Model）、数据的展示（View）、业务逻辑控制（Controller）

2.双向数据绑定（MVVM）

Augular实现了双向绑定机制。所谓的双向绑定，是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。

3.模块化与依赖注入

AngularJS模块是一种容器，把代码隔离并组织成简洁，整齐，可复用的块。可通过定义起提供的对象构建模块。通过依赖注入将模块连接在一起，构建一个完整的应用程序。

依赖注入：定义依赖对象并动态地把它注入另一个对象，使得所有的依赖对象所提供的功能都能上使用。

4.指令

指令可以用来创建自定义的标签。它们可以用来装饰元素或者DOM属性。

三、数据绑定

1.ng-app

ng-app指令是告诉AngularJS应该管理页面中的哪一块，简单来讲就是指的是AngularJS的作用域。

ng-app是定义在HTML标签的属性上面，该属性的值可以为空。

AngularJS使用双大括号{{}}语法进行数据绑定。

2.ng-init

ng-init初始化当前作用域中的模型的值。

3.ng-model

ng-model指令绑定了HTML表单元素到数据模型中。

四、模块和控制器

1.模块的创建

语法：angular.module(“app”,[]);

参数说明：

1.name（字符串）

name是模块的名称，字符串变量。

2.requires（字符串数组）

requires包含了一个字符串变量组成的列表，每个元素都是一个模块名称，本模块依赖于这些模块，依赖需要在本模块加载由注入器进行预加载。

<body>
<div>{{1+2}}</div>
</body>
<script>
angular.module("app",[]);
</script>

2.控制器

<body ng-controller="ctrl">
    <h1>{{name}}</h1>
</body>
<script>
    var myApp = angular.module("app",[]);
    myApp.controller("ctrl",["$scope",function($scope) {
        $scope.name= "xx";
    }])
</script>

function里面的名称可以和服务器名称不一致，但是通常使用一致的。

3.常用指令

1.ng-repeat

ng-repeat指令用于循环输出制定次数的HTML元素，集合必须是数组或对象。

方式1：item in list

方式2：（key,value） inlist

循环内容为实体里的字段，key为字段名，value为字段的值

$index 循环的索引

$first 第一项

$last 最后一项

$middle 中间项

$odd 奇数项

$even 偶数项

2.ng-class

ng-class指令用于给HTML元素动态绑定一个或多个CSS类。

值可以是字符串，对象，数组。

如果是字符串，多个类名使用空格分隔；

如果是对象，需要使用key-value的方式，key为你想要添加的类名，value是一个布尔值，只有在value为true时类才会被添加；

如果是数组，可以由字符串或者对象组合组成，数组的元素可以是字符串或对象。

3.ng-click

ng-click指令告诉了AngularJS HTML元素被点击后需要执行的操作。

值除了可以填写表达式以外，还可以填写方法，该方法需要在控制器里面定义。

<!DOCTYPEhtml>
<htmlng-app="app">
<headlang="en">
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <title></title>
    <linkrel="stylesheet"href="bootstrap.min.css">
    <scriptsrc="angular.js"></script>
</head>
<bodyng-controller="ctrl">
    <divclass="container">
        <divclass="btn btn-primary"ng-click="temp=!temp">
            点击
        </div>
        <hr>
        <h1ng-class="{'bg-primary':temp,'bg-danger':!temp}">
            中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，
            通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
        </h1>
    </div>
</body>
<script>
    var myApp = angular.module("app", []);
    myApp.controller("ctrl", ["$scope",function ($scope) {
        $scope.temp = true;
    }])
</script>
</html>

五、元素的显示和隐藏

1.ng-show和ng-hide

ng-show指令在表达式为true时显示制定的HTML元素，否则隐藏指定的HTML元素。

ng-hide功能相似，使用方式相反。指令在表达式为true时隐藏制定的HTML元素，否则显示指定的HTML元素。

元素的显示或隐藏是通过改变CSS的display属性值来实现的。

<!DOCTYPEhtml>
<htmlng-app="app">
<headlang="en">
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <title></title>
    <linkrel="stylesheet"href="bootstrap.css">
    <scriptsrc="angular.js"></script>
</head>
<bodyng-controller="ctrl">
    <divclass="container">
        <ulclass="nav nav-tabs">
            <ling-class="{'active':tabType==1}"><ahref="#" ng-click="tabType=1">选项卡一</a></li>
            <ling-class="{'active':tabType==2}"><ahref="#" ng-click="tabType=2">选项卡二</a></li>
            <ling-class="{'active':tabType==3}"><ahref="#" ng-click="tabType=3">选项卡三</a></li>
        </ul>
        <div>
            <divng-show="tabType==1">内容一</div>
            <divng-show="tabType==2">内容二</div>
            <divng-show="tabType==3">内容三</div>
        </div>
    </div>
</body>
<script>
    var myApp = angular.module("app", []);
    myApp.controller("ctrl", ["$scope",function ($scope) {
        $scope.tabType = 1;
    }])
</script>
</html>

2.ng-if

ng-if指令用于在表达式为false时移除HTML元素。

如果if语句执行的结果为true，会添加移除元素，并显示。

ng-if指令不同于ng-hide，ng-hide隐藏元素，ng-if是从DOM中移除元素。

<body ng-controller="ctrl">
<h1 ng-if="check">这是一个要判断的标签</h1>
<span class="btn btn-primary"ng-click="check=!check">点击隐藏/显示</span>
</body>

3.ng-switch

ng-switch指令根据表达式显示或隐藏对应的部分。根据选中的值显示对应部分：

对应的子元素使用ng-switch-when指令，如果匹配选中选择显示，其他为匹配的则移除。

可以通过使用ng-switch-default指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

六、不同控制器的数据共享

1.子父级的控制器

1.子controller/$scope可以继承父controller的$scope对象。

2.子controller的$scope的同名字段会替换掉父容器的同名字段。

3.父级controller里定义一个方法，操作父级的scope对象，在子级controller里调用该方法，实现了子父通讯。

<body ng-controller="ctrl">
    <h1>父级的标题-{{myTitle}}</h1>
    <span class="btn btn-primary"ng-click="changeTitle()">点击切换标题</span>
    <div ng-controller="innerCtrl">
        <h1>子级的标题-{{myTitle}}</h1>
        <span class="btn btn-primary"ng-click="changeTitle()">点击切换标题</span>
    </div>
</body>
<script>
    var myApp = angular.module("app", []);
    myApp.controller("ctrl",["$scope",function($scope) {
        $scope.myTitle= "父级的标题";
        $scope.changeTitle= function () {
            $scope.myTitle = "父级的标题2";
        }
    }]);
    myApp.controller("innerCtrl",["$scope",function($scope) {
        $scope.myTitle= "子级的标题";
        $scope.changeTitle= function () {
            $scope.myTitle = "子级的标题2";
        }
    }])
</script>

2.$rootScope

scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中的桥梁，用rootscope定义的值，可以在各个controller中使用。

$rootScope是由angularjs加载模块的时候自动创建的，每个模块只会有1个rootScope。

<!DOCTYPEhtml>
<htmlng-app="app">
<headlang="en">
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <title></title>
    <linkrel="stylesheet"href="bootstrap.css">
    <scriptsrc="angular.js"></script>
</head>
<body>
    <divng-controller="ctrl">
        <h1>{{title}}</h1>
        <h1>{{contents}}</h1>
    </div>
    <divng-controller="ctrl1">
        <h1>{{title}}</h1>
        <h1>{{contents}}</h1>
    </div>
</body>
<script>
    var myApp = angular.module("app", []);
    myApp.controller("ctrl", ["$scope", "$rootScope",function($scope,$rootScope){
        $scope.title = "控制器一";
        $rootScope.contents = "写在rootscope里面的内容";
    }]);
    myApp.controller("ctrl1", ["$scope",function ($scope) {

    }])
</script>
</html>

七、$watch和$apply

1.$watch

$watch是一个scope的函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

$watch参数（watchExpression，listener，objectEquality）

watchExpression：监听的对象，它可以是一个angular表达式如“name”，或函数如function(){return $scope.name}

listener：当watchExpression变化时会被调用的函数或者表达式，它接受3个参数：newValue（新值），oldValue（旧值），scope（作用域的引用）

objectEquality：是否深度监听，如果设置为true，它告诉angular检查所监控的对象中每一个属性的变化，如果你希望监控数组的个别元素或者对象属性而不是一个普通的值，那么你应该使用它。

2.$apply

angularJS中提供$watch方法监听module变化$和apply方法传播Modeld的变化。

阅读全文

0 0