angular基础知识简介1：angular简介+作用域介绍

angular介绍：

vue和angular都是mvvm模式都可以双向数据绑定

m model 模型（数据

v view 视图 html

c controller 控制器加工/处理model

vm view model 将模型和视图联合 vue实例化数据的时候通过data

angular 通过scop 充当view和model的连接体指向作用域

$scope $表示angular对象

1、引用

2、声明一个模块

控制器：用于处理数据 ng-reapeat 循环

双向数据绑定其实把就是数据不通过控制器（$scope）也可以实现双向数据绑定

都不支持iE8以下的版本浏览器，兼容低版本浏览器的可以写两套，或者提示：功能正在开发中，请用高版本浏览器

指令：vue:v- angular ng-

表达式:{{}} {{}}

过滤器:

服务:

var todoApp=angular.module("App",[])//声明 App:模块名称 []表示依赖列表
todoApp.controller("bodyCtrl",function($rootScope,$scope){//$rootScope定义的是全局变量,$scope是一个对象，有属性有方法
                var name="lili";
                $scope.action=function(){

                }
            });
todoApp.controller("todoCtrl",function($rootScope,$scope){//$rootScope定义的是全局变量,$scope是一个对象，有属性有方法
                $scope.name="todo";
                $scope.obj={
                    name:'wo',
                    age:20,
                    arr:['a','b','v'],
                    lists:[{msg:"a",name:"alert"},
                        {msg:"b",name:"alert"},
                        {msg:"c",name:"alert"},
                        {msg:"d",name:"alert"}
                    ]
                }
                $scope.inputVal="123";
                $scope.changeName=function(){
                    $scope.name="abc"
                }
            });
todoApp.controller("myCtrl",function($rootScope,$scope){//$rootScope定义的是全局变量,$scope是一个对象，有属性有方法
                $scope.name="my";
            });
todoApp.controller("helloCtrl",function($rootScope,$scope){//$rootScope定义的是全局变量,$scope是一个对象，有属性有方法
                $scope.name="hello";
            });
<body ng-controller="bodyCtrl">
        <div ng-controller="todoCtrl">
            <h1>{{name}}</h1>
            <h2>{{obj.arr}}</h2>
            <ul>
                <li ng-repeat="list in obj.lists">{{list.msg}}</li>
            </ul>
            <div>
                <input type="text" ng-model="inputVal"/>{{inputVal}}
            </div>
            <button ng-click="changeName()" type="button">click</button>
        </div>
        <div ng-controller="myCtrl"><!--//控制器-->
            <h1>{{name}}</h1>
        </div>
        <div ng-controller="helloCtrl"><!--//控制器-->
            <h1>{{name}}</h1>
        </div>
    </body>

angular基础知识简介1：angular简介+作用域介绍

猜你喜欢