angularjs特性 - Githubissues

HanSummer / awesome-web

A list resources of web

1 stars 0 forks source link

angularjs特性 #14

Open HanSummer opened 7 years ago

HanSummer commented 7 years ago

模块化
依赖注入
双向绑定
指令
MVC

HanSummer commented 7 years ago

模块化

一切都从模块化开始

一个模块包含：

配置 config router
过滤器 filter
指令 directive
服务 factory service provider value
控制器 controller

HanSummer commented 7 years ago

依赖注入

比如 $scope

var myApp = angular.module('myApp', []);

myApp.controller('myController',['$scope',function(scope){
     scope.model = {
        text: 'Hello World'
     }
}])

HanSummer commented 7 years ago

双向绑定

比如

<!DOCTYPE html>
<html ng-app='myApp'>
<head>
  <meta charset='utf-8'>
  <title>demo</title>
</head>
<body>
  <input type='text' ng-model='model.text'>
  <div>输入的值: {{model.text}}</div>
</body>
<script>
var myApp = angular.module('myApp', []);

myApp.controller('myController',['$scope',function(scope){
     scope.model = {
        text: 'Hello World'
     }
}])
</script>
</html>

HanSummer commented 7 years ago

指令 => 语义化标签

Angular内置指令大约60个

<!DOCTYPE html>
<html ng-app='myApp'>
<head>
  <meta charset='utf-8'>
  <title>demo</title>
</head>
<body>
  <my-hello></my-hello>
</body>
<script>
var myApp = angular.module('myApp', []);

myApp.directive('myHello',function(){
     return {
        restrict: 'E',
        template: '<div>hello world</div>'
     }
})
</script>
</html>