angular基礎知識簡介1：angular簡介+做用域介紹

時間 2019-12-06 標籤 angular 基礎知識簡介 1 angular 簡介做域介紹

angular介紹：html

vue和angular都是mvvm模式均可以雙向數據綁定vue

m model 模型（數據瀏覽器

v view 視圖 htmlmvvm

c controller 控制器加工/處理modelcode

vm view model 將模型和視圖聯合 vue實例化數據的時候經過datahtm

angular 經過scop 充當view和model的鏈接體指向做用域對象

$scope $表示angular對象作用域

一、引用開發

二、聲明一個模塊input

控制器：用於處理數據 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>