Angular框架入门

绝地灬酷狼 2022-04-22 07:06 190阅读 0赞

1.AngularJS简介

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。

下载地址：[https://code.angularjs.org/][https_code.angularjs.org]

学习版本：angular-1.6.9.zip(2018-02-02)

2.AngularJS四大特征

2.1 MVC模式

Angular遵循软件工程的MVC模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过依赖注入（dependency injection），Angular为客户端的Web应用带来了传统服务端的服务，例如独立于视图的控制。 因此，后端减少了许多负担，产生了更轻的Web应用。

Model:数据,其实就是angular变量($scope.XX);

View: 数据的呈现,Html+Directive(指令);

Controller:操作数据,就是function,数据的增删改查;

2.2 双向绑定

AngularJS是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此，AngularJS使得对DOM的操作不再重要并提升了可测试性。

2.3依赖注入

依赖注入(Dependency Injection,简称DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建，只需要“吼一嗓子”，则此对象在创建时，其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的service和provider两类对象，都可以根据形参名称实现DI.

2.4 模块化设计

高内聚低耦合法则：

1)官方提供的模块  ng、ngRoute、ngAnimate

2)用户自定义的模块 angular.module('模块名',\[ \])

3 基础指令

3.0 导包

**3.1 表达式**

**语法格式：\{ \{变量名\}\}     或者       \{ \{对象.变量名\}\}**

<html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    </head>
    <body>
      <div ng-app>
      {
       {100 + 100}}
      </div>
    </body>
    </html>

结果：

![20181103091525733.png][]

**ng-app 指令定义了 Angular应用的根元素，在根元素的所有子元素中用到指令，angular会自动识别。**

**ng-app 指令在网页加载完毕时会自动初始化应用中的angular的指令。**

3.2 双向绑定

**语法格式：ng-model=”变量名”   或者 ng-model=”对象.变量名”**

<html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    </head>
    <body>
      <div ng-app>
       name:<input type="text" ng-model="name" /></br>
       sex:<input type="text" ng-model="user.sex" /></br>
       age: <input type="text" ng-model="user.age" /></br>
       name:{
       {name}} <br>
       sex: {
       {user.sex}} <br>
       age: {
       {user.age}} <br>
      </div>
    </body>
    </html>

结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyeV9hbmRfZG8_size_16_color_FFFFFF_t_70][]

说明：ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时地输出变量。

**3.3 初始化指令**

**语法格式：ng-init=”变量名=’变量值’;   变量名=’变量值’”**

<html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    </head>
    <body>
      <div ng-app ng-init ="name='xiaoming';user.sex='man';user.age=10 ">
       name:<input type="text" ng-model="name" /></br>
       sex:<input type="text" ng-model="user.sex" /></br>
       age: <input type="text" ng-model="user.age" /></br>
       name:{
       {name}} <br>
       sex: {
       {user.sex}} <br>
       age: {
       {user.age}} <br>
      </div>
    </body>
    </html>

结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyeV9hbmRfZG8_size_16_color_FFFFFF_t_70 1][]

### **3.4 控制器** ###

**定义模块语法格式：var 变量名 = angular.module(“模块名”, \[\]);**

**\[\]为数组对象，可以添加其他模块**

**定义控制器语法格式：**

**模块变量名.controller(“控制器名”, function($scope)\{\});**

结果：

![20181103110401443.png][]

ng-controller指定所使用的控制器。

理解 $scope作用域：

$scope 贯穿整个 Angular App应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope相当于在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图。

注意：mg-model绑定的变量数据都存放在$scope作用域对象中。

3.5 事件指令

l ng-click：单击事件

l ng-dblclick：双击事件

l ng-blur：失去焦点事件

l ng-focus：获取焦点事件

l ng-change：对应onchange改变事件

l ng-keydown：键盘按键按下事件

l ng-keyup：键盘按键按下并松开

l ng-keypress：同上

l ng-mousedown：鼠标按下事件

l ng-mouseup：鼠标按下弹起

l ng-mouseenter：鼠标进入事件

l ng-mouseleave：鼠标离开事件

l ng-mousemove：鼠标移动事件

l ng-mouseover：鼠标进入事件

语法格式：ng-xxx=”控制器中定义的方法名();”;

