Angular入门

最新推荐文章于 2022-08-14 09:43:33 发布

towerLJYT

最新推荐文章于 2022-08-14 09:43:33 发布

阅读量401

点赞数 1

AngularJS简介

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

官方网站：https://angularjs.org/

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

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

AngularJS四大特征

MVC 模式

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

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

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

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

MVC 模式

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

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

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

双向绑定

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

依赖注入

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

模块化设计

高内聚低耦合法则：

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

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

基础指令

<!DOCTYPE html>

<html>

<head>

<title>Angular表达式</title>

</head>

{{100 + 100 - 100}}<br/>

{{100 * 100}}<br/>

{{100 > 100}}<br/>

</body>

</html>

说明：表达式可以是变量或是运算式。

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

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

双向绑定

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

<!DOCTYPE html>

<html>

<head>

<title>Angular双向绑定</title>

</head>

姓名：<input type="text" ng-model="name"/><br/>

性别：<input type="text" ng-model="user.sex"/><br/>

年龄：<input type="text" ng-model="user.age"/><br/>

{{name}}，您好！，性别：{{user.sex}}，年龄：{{user.age}}

</body>

</ html >

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

初始化指令

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

使用ng-init指令来对变量初始化：

<!DOCTYPE html>

<html>

<head>

<title>Angular变量初始化</title>

</head>

姓名：<input type="text" ng-model="name"/><br/>

性别：<input type="text" ng-model="user.sex"/><br/>

年龄：<input type="text" ng-model="user.age"/><br/>

{{name}}，您好！，性别：{{user.sex}}，年龄：{{user.age}}

</body>

</html>

控制器

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

定义控制器语法格式：

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

<!DOCTYPE html>

<html>

<head>

<title>Angular控制器</title>

/** 定义myApp模块 */

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

/** 为myApp模块添加控制器 */

myApp.controller("myController",function($scope){

/** 定义add方法 */

$scope.add = function(){

return parseInt($scope.x) +parseInt($scope.y);

};

});

</script>

</head>

x：<input type="text" ng-model="x"/><br/>

y：<input type="text" ng-model="y"/><br/>

运算结果：{{add()}}

</body>

</html>

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

理解 $scope作用域：

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

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

事件指令

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=”控制器中定义的方法名();”;

<!DOCTYPE html>

<html>

<head>

<title>Angular事件指令</title>

/** 定义模块 */

varmyApp = angular.module("myApp",[]);

/** 模块中添加控制器 */

myApp.controller("myController", function($scope){

/** 定义方法 */

$scope.add = function(){

$scope.count= parseInt($scope.x) +

parseInt($scope.y);

};

/** 定义方法 */

$scope.blur = function(){

alert($scope.x);

};

/** 定义方法 */

$scope.keyup = function(){

alert($scope.y);

};

});

</script>

</head>

x：<input type="text" ng-model="x" ng-blur="blur();"/><br/>

y：<input type="text" ng-model="y" ng-keyup="keyup()"/><br/>

运算结果：{{count}}

</body>

</ html >

循环数组

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

<!DOCTYPE html>

<html>

<head>

<title>Angular循环数组</title>

/** 定义模块 */

varmyApp = angular.module("myApp",[]);

/** 模块中添加控制器 */

myApp.controller("myController", function($scope){

/** 定义数组 */

$scope.list =[100,200,300,400,500];

});

</script>

</head>

<ul>

</li>

</ul>

</body>

</html>

说明：这里的ng-repeat指令用于循环数组变量。

循环对象数组

<!DOCTYPE html>

<html>

<head>

<title>Angular循环对象数组</title>

/** 定义模块 */

varmyApp = angular.module("myApp",[]);

/** 模块中添加控制器 */

myApp.controller("myController", function($scope){

/** 定义对象数组 */

$scope.list =[

{name: "李大华",sex : "男",age : 30},

{name :"李中华", sex : "女", age : 26},

{name :"李小华", sex : "男", age : 20}];

});

</script>

</head>

<tr>

</tr>

<td>{{$index + 1}}</td>

</tr>

</table>

</body>

</ html >

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

条件指令

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

<!DOCTYPE html>

<html>

<head>

<title>Angular条件指令</title>

/** 定义模块 */

varmyApp = angular.module("myApp",[]);

