Angular 1.x HelloWorld

Angular 1.x HelloWorld

    • 官网 angularjs.org
    • 简介
    • 入门代码
    • 效果图
    • 代码解释

学习资源推荐:https://blog.csdn.net/qq_42813491/article/details/90213353

官网 angularjs.org

简介

  • 先来个官网的解释
    Angular 1.x HelloWorld_第1张图片
  • 大概意思
    Angular 1.x HelloWorld_第2张图片
  • 菜鸟教程的解释

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

入门代码

  • 这里就用官网的案例了

<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_第3张图片
还是那句话,数据变了,视图就变了,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

你可能感兴趣的:(前端--angular)