注:本章只是偏重与介绍Angular框架与体验一下angular的特性,具体知识点会在下篇开始讲解。
Angular最为核心的是:MVVW(Model-View-ViewModel)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等;
重要专业术语的解释:
1.MVVM模式:比之MVC,MVP等模式而言,更为高级一点的前端开发框架模式,就是体现了数据的双向绑定;当业务逻辑的中的数据发生改变时,前端展示数据的标签也会自动跟着改变(自动化双向数据绑定):
1).View:html页面,负责页面的绘制与用户的交互;
2).Model:实体模型;
3).ViewModel:负责View与Model之间的交互,负责业务逻辑;
2.依赖注入:一句话‘当我需要你的时候,就把你拿过来用,当我用不到你的时候,我就不需要依赖你我也能照样生存或执行’;
了解一下Angular或这是说MVVM模式的双向数据绑定的特性:
运行一下,就会发现当你在输入框中改变里面的值时,输入框下边打印的文本也会随之改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular数据双向绑定了解</title>
</head>
<body>
<!--
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-app指令指明了应用, ng-controller 指明了控制器。
-->
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<!--
在大型的应用程序中,通常是把控制器存储在外部文件中。 personController.js
-->
</body>
</html>
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
<script type="text/javascript">
//参数一:ng-app指定的应用名
let myApp = angular.module('myApp', []); //AngularJS 模块
//参数一: ng-controller 指明了控制器名 $scope是固定的
myApp.controller('myCtrl', function($scope) { //AngularJS 控制器
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>