<html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        /*定义myApp模块*/
          var app = angular.module("myApp",[]);
    	/*将myAPP模块添加控制器*/
    	   app.controller("myController",function($scope){
    	     $scope.blur = function(){
    		  alert($scope.x);
    		 };
    		 $scope.keyup = function(){
    		  alert($scope.y);
    		 };
    	     $scope.add = function(){
    		     $scope.count =parseInt($scope.x)+parseInt($scope.y);
    			 };
    			 
    		 });
    </script>
    </head>
    <body>
      <div ng-app ="myApp" ng-controller="myController">
       x:<input type="text" ng-model="x" ng-blur="blur()"/></br>
       y:<input type="text" ng-model="y" ng-keyup="keyup()"/></br>
         <input type="button" value="计算" ng-click="add()" /> <br>
       结果:{
       {count}} <br>
      </div>
    </body>
    </html>

结果：![20181103113304811.png][]

说明：ng-xxx事件指令，绑定控制器的某个方法。

**3.6 循环数组**

**语法格式：ng-repeat=”变量名 in 集合或数组”;**

结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyeV9hbmRfZG8_size_16_color_FFFFFF_t_70 2][]

**3.7 循环对象数组**

<html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        /*定义myApp模块*/
          var app = angular.module("myApp",[]);
    	/*将myAPP模块添加控制器*/
    	  app.controller("myController",function($scope){
    	       /*定义数组对象*/
    			$scope.list = [{name:"xiaoming",sex:"男",age:10},
    						{name:"sdfs",sex:"女",age:20},
    						{name:"sfg",sex:"man",age:24}];
    		 });
    </script>
    </head>
    <body>
      <div ng-app ="myApp" ng-controller="myController">
         <table>
    	 <tr>
    	   <th>id</th>
    	   <th>name</th>
    	   <th>sex</th>
    	   <th>age</th>
    	 </tr>
    	 <tr ng-repeat = "m in list">
    	  <td>{
       {$index+1}}</td>
    	  <td>{
       {m.name}}</td>
    	  <td>{
       {m.sex}}</td>
    	  <td>{
       {m.age}}</td>
    	 </tr>
    	 </table>
      </div>
    </body>
    </html>

结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyeV9hbmRfZG8_size_16_color_FFFFFF_t_70 3][]

**$index：获取迭代时的索引号。**

**3.8 条件指令**

**语法格式：ng-if=”条件表达式”;**

结果：

![20181103131656289.png][]

### **3.9 复选框** ###

l ng-true-value="true": 选中值

l ng-false-value="false": 未选中值

l ng-checked=”true|false”: 是否选中复选框

<html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        /*定义myApp模块*/
          var app = angular.module("myApp",[]);
    	/*将myAPP模块添加控制器*/
    	  app.controller("myController",function($scope){
    	       /*定义对象*/
    			$scope.value1="true";
    			$scope.value2="1";
    			$scope.value3="true"
    		 });
    </script>
    </head>
    <body>
      <div ng-app ="myApp" ng-controller="myController">
        复选框1:<input type="checkbox" ng-model="value1" /><br>
    	复选框2:<input type="checkbox" ng-model="value2" ng-false-value="1"
    	ng-true-value="2" />
        <br>
        复选框1选中值：{
       {value1}}<br>
        复选框2选中值：{
       {value2}}
    	<br>
    	<input type="checkbox" ng-model="value3" >全选</input>
    	<input type="checkbox" ng-checked="value3" >A</input>
    	<input type="checkbox" ng-checked="value3" >B</input> 
    	<input type="checkbox" ng-checked="value3" >C</input>
    	
      </div>
    </body>
    </html>

结果：

![2018110313373089.png][]

**3.10 下拉列表框**

l ng-options="元素变量.键 as 元素变量.键 for 元素变量in 数组"：选项值表达式绑定

l ng-selected=”true|false”: 是否选中下拉列表框指定的选项

<html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        /*定义myApp模块*/
          var app = angular.module("myApp",[]);
    	/*将myAPP模块添加控制器*/
    	  app.controller("myController",function($scope){
    	       /*定义对象*/
    		 $scope.list=[
    						{id:1,name:"haha"},
    						{id:2,name:"ssfd"},
    						{id:3,name:"sbdd"}
    					 ];
    		 });
    </script>
    </head>
    <body>
      <div ng-app ="myApp" ng-controller="myController">
       <select ng-model ="code" ng-options="city.id as city.name for city in list">
         <option value="">请选择</option>
    	 {
       {code}}
       </select>
       <br>
       <select>
          <option value="1">1</option>
    	  <option value="2" ng-selected="true">2</option>
       </select>
    	 
      </div>
    </body>
    </html>

