Angularjs快速入门

最新推荐文章于 2025-07-01 13:25:01 发布

cfcp

最新推荐文章于 2025-07-01 13:25:01 发布

阅读量630

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 学习笔记文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/qq_33562825/article/details/58591901

学习笔记同时被 2 个专栏收录

13 篇文章

订阅专栏

javascript

12 篇文章

订阅专栏

本文介绍了 AngularJS 的核心概念 mvvm 思想及其双向绑定特性，并通过实例演示了如何利用模块和控制器来组织大型应用。

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

Angularjs快速入门方法

 在网上看到很多关于angularjs的文档都说的比较官方，所以按照自己的理解，写了这样一篇文章，也许我只是看到了angular的表面，但我觉得够用了，剩下更深层的东西还是等自己技术很牛的时候再深究吧

学习angular首先要理解mvvm思想，这个思想的核心就是双向绑定，双向指的是view和viewmodel,至于view很好理解，就是我们在界面上看到的，viewmodel我们可以把它当做隐藏在angular后面的一个神秘对象，当你在页面中增加一个ng-app属性的时候，这个对象也就存在了，而且这个对象所在作用域的名字叫$rootscope,root是根的意思，听名字也能体会的到，就好比html标签一样。好吧扯远了，我们再回到双向绑定这个概念上来，它将贯穿整个angular,最通俗的理解就是界面上数据发生变化，背后神秘对象viewmodel的数据也相应同步，而且viewmodel改变后为了确认页面中还有没有和它同名的东西没改变值还要重新去页面（view）上搜索一遍，一旦发现，马上同步

<body ng-app>
    <input type="text" ng-model='txt'>
    <div>{{txt}}</div>
</body>

{{}}是angular中的独有语法，称为插值语法，相当于模板求值，该语法中放置angular表达式，会将表达式的值显示在该区域，如果这个区域使用了名字，首先我们需要了解该标签属于哪一个viewmodel，然后根据名字，在显示的时候，就会到对应的viewmodel中取该名字的数据（如果不存在则不显示也不会报错）

模块（module）

    在angular中不要将所有的数据都挂载到全局viewmodel中，就像我们上面那样，上面只是我们平时做demo的时候可以，但是angular是用来做一些大型项目的，这时我们要将数据按照功能进行分块（也就是模块化）。

在angular中，我们使用模块的方式划分结构，在模块中又使用控制器来划分功能，一个ng-app相当于一个模块，如果想要操作模块的话，就需要手动创建模块。
在上面的案例中我们没有在script标签中编写任意的代码就可以实现双向数据绑定，是因为当我们不给ng-app附上一个名字时，angular会提供默认的模块，这个模块我们无法访问。
如果需要实现一些复杂的功能就需要手动创建模块

1>在指定ng-app的时候需要一个名字（遵循js变量的命名规则）,一旦写了名字系统就不再提个默认的模块了
2>创建模块的语法
3>利用模块创建该模块下的控制器
语法：<模块对象>.controller(‘控制器的名字’，function($scope){ //控制器的代码 })

此时就相当于在全局模块中创建了一个控制器，含义相当于在$rootscope下创建了一个$sope
实际开发中，应尽量少操作$rootscope,应该使用控制器创建其他的$scope,将需要的数据利用该$scope来处理，这个$scope也是viewmodel。

相比较传统的mvc而言，angular的控制器不是处理数据交互的功能，而是实现划分的功能，以及初始化viewmodel的功能，控制器是用来划分功能的，划分以后html还没有划分，在html标签中使用ng-controller属性用于与控制器绑定，控制器可以实现数据的初始化。

下面是关于多模块绑定的一个小demo

<body ng-app="mainApp">

    <div ng-controller="controller1">
        <input type="text" ng-model="txt"><br />


        <input type="text" ng-model="txt"><br />
    </div>


    <hr>


    <div ng-controller="controller2">
        <input type="text" ng-model="txt"><br />


        <input type="text" ng-model="txt"><br />
    </div>


</body>
<script>
    angular.module( 'mainApp.subApp1', [] )
        .controller( 'controller1', function ( $scope ) {
        });
    angular.module( 'mainApp.subApp2', [] )
        .controller( 'controller2', function ( $scope ) {
        });

    angular.module( 'mainApp', [ 'mainApp.subApp1', 'mainApp.subApp2' ] );
</script>