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

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

%3F%3F%B7

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

阅读量373

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/bf287643910/article/details/54577762

AngularJS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍AngularJS的基础使用方法，包括如何定义模块与控制器、实现单向及双向数据绑定等核心功能，并通过一个简单的HelloWorld示例来展示这些概念的实际应用。

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>