AngularJs基础入门

官网网址-贡献代码:(仅供参考)

① http://jquery.com/
② http://github.com
③ https://groups.google.com/forum/?hl=en#!forum/angular
④ http://docs.angularjs.org/misc/contribute


        angularJs共有4大模块构成MVC,模块和依赖注入、指令,双向数据绑定。虽然分为四大块但是我觉得无论使用那一块的知识都离不开指令,也就是说指令贯穿整个angularJs的应用。

        MVC里的控制器ng-controller是指令,获取、同步数据ng-model是指令;模块和依赖注入ng-app也是指令;双向数据绑定更不用说。所以说指令是angularJs的基础。

指令:

        (1)ng-app

        ng-app这个指令比较特殊,一个html文档最好只出现一次,如果出现多次也是只有第一个起作用,并且可以出现在html文档的任何一个元素上。

        ng-app作用是告诉子元素以下的指令是归angularJs的,angularJs会识别的。

        ng-app的值可以为空,当然在练习的时候,在项目中则一定是要赋值的。也就是后面所说的模块。angularJs的使用,不是有一句一定要牢记在的话“一切都是由模块开始的”。

        (2)ng-model

        代码:

<body ng-app="myApp">
    <!-- 当输入框的值改变时,form里的值则同步;当点击重置按钮时,则值回到初始化状态也就是设置为user里的值。 -->
    <div ng-controller="myForm">
        <form>
            <label>账号</label>
            <input type="text" placeholder="请输入账号" ng-model="user.name"/>
            <label>密码</label>
            <input type="password" placeholder="密码是由字母、数字、下划线组成" ng-model="user.password"/>
            <br/><br/>
            <button ng-click="restForm()">重置表单的值</button>
            <p>form = {{user}}</p>
            <p>user = {{userInfo}}</p>
        </form>
    </div>

    <script type="text/javascript">
        var app = angular.module('myApp',[]);
        app.controller('myForm',function($scope){
            $scope.userInfo = {
                name:"张三",
                password:"123456"
            }
            $scope.restForm = function(){
                $scope.user = angular.copy($scope.userInfo);
            }
            $scope.restForm();
        });
    </script>
</body>
        (3)$scope作用域

         概念:angularJs里树型结构。在angularJs中,编译html指的是搜索DOM树,找出与指令相关的html。DOM是树型结构,$scope作用域类似DOM的树型结构。因此它有

树型结构有的特征,继承、传播。

        生命周期:$scope是有生命周期的,创建、链接、更新、申诉、销毁。

        $rootScope是根作用域,作用在ng-app包含的所有html元素中。同样$scope是$rootScope的子作用域。

        $scope是angular的一个对象。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值