AngularJs前端基础个人学习总结

2023-12-20 13:10:22

AngularJs

1.数据绑定

<!--
ng-app属性声明所有被其包含的内容都属于这个AngularJS应用
只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响
-->
<html ng-app>

<head>
    <meta charset="utf-8">
    <title>Simple app</title>
    <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body> 
<!--
ng-model相当于vue中的v-model，绑定变量名称name，从而达到数据动态绑定的功能

该绑定是单向绑定，model是ng-model中的name变量，view是<h1>中的{{}}

单向绑定：通过改变model，从而改变view，{{}}就是很好的单向绑定的例子
-->
	<input ng-model="name" type="text" placeholder="Your name">
    <h1>Hello {{ name }}</h1>
</body>

</html>

同样的，ng-model还可以用来绑定对象的某个属性，从而达到从服务器获取数据，绑定到前端的功能。

<div ng-controller='MyController'>
  <!--person为数据对象，name为该对象的属性，person通过ng-controller绑定的控制器获取返回的数据-->
  <input ng-model="person.name" type="text" placeholder="Your name">
  <h1>Hello {{ person.name }}</h1> 
</div>

2.指令

  1. ng-app 指令初始化一个 AngularJS 应用程序，只有包含在该元素下的元素才能识别AngularJS
  2. ng-init 指令初始化应用程序数据。
  3. ng-model 数据绑定
    示例：
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="" ng-init="firstName='John'">

<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>

</div>

</body>
</html>
  1. ng-repeat 相当于vue中的v-for，循环遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="" ng-init="person=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象:</p>
<ul>
  <li ng-repeat="x in person">
  {{ x.name + ', ' + x.country }}</li>
</ul>

</div>

</body>
</html>
  1. ng-click点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count(2)">点我！</button>

<p>{{ count2 }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count2 = 0;
    $scope.count = function(num){
        $scope.count2+=num;
    }
});
</script>

</body>
</html>

3.作用域Scope

  1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。它是一个对象，有自己的属性和方法
  2. 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.carname = "Volv1o";
});
</script>


</body>
</html>

4.根作用域rootScope

  1. 所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<h1>姓氏为 {{lastname}} 家族成员:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
<!--$rootScope可以作为参数传递-->
app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

<p>注意 $rootScope 在循环对象内外都可以访问。</p>

</body>
</html>

5.模块module

  1. 指定当前模块的值来源于哪个控制器，如上图所示。指定当前控制器绑定的是myApp模块。

6.控制器controller

  1. 指明当前域的值是交由哪个控制器处理获得。当然，控制器也可以有自己的方法(变量和函数)。
<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

7.过滤器 |

  1. 常见的5种过滤器
过滤器 描述
currency 格式化数字为货币格式
filter 从数组项中选择一个子集
lowercase 格式化字符串为小写
orderBy 根据某个表达式排列数组
uppercase 格式化字符串为大写
  1. 使用方法
    可以使用一个管道字符（|）添加到表达式和指令中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<p>输入过滤:</p>

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="/statics/demosource/namesController.js"></script>

</body>
</html>

#namesController.js
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});

8.自定义过滤器

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
  <div ng-controller="MyController">{{name | firstUpper}}</div>

  <script>
    <!--指定是哪一个module-->
    var m1 = angular.module('myApp', []);
    <!--为该module构建自己的过滤器-->
    m1.filter('firstUpper', function(){
      return function(str) {
        return str.charAt(0).toUpperCase() + str.substring(1);
      }
    });
    <!--定义Controller-->
    m1.controller('MyController', ['$scope', function($scope) {
      $scope.name = "test";
    }]);
  </script>
</body>
</html>

9.服务service

  1. 服务是angular内置的函数或对象，个人觉得是对javaScript的一些常用功能的封装
  2. 具体用法格式：
var app = angular.module('myApp', []);
app.controller('yourController', function($scope, '服务名') {
});
  1. $location服务
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>
</div>

<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
</script>

</body>
</html>
  1. $http服务
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>欢迎信息:</p>

<h1>{{data}}</h1>

</div>

<p> $http 服务向服务器请求信息，返回的值放入变量 "data" 中。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("/statics/demosource/welcome.htm").then(function (response) {
      $scope.data = response.data;
  });
});
</script>

