angular入门-526互联

双向绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>



</head>
<body ng-app>
    hello world
    <input ng-model="namea"></input>
    <div>{{namea}}</div>
</body>
</html>

　　ng 表示 angular，就是angular的指令，ng-app表示作用域，这个区域都交给angular管理

ng-init 初始化：

<body ng-app ng-init="name='zhangsan'">
    hello world
    <input ng-model="name"></input>
    <div>{{name}}</div>
</body>
</html>

for循环遍历数据

<body ng-app ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
    hello world
    <input ng-model="name"></input>
    <div>{{name}}</div>
    <div>{{5+ 5}}</div>
    <ul>
        <li ng-repeat="x in names">
            {{x.name}}
        </li>
    </ul>
</body>

　　控制器

<body ng-app="myApp" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]" ng-controller="myCtrl">
    hello world
    <input ng-model="name"></input>
    <div>{{name}}</div>
    <div>{{5+ 5}}</div>
    <ul>
        <li ng-repeat="x in names">
            {{x.name}}
        </li>
    </ul>
</body>
<script>
    var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

ng-controller :指定控制器构造函数，Angular会自动new此函数创建控制器对象，同时Angular还有创建一个新的域对象$scope（作用域对象），它是$rootscope（根作用域对象）的子对象
在控制器函数中声明$scope形参,Angular会自动将$scope传入

angular通过ng-controller找到myCtrl创建控制器对象，他可以将 $scope传入，作用域当前页面，我们就可以给这个作用域添加属性和方法，从而当前页面的初始化

angular declare export const