/** 模块中添加控制器 */

myApp.controller("myController", function($scope){

/** 定义对象 */

$scope.user ={age : 20};

});

</script>

</head>

</body>

</ html >

复选框

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

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

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

<!DOCTYPE html>

<html>

<head>

<title>checkbox</title>

/** 定义模块 */

varmyApp = angular.module("myApp",[]);

/** 模块中添加控制器 */

myApp.controller("myController", function($scope){

// 第一个复选框的值

$scope.value1 =false;

// 第二个复选框的值

$scope.value2 ="2";

// 全选复选框的值

$scope.ck = false;

});

</script>

</head>

<input type="checkbox"

ng-model="value1"/>1<br/>

<input type="checkbox"

ng-true-value="1"

ng-false-value="2"

ng-model="value2"/>2<br/>

{{value1}} --->{{value2}}

<hr/>

</body>

</html>

下拉列表框

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

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

<!DOCTYPE html>

<html>

<head>

<title>select</title>

/** 定义模块 */

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

/** 模块中添加控制器 */

myApp.controller("myController", function($scope){

// 定义下拉列表框需要的数据变量

$scope.cities = [{id:1, name:'广州市'},

{id:2, name:'深圳市'},

{id:3, name:'珠海市'},

{id:4, name:'东莞市'}];

});

</script>

</head>

<select ng-model="code"

ng-options="city.id as city.name for city in cities">

<option value="">==请选择城市==</option>

</select>

<hr/>

</select>

</body>

</html>

运行结果如下：

内置服务

$timeout服务

$timeout 服务对应了window.setTimeout 函数