</body>
</html>
  1. 自定义服务
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

<p>255 的16进制是:</p>

<h1>{{hex}}</h1>

</div>

<p>自定义服务，用于转换16进制数：</p>

<script>
var app = angular.module('myApp', []);

app.service('hexafy', function() {
	this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});
</script>

</body>
</html>
  1. 其他服务

10.select选择框

  1. //TODO没搞清楚这个ng-model绑定的b到底是怎么来的，为什么会凭空出现一个b，他绑定的到底是那里的值？
  2. 经过测试,发现ng-model取名是什么都没关系，估计它绑定的是ng-options中for循环遍历的每一个对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>选择网站:</p>

<select ng-model="b" ng-options="x.a for x in sites">
</select>

<h1>你选择的是: {{b.a}}</h1>
<p>网址为: {{b.url}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
	    {a: "Google", url : "http://www.google.com"},
	    {a : "W3CSchool", url : "http://www.w3cschool.cn"},
	    {a : "Taobao", url : "http://www.taobao.com"}
	];
});
</script>

<p>该实例演示了使用 ng-options  指令来创建下拉列表，选中的值是一个对象。</p>
</body>
</html>

11.表格

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd)	{
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <tr ng-repeat="x in names">
     <td>{{ $index + 1 }}</td>  ---序号
    <td>{{ x.Name }}</td>
    <td>{{ x.Country | uppercase }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("/statics/demosource/Customers_JSON.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

12.表单

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user }}</p>
  <p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName:"John", lastName:"Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>

</body>
</html>

13.依赖注入核心组件

  1. value
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="value" placeholder="请输入需要乘于3的值"></input>
    <h2>hex值是：{{hex()}}</h2>
  </div>

  <script>
    var myApp = angular.module("myApp", []);
	
	//定义value
    myApp.value("defaultValue",3);

     // 通过factory创建MathService。实际上用service也行
     myApp.service('MathService', function (defaultValue) {
       var MathService = {};

        MathService.value = function(x){
          return x*defaultValue;
        };

        return MathService;
    });

    myApp.controller("myCtrl",function($scope,MathService){
      $scope.value = 0;
      $scope.hex = function(){
        return MathService.value($scope.value);
      }
    });

  </script>

</body>

</html>
  1. service
  2. factory
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="firstName" placeholder="请输入需要求平方的值"></input>
    <h2>hex值是：{{hex()}}</h2>
  </div>

  <script>
    var mainApp = angular.module("myApp", []);

    // 通过factory创建MathService。实际上用service也行
    mainApp.factory('MathService', function () {
      var factory = {};

      factory.multiply = function (a, b) {
        return a * b
      }
      return factory;
    });

    // 通过service创建CalService。要调用哪个服务就在function加上哪个服务的参数
    mainApp.service('CalcService', function (MathService) {
      this.square = function (a) {
        return MathService.multiply(a, a);
      }
    });
	
	//将服务注入到controller
    mainApp.controller('myCtrl', function ($scope, CalcService) {
      $scope.firstName = 2;
      $scope.hex = function(){
        return CalcService.square(parseInt($scope.firstName));
      }
    });

  </script>

</body>

</html>
  1. provider
  2. constant
    详细说明见：W3C依赖注入说明

14.AngularJs路由

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入angularJS -->
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<!-- 引入angular路由 -->
<script src="//apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

<script type="text/javascript">
//引入ngRoute路由组件
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope) { $scope.$route = $route;})
.controller('AboutController', function ($scope) { $scope.$route = $route;})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
</script>

  
</head>

<body ng-app="ngRouteExample" class="ng-scope">
  <script type="text/ng-template" id="embedded.home.html">
      <h1> 欲上青天揽明月 </h1>
  </script>

  <script type="text/ng-template" id="embedded.about.html">
      <h1> 把酒问青天 </h1>
  </script>

  <div> 
    <div id="navigation">  
      <a href="#/home">Home</a>
      <a href="#/about">About</a>
    </div>
      <!-- 相当于vue中的路由占位符,页面内容会被替换放到这里展示 -->
    <div ng-view="">
    </div>
  </div>
</body>
</html>
上一篇：Angular 使用 Injector API 人工获取依赖注入的实例


下一篇：PLSQL语句demo