一款优秀的前端框架——AngularJS

最新推荐文章于 2021-06-16 14:13:00 发布

zhuguou4898

最新推荐文章于 2021-06-16 14:13:00 发布

阅读量383

点赞数

本文链接：https://blog.csdn.net/zhuguou4898/article/details/78228676

版权

　1、Model(模型层)：应用程序中用于处理数据的部分，(包括将数据保存或者修改到数据库、变量、文件中)。
　　　　　在AngularJS中，Model特指的是：应用程序中的各种数据。

　　2、View(视图层)：用户可以看到的用户显示数据的页面。

　　3、Controller(控制器):控制器是连接View和Model的桥梁，负责从View读取数据，接受用户的操作输入；并将数据发送给Model层。
　　　　Model层对数据处理完毕后，将结果返回给Controller，Controller再将结果返回给View层显示。
　　

3.2AngularJS中的模块化开发和依赖注入

3.2.1模块

创建一个angular的模块。即ng-app=""所需要绑定的部分。需要接受两个参数：
　　①模块名称。即ng-app双引号中需要绑定的名字。

<body ng-app="myapp">

　　②数组。表示需要注入的模块名称，不需要注入其他模块可用空数组代替。

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

　　>>>Angular将常用的功能封装到Angular.js，创建主模块时直接可以使用，无需注入。
　　>>> 而一些应用较少的功能，需要导入对应的JS文件，并且在[]中注入进这个模块，才能够使用。
　　这就是AngularJS中的【模块化开发】与【依赖注入】！

3.2.2控制器

在AngularJS的模块上，创建一个控制器，需要传入两个参数：
　　①控制器名称:即ng-controller需要绑定的名称。

<div ng-controller="myCtrl">

　　②控制器的构造函数，构造函数可以传入多个参数。
　　　　>>>如果要在函数中要使用系统的内置对象，则必须通过函数的参数传入，否则不能使用。
　　　　>>>AngularJS中的内置对象，都用$ 开头，例如$scope,$rootScope

3.3AngularJS中的作用域

　　① $scope局部作用域，声明在$scope上的属性和方法。只能在当前controller使用；
　　② $rootScope 根作用域。声明在$rootScope上的属性和方法，可以在整个ng-app所包含的范围使用。
　　>>>如果没有使用$scope声明变量，而是直接使用ng-model在HTML标签中绑定的数据的作用域为：
　　1、如果 ng-model写在某个controller中，则这个变量会默认绑定到当前的controller的$scope上。
　　2、如果ng-model没有写在任何一个controller中，则这个变量会默认绑定到$rootScope 上。

　　>>>AngularJS中的父子作用域
　　1、AngularJS中，子作用域只能访问父作用域中的变量，而不能修改父作用域的变量。
　　2、为了解决上述问题，可以将父作用域中的变量声明为引用数据类型，例如对象等。
　　这样可以在子作用域中，直接修改对象的属性，而不需要修改对象本身保存的地址。

<body ng-app="myApp">
        <input type="text" ng-model="age" placeholder="age" />
        
        <div ng-controller="myCtrl">
            <input type="text" ng-model="name" placeholder="name" />
            <div ng-bind="name+'-----myCtrl的name'"></div>
            <div ng-bind="age+'-----myCtrl的age'"></div>
        </div>
        
        <div ng-controller="myCtrl1">
            <div ng-bind="name+ '----myCtrl1的name'"></div>
            <div ng-bind="age+'-----myCtrl1的age'"></div>
            
            <input type="text" ng-model="test" />
            <input type="text" ng-model="obj.test" />
            <mark ng-bind="test+'myCtrl1-test'"></mark>
            <mark ng-bind="obj.test+'myCtrl1-obj.test'"></mark>
        </div>
        <mark ng-bind="test+'全局-test'"></mark>
        <mark ng-bind="obj.test+'全局-obj.test'"></mark>
        
        <div ng-bind="name + '----全局的name'"></div>
        <div ng-bind="age+'-----全局的age'"></div>
    </body>

<script type="text/javascript">
        var app = angular.module("myApp",[]);
        
        app.controller("myCtrl",function($scope,$rootScope){
            $scope.name = "zhangsan";
            $rootScope.age = "14";
        });
        
        app.controller("myCtrl1",function($rootScope){
            $rootScope.test = "aaa";
            $rootScope.obj = {
                test:'bbb'
            }
        });
 </script>

【本文由“优秀程序员”发布，2017年10月13日】

zhuguou4898

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一款优秀的前端框架——AngularJS

1、Model(模型层)：应用程序中用于处理数据的部分，(包括将数据保存或者修改到数据库、变量、文件中)。　　　　　在AngularJS中，Model特指的是：应用程序中的各种数据。　　2、View(视图层)：用户可以看到的用户显示数据的页面。　　3、Controller(控制器):控制器是连接View和Model的桥梁，负责从View读取数据，接受用户的操作输入；并将
复制链接

扫一扫