Angularjs 学习笔记

Angularjs 1.0 的学习笔记

依赖注入

<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<title>最基本的依赖注入方式</title>
<meta charset="utf-8"/> 
<script src="../Script/angular.min.js" type="text/javascript"></script>
<script src="base.js"></script>
<link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div>
  <div ng-controller="MyCtrl" style="text-align: c">
     <span style="font-size: 20px;">{{gameName}}</span>
  </div>
</div>
</body>
</html>

内联式注入

//最基本的依赖注入方式
var MyModule = angular.module("MyModule",[])
MyModule.controller('MyCtrl',['$scope',
    function($scope){             //可以修改参数,如$scope1,但下面必须同时改
      $scope.gameName = "hello"
    }
]);

推断型注入

//推断型注入方式:函数参数的名称必须要和被注入的对象相同
var MyModule = angular.module("MyModule",[])

var MyCtrl = function($scope){
    $scope.gameName = "hello"
}

MyModule.controller('MyCtrl',MyCtrl)

声明式注入

//声明式注入
var MyModule = angular.module("MyModule",[])

var MyCtrl = function(thisISMyName){    //参数名称可以随意变化
    thisISMyName.gameName = "hello"
}

MyCtrl.$inject = ['$scope']       //加载模块

MyModule.controller('MyCtrl',MyCtrl)

双向绑定

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

</head>

<body ng-app="MyModule">
  <div ng-controller="MyCtrl">
     <input type="text" ng-model="message">
    <h1>{{ message }}</h1>
  </div>

  <script src="https://cdn.bootcss.com/angular.js/1.7.8/angular.min.js"></script>
  <script>
    // 这边使用到的是推断型依赖注入
    const MyModule = angular.module("MyModule", [])

    const MyCtrl = function ($scope) {
      $scope.message = 'Hello world !!!'
    }

    MyModule.controller('MyCtrl', MyCtrl)
  </script>
</body>

</html>
亲!!! 听说给作者打赏一杯咖啡钱,会给自己带来好运哦!