AngularJs学习记录--双向数据绑定的HelloWorld!

最新推荐文章于 2022-11-23 22:29:53 发布

%3F%3F%B7

最新推荐文章于 2022-11-23 22:29:53 发布

阅读量338

点赞数

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

本文链接：https://blog.csdn.net/bf287643910/article/details/54577762

版权

AngularJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

AngularJS板块纯属个人学习日记，如有理解不对的地方还请多多指教。

在使用angularJS时需要注意的问题：

1、必须先定义一个ng-app的模块；

2、controller是控制器的意思，定义controller前必须先创建ng-app;

3、ng-bind 是单向绑定的一个视图指令；ng-bind='name';

4、ng-model是双向绑定的视图指令，form表单专用； ng-model='name';(这个name的值将会显示在ng-model所在的form表单中)

使用angularJS创建一个Hello World的小程序的方法解析如下：

<body>
    <div ng-app="hd" ng-controller="ctrl">
        <!--1、创建一个模块，并添加控制器-->

        <h2 ng-bind="name"></h2>
        <!--5、添加视图命令：调用视图模型定义好的属性-->
        <input type="text" ng-model="name">
        <!--6、给form表单添加双向数据绑定（ng-model是$scope<->view的双向数据绑定），
        简单说，就是如果ng-model发生改变就会映射到$scope中而$scope发生改变的那么所有的
        ng-bind:'name'都会改变；
        -->

    </div>
    <script>
        var m = angular.module('hd',[]);  
        //2、将模块赋值给m；
        m.controller('ctrl',['$scope',function ($scope) {
         //3、调用m的控制器，创建视图模型($scope)并运行函数
	controller('控制器的名称',['创建视图模型',function(视图模型){ 运行的函数}// )]
            $scope.name='Hello world!';
         //4、给视图模型添加属性$scope.name='Hello World' 然后通过视图指令调用
        }]);
    </script>