AngularJS学习（一）

最新推荐文章于 2025-02-20 22:56:07 发布

HNAer_RadAsm

最新推荐文章于 2025-02-20 22:56:07 发布

阅读量575

点赞数

CC 4.0 BY-SA版权

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/HNAer_RadAsm/article/details/46448745

angularjs 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了AngularJS的基础使用方法，包括如何引入库文件、MVC模式的应用及常用API的使用技巧，如ng-app、ng-model、ng-bind等指令的含义与应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、angularJS简介

1、使用angularJS可以方便的进行dom元素的操作，而不需要进行一些较为复杂的监听类事件的注册·

2、使用方法：

其一：本地引用js文件：注意相对路径的书写就行了。

<script src="../js/angular.min.js"></script>

其二：使用内容分发网络（CDN）进行加载类库。

官方的类库地址是<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>，但是貌似不翻墙上不了。

二、MVC模式的使用

1、angularJS使用mvc的思想进行设计，使用module进行模型的绑定，在视图层上进行展示，使用controller进行DOM元素的控制。

2、api的展示：

2.1、`ng-app`

<html ng-app>：整个html页面的所有dom元素都会被angularJS“控制”。

2.2、`ng-module`

<input ng-model="query">表明这个input输入框中的内容和一个叫“query”的module进行“双向绑定”，所谓双向绑定，是指“dom元素的变化会引起代码中绑定的module的变化，同时，代码控制的module的变化也会引起展示层dom元素的变化”。

2.3、`ng-bind`

<h5 ng-bind="result"></h5>这种绑定只是代码中module的变化会引起dom元素的变化，但是这种变化只有人为（代码）的进行控制，才会展示出来。譬如下面：

>
<input ng-model="first"> <input ng-model="second"> <hr/> <h5 ng-bind="result"></h5> <button ng-click="cala()">ee</button> </body>

赋予了点击事件的一个button，点击的时候进行cala计算，将结果赋给$scope.result，而这里将result和input标签进行绑定，既可以进行展示。和ng-module相较而言，ng-bind更加注重一种数据的被动展示性，而ng-module则注重实时更新的特性。

2.4、`ng-controller`

<body ng-app="app" ng-controller="Controller">表明整个<body>中的dom将由“controller”这个控制器进行控制。
标准的使用控制器的方法有两种：

1、

function PhoneListCtrl($scope) { 

        $scope.phones = [ 

            {"name": "Nexus S", 

                "snippet": "Fast just got faster with Nexus S.", 

                "age": 0}, 

            {"name": "Motorola XOOM™ with Wi-Fi", 

                "snippet": "The Next, Next Generation tablet.", 

                "age": 1}, 

            {"name": "MOTOROLA XOOM™", 

                "snippet": "The Next, Next Generation tablet.", 

                "age": 2} 

        ]; 

        $scope.orderProp = 'age'; 

    }

在这个controller中，定义了“phones”这个数组，“orderProp”这个字符串常量。
2、

var app=angular.module('app',[]); 

        app.controller('Controller',function($scope){ 

            $scope.cala=function(){ 

                $scope.hehe='hihihi'; 

                var a=parseInt($scope.first,10); 

                var b=parseInt($scope.second,10); 

                $scope.result=a+b; 

                window.alert("sorry,you are wrong!") 

            } 

        });

这里先定义一个module是“app”，这样定义的好处是：可以反复使用，在不同的<div>或者其他的需要使用这个module的标签中使用。继而在这个module上面定义一个controller控制器。需要注意的是，这样定义的话，module和controller就分离了，比放在一个<body>上定义一个controller，需要这样说明定义：
<body ng-app="app" ng-controller="Controller">

2.5、`ng-change`

当数据发生改变的时候，会触发这个ng-change所指示的函数的运行
app.controller('StartUpController',function($scope){
            $scope.start={hehe:0};
            $scope.jisuan=function(){
                $scope.start.haha=$scope.start.hehe*10;
            }
        });
其中：dom元素是这样书写的：
<form ng-controller="StartUpController"> <input ng-change="jisuan()" ng-model="start.hehe"> <hr /> result:{{start.haha}} </form>

事实上，这种ng-change的也可以这样来做：
使用$scope.$watch进行监控，类似于注册的一个监听器。