angularJS 的controller(控制器)的应用

最新推荐文章于 2022-02-18 10:13:08 发布

梦无悔

最新推荐文章于 2022-02-18 10:13:08 发布

阅读量312

点赞数

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

本文链接：https://blog.csdn.net/u014444571/article/details/71514723

版权

angularjs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AngularJS 控制器</title>
        <script src="js/Angular.js"></script>
    </head>
    <body>
        <div ng-app="controllerApp" ng-controller="conController">
            <div>
                <p>姓：<input ng-model="firstName" type="text"></p>
                <p>名：<input ng-model="lastName" type="text"></p>
                <!--
                    作者：249241757@qq.com
                    时间：2017-05-10
                    描述：姓名显示方法1，ng-model绑定
                -->
                <h3>hello: {{firstName}}　{{lastName}}</h3>
                <!--
                    作者：249241757@qq.com
                    时间：2017-05-10
                    描述：姓名显示方法2，方法控制显示(注意花括号中的方法名后的()不能少，不然就变成变量名了）)
                -->
                <h3>hello: {{sayHellos()}}</h3>
            </div>
            <script>
                var app = angular.module("controllerApp",[]);
                app.controller("conController",function($scope){
                    $scope.firstName='yilisob';
                    $scope.lastName = "Join";
                    $scope.sayHellos=function(){
                        return $scope.firstName+"  "+$scope.lastName;
                    }
                })
            </script>
        </div>
        <hr />
        <div>
            <h3>angelarJs控制器解释</h3>
            AngularJS 应用程序被控制器控制。<br />
            ng-controller 指令定义了应用程序控制器。<br />
            控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。<br />
        </div>
        <div>
            <h3>应用解析：</h3>
            AngularJS 应用程序由 ng-app 定义。应用程序在 div 内运行。<br />
            ng-controller="" 定义l一个控制器。<br />
            app.controller定义的函数是一个 JavaScript 函数。<br />
            AngularJS 使用$scope 对象来调用控制器。<br />
            在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数),代表的是当前控制器所属的整个应用对象<br />
            控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。<br />
            控制器在作用域中创建了两个属性 (firstName 和 lastName)。<br />
            ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。<br />
        </div>

        <div>
            <h3>外部文件中的控制器</h3>
            将&lt;script&gt; 标签中的代码复制到外部的一个js文件中,再在需要使用的html中使用script引入即可

        </div>

    </body>
</html>

梦无悔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularJS 的controller(控制器)的应用

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>AngularJS 控制器</title> <script src="js/Angular.js"></script> </head> <body> <div ng-app="controlle
复制链接

扫一扫