官网 angularjs.org

简介

  • 先来个官网的解释
    Angular 1.x HelloWorld_数据绑定
  • 大概意思
    Angular 1.x HelloWorld_数据绑定_02
  • 菜鸟教程的解释

AngularJS 是一个 JavaScript 框架。它可通过 script 标签添加到 HTML 页面。AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。在angular的世界不需要操控dom，一切都是以指令操控数据，数据变了，视图就变了。

入门代码

  • 这里就用官网的案例了
<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

效果图

Angular 1.x HelloWorld_数据绑定_03
还是那句话，数据变了，视图就变了，Angular最大特点就是双向数据绑定

代码解释

  • 引包，这个没什么说的，自己可以用在线的，也可以下载到本地
  • angular的加载机制比较牛逼，他会等所有东西都加载完执行，所以引包的位置无所谓
  • bower instal angular ，npm install angular 都可以
  • 之前踩过一个坑，windows系统装bower前需要安装git客户端
  • 上述ng-app，ng-model都是angular的内置指令，{{}}是angular绑定数据的语法，类似ng-bing指令
  • ng-app声明一个angular的控制范围，加在html上就是全局，加在div上就是当前div
  • ng-model用来实现双向数据绑定，这个是angular特有，react和vue数据都是单向流动

今天起开始复习三大框架，angular，react，vue