语法格式：$timeout(函数,间隔时间毫秒);

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Angular $timeout</title>
    <meta name="Copyright" content="All Rights Reserved"/>
    <script src="js/angular.min.js"></script>
    <script type="text/javascript">
        // 定义一个模块
        var app = angular.module('myApp',[]);
        // 模块添加控制器层
        app.controller('myController', function($scope, $timeout){
            $scope.count = 1;
            // 定义方法
            var calc = function(){
                $scope.count += 1;
                // $timeout服务，延迟1000毫秒调用一次
                var timer = $timeout(function(){
                   calc();
                }, 1000);
                  if ($scope.count == 5){
                    // 取消调度
                    $timeout.cancel(timer);
                  }
            };
            calc();
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
   {{count}}
</body>
</html>

$interval服务

$interval 服务对应了window.setInterval 函数

语法格式：$interval(函数,间隔时间毫秒,总调用次数);

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Angular $interval</title>
    <meta name="Copyright" content="All Rights Reserved"/>
    <script src="js/angular.min.js"></script>
    <script type="text/javascript">
        // 定义一个模块
        var app = angular.module('myApp',[]);
        // 模块添加控制器层
        app.controller('myController', function($scope, $interval){
            $scope.count = 1;
            // $interval服务，每隔1000毫秒调用一次
            var timer = $interval(function(){
                  $scope.count += 1;
                if ($scope.count == 5){
                    // 取消调度
                    $interval.cancel(timer);
                  }
            }, 1000, 20);
          });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
   {{count}}
</body>
</html>

$watch监听服务

$watch持续监听某变量的变化，更新界面

<!DOCTYPE html>

<html>

<head>

<title>$watch服务</title>

/** 定义模块 */

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

/** 模块中添加控制器 */

myApp.controller("myController", function($scope){

// $watch持续监听变量变化

$scope.$watch("name", function(newVal, oldVal){

$scope.dd = "新值：" + newVal + " 旧值：" + oldVal;

});

</script>

</head>

</body>

</html>

$http服务

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

$http()发送请求

语法格式：

$http({

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

url : '', // 请求URL

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

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

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

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

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

});

发送异步请求：

<!DOCTYPE html>

<html>

<head>

/** 定义模块 */

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

/** 模块中添加控制器 */

myApp.controller("myController", function($scope, $http){

// 发送异步请求

$scope.httpGet = function(){

$http({

method : "GET", // 请求方式

url : "/city", // 请求URL

params : {"id":10} // 请求参数

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

// response响应对象

$scope.cities = response.data;

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

alert("数据加载失败！");

});

};

});

</script>

</head>

<body ng-app="myApp" ng-controller="myController"

ng-init="httpGet();">

<select ng-model="code"

ng-options="city.id as city.name for city in cities">

<option value="">==请选择城市==</option>

</select>

</body>

</html>

TestController控制器：

@RestController

publicclass TestController {

/** 处理get请求与post请求 */

@RequestMapping("/city")

public List<Map<String,String>> getCitys(@RequestParam("id")Long id){

System.out.println("请求参数id: " + id);

List<Map<String,String>> data = new ArrayList<>();

Map<String,String> city1 = new HashMap<>();

city1.put("id", "1");

city1.put("name", "广州市");

Map<String,String> city2 = new HashMap<>();

city2.put("id", "2");

city2.put("name", "深圳市");

Map<String,String> city3 = new HashMap<>();

city3.put("id", "3");

city3.put("name", "惠州市");

data.add(city1);

data.add(city2);

data.add(city3);

returndata;

}

效果如下：

说明：再把异步请求方式改成post请求测试，效果完全一样。

$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: 响应对象封装了响应状态码

});

发送get请求：

<!DOCTYPE html>

<html>

<head>

/** 定义模块 */

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

/** 模块中添加控制器 */

myApp.controller("myController", function($scope, $http){

// 发送异步请求

$scope.sendGet = function(){

$http.get("/data.json").then(

function(response){ // 请求成功

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

$scope.list = response.data;

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

alert("数据加载失败！");

}

);

};

});

</script>

</head>

<body ng-app="myApp" ng-controller="myController"

ng-init="sendGet()">

<tr>

</tr>

</tr>

</table>

</body>

</html>

建立文件 data.json：

[{"name" : "李大华", "sex" : "男", "age" : 30},

{"name" : "李中华", "sex" : "女", "age" : 26},

{"name" : "李小华", "sex" : "男", "age" : 20}]

$http.post()发送请求

语法格式：

// 第一种方式

$http.post(URL,{

"id" : id

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

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

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

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

});

发送异步请求：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Angular $http.post()方法</title>
    <meta name="Copyright" content="All Rights Reserved"/>
    <script src="js/angular.min.js"></script>
    <script type="text/javascript">
        // 定义一个模块
        var app = angular.module('myApp',[]);
        // 模块添加控制器层
        app.controller('myController', function($scope, $http){
            $scope.sendPost = function(){
                // $http.get()发送异步请求
                $http.post("/user", {"name" : "张三"})
                    .then(function(response){ // 请求成功
                        if(response.status == 200){
                            $scope.res = response.data;
                        }
                    }, function(response){ // 请求失败
                        alert("数据加载失败！");
                    });
            };
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController"
      ng-init="sendPost();">
   {{res.msg}}
</body>
</html>

TestController.java控制器：

/** $http.post()请求 */
  @PostMapping("/user")
  public Map<String,String> user(@RequestBody Map<String,String> map){
    System.out.println("请求参数name: " + map.get("name"));
    Map<String,String> data = new HashMap<>();
    data.put("msg", map.get("name") + "，您好！");
    return data;
}

前端分层

基础层

提供base.js：

/**定义基础模块*/

var app = angular.module("app",[]);

服务层

提供js/service/cityService.js：

/** 定义城市服务层 */

app.service("cityService", function($http){

/**定义获取城市方法*/

this.getCities = function(params){

return $http({

method : "get", // 请求方式

url : "/city", // 请求URL

params : params // 请求参数

});

};

});

控制层

提供js/controller/cityController.js：

/** 定义城市控制器层 */

app.controller("cityController", function($scope, cityService){

/**定义查询所有城市方法*/

$scope.findAll = function(){

/**调用服务层方法查询*/

cityService.getCities({"id" : 100})

.then(function(response){

$scope.cities = response.data;

},function(){

alert("数据加载失败！");

});

};

});

视图层

<!DOCTYPE html>

<html>

<head>

<title>mvc分层</title>

</head>

<body ng-app="app" ng-controller="cityController"

ng-init="findAll();">

<select ng-model="code"

ng-options="city.id as city.name for city in cities">

<option value="">==请选择城市==</option>

</select>

</body>

</html>

towerLJYT

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Angular入门

AngularJS简介AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。官方网站：https://angularjs.org/下载地址：https://code.angularjs.or...
复制链接

扫一扫