angular入门
双向绑定:
<!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传入,作用域当前页面,我们就可以给这个作用域添加属性和方法,从而当前页面的初始化