AngularJS快速入门2--基础语法

来源：互联网发布：网络诈骗按照什么罪编辑：程序博客网时间：2024/06/08 02:25

基础语法结构

*1.*ng-app
Angular应用运行的入口指令。当网页中引入Angular后，程序运行时会自动查找ng-app指令，并从这个入口开始加载编译并解释执行。

**代码：**通常，页面中会定义ng-app来指定入口，并在script中通过angular的module来加载ng-app指定的模块。    <html ng-app="myapp">    <script>        angular.module("myapp",[]);    </script>    </html>**!代码：**某些特殊情况下，也可以通过脚本来动态控制加载启动Angular应用，通过angular.bootstrap（dom，module）来启动应用。    <html>        <div id="myDiv"></div>        <script>            angular.module("myApp",[]);            var _div=document.getElementById("myDiv");            angular.bootstrap(_div,"myApp");                </script>    </html>

*2.*angular.module()
Angular是通过模块来管理我们前端项目中的数据的。模块在应用启动时就需要加载，所以Angular在设计的过程中对于入口指令进行了改造，可以绑定一个值，这个值就是系统的主模块。

var app=angular.module（"",[]）   注：双引号里是通过ng-app的属性值指定的模块名称。

*3.*ng-init,用于在程序运行的过程中，初始化一些变量的数据的操作（不推荐）。

*4.*ng-model=”“，数据绑定的指令，主要用于表单元素上的数据绑定。

*5.*mustache，就是双大括号–{ { } }，用于输出变量的数据、进行数据的运算等。但网页如果加载缓慢，会出现直接将大括号打印到页面上的问题，所以通常开发项目时。使用ng-bind来代替。

*6.*ng-bind,数据绑定的指令，用于将变量的数据显示到页面上，用于替代mustache语法。

*7.*ng-controller,控制器指令，用于在页面上指定控制器作用范围，通常作为属性出现。

*8.*ng-[event]，时间指令，用于在页面中发生某些事件时调用指令的函数。

重点：

$scope作用域：

    `$scope`是放在控制器函数中的一个参数。不需要传值，而是angular自动赋值。在操作的过程中`$scope`相当于一个容器，可以在它上面声明变量或函数，`$scope`上的变量和函数会自动和视图页面中的变量进行绑定，称为`$scope`挂载函数。

$rootScope作用域：

    `$rootScope`是AngularJS的根作用域，也是全局作用域，放在控制器函数中的一个参数，不需要传值，Angular会自动赋值，挂载在`$rootScope`上的数据，会被Angular应用中的所有模块下的子模块和控制器公用。但是存在一个问题: 因为控制器函数中可以直接使用$rootScope，就有可能会造成全局数据污染    使用规范：$rootScope一般和Angular模块的run()方法一起使用。来进行全局数据的初始化

$scope.$watch():挂载在$scope上，用于监听模型数据的变化。

     1. 监听单个普通变量：

    $scope$watch（"one"，function（）{TODO one变量的数据发生变化执行的函数代码}）；

     2. 监听多个普通变量：

    $scope$watch（"one+two"，function（）{TODO one或two变量的数据发生变化执行的函数代码}）；

     3. 监听对象的数据：

$scope$watch（"users.username"，function（）{TODO usres对象中的username属性一旦发生变化执行的函数代码}）；

    4. 监听对象的所有属性：

    $scope$watch（"users"，function（）{TODO 监听users对象的所有属性，任一属性值发生变化执行函数代码},true）；

     5. 监听数组数据，而不监听数组中的对象数据：

    $scope$watch（"某数组"，function（）{TODO 一旦goodses数组中的元素，被删除、添加时执行函数的代码}）；

     6. 监听数据发生变化的细节：修改前 VS 修改后：

    $scope$watch（"username"，function（newValue，oldValue）{console.log("数据被修改了", newValue, oldValue);}）；

      7. `$watch`可以重复，不会被覆盖，都会执行！

    $scope$watch（"username"，function（newValue，oldValue）{console.log("data changed:", newValue, oldValue);}）；

Angular事件处理：

    AngularJS中的事件操作，由于它自己虚拟DOM结构所以不支持普通事件，通常通过它自己的事件指令来调用通过$scope挂在到控制器中的函数执行完成，事件指令其实就是对于常见事件的封装，以ng-开头，加上事件名称即可，如鼠标单击事件ng-click。

0 0