结果

![20181103140635150.png][]

4 内置服务

4.1 $http服务

我们的数据一般都是从后端获取的，那么如何获取数据呢？我们一般使用内置服务$http服务来实现。

4.1.1 $http()发送请求

语法格式：

$http(\{

method : 'get|post', // 请求方式

url : '', // 请求URL

params : \{'name':'admin'\} // 请求参数

\}).then(function(response)\{ // 请求成功

// response: 响应对象封装了响应数据、状态码

\},function(response)\{ // 请求失败

// response:  响应对象封装了响应状态码

\});

发送异步请求：

<html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="angular.min.js"></script>
    <script type="text/javascript">
        /*定义myApp模块*/
          var app = angular.module("myApp",[]);
    	/*将myAPP模块添加控制器*/
    	  app.controller("myController",function($scope,$http){
    	    /*定义对象*/
    		$scope.httpGet = function(){
    		  $http({method:"get",
    				url:"mm.json"}).then(function(response){
    				  $scope.list = response.data;
    				},function(response){
    				alert("加载失败")});
    		 }; 
    		 });
    </script>
    </head>
    <body>
      <div ng-app ="myApp" ng-controller="myController" ng-init="httpGet()">
          <table border="2">
    	   <tr>
    	    <th>id</th>
    		<th>name</th>
    	   </tr>
    	   <tr ng-repeat="m in list">
    	     <td>{
       {m.id}}</td>
    		 <td>{
       {m.name}}</td>
    	   </tr>
    	  </table>
    	 
      </div>
    </body>
    </html>

结果：

![2018110314331389.png][]

4.1.2 $http.get()发送请求

语法格式：

// 第一种格式

$http.get(URL,\{

params: \{

"id":id

\}).then(function(response)\{// 请求成功

// response: 响应对象封装了响应数据、状态码

\}, function(response)\{ // 请求失败

// response: 响应对象封装了响应状态码

\});

// 第二种格式

$http.get(URL).then(function(response)\{ // 请求成功

// response: 响应对象封装了响应数据、状态码

\},function(response)\{ // 请求失败

// response: 响应对象封装了响应状态码

\});

4.1.3 $http.post()发送请求

语法格式：

// 第一种方式

$http.post(URL,\{

"id" : id

\}).then(function(response)\{ // 请求成功

// response: 响应对象封装了响应数据、状态码

\},function(response)\{ // 请求失败

// response: 响应对象封装了响应状态码

\});

其实学Angular只要学它的指令就好了

[https_code.angularjs.org]: https://code.angularjs.org/
[20181103091525733.png]: /images/20220422/e892f636946b43559fa5f76efce795f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyeV9hbmRfZG8_size_16_color_FFFFFF_t_70]: /images/20220422/a590d79f6d7e450eba9aeb8b200146be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyeV9hbmRfZG8_size_16_color_FFFFFF_t_70 1]: /images/20220422/b6beccc708804d67bfcdc1c10bb08a8b.png
[20181103110401443.png]: /images/20220422/b18018a96a3b452f90e43f67aef07b97.png
[20181103113304811.png]: /images/20220422/aa3b7ab46d6145038102ccc6a58958a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyeV9hbmRfZG8_size_16_color_FFFFFF_t_70 2]: /images/20220422/ed2e869dd9c24168bf8b2a663f96cd58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RyeV9hbmRfZG8_size_16_color_FFFFFF_t_70 3]: /images/20220422/4e20fcc05a84454db99136d3186ce607.png
[20181103131656289.png]: /images/20220422/6a9c1f8f647f42b5a0592e001450a63c.png
[2018110313373089.png]: /images/20220422/a5d0fb959021493b94c545343bc53e2f.png
[20181103140635150.png]: /images/20220422/35f11b5fad8e4ac98841e2996fe00c2d.png
[2018110314331389.png]: /images/20220422/1f5b27c82d504f59ba6031c4e9348933.png