Angular并不是适合任何应用的开发，Angular考虑的是构建CRUD应用

但是目前好像也只是用到了angular的一些指令，数据绑定，mvc，http服务而已.....

以前传统的做法就是，通过js，去定位元素，绑定相关的事件。

Angular通过指令（directive）扩展HTML的语法。

它尝试去扩展HTML的结构

来弥合   （以文档为中心的（HTML））与（实际Web应用所需要的（HTML））之间的鸿沟。

AngularJS 应用组成如下：

View(视图), 即 HTML。

Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope是模型，是View和Controller的纽带。

这里都用//做注释了。因为没法用快捷键

举一个例子

使用js的话，基本只需要关注body里面的东西就好了

angulat会以ng-app为根节点，开始编译遍历DOM树

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

//声明这个app是myApp，控制器是personCtrl

<div ng-app="myApp" ng-controller="personCtrl">

//ng-model其实就是声明了一个变量，双向绑定，只要变量的值改了，用到这个变量的地方马上也会改变

名: <input type="text" ng-model="firstName"><br>

姓: <input type="text" ng-model="lastName"><br>

<br>

//使用了控制器里面定义的方法

姓名: {{fullName()}}

</div>

//在控制器里，通过scope去定义一些操作

<script>

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

app.controller('personCtrl', function($scope) {

    //这个只是初始化的值，这样就不需要什么ng-init了

    $scope.firstName = "John";

    $scope.lastName = "Doe";

    //声明了函数

    $scope.fullName = function() {

        return $scope.firstName + " " + $scope.lastName;

    }

});

</script>

</body>

</html

再看一个官网的例子

（html+angular的指令）就是模板Tmeplate

模板经过编译------->带有angular的DOM(view)就是视图层了

view------>model(数据)-------->业务逻辑

ng-app：是初始化。

ng-model：与model层关联，元素的值会被写到ng-model声明的变量里面去。

{{}}表达式

<!doctype html>

<!-- 启动angular -->

<html ng-app>

  <head>

    <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>

  </head>

  <body>

      <!-- 初始化变量 -->

    <div ng-init="qty=1;cost=2">

      <b>订单:</b>

      <div>

          <!-- 绑定数据，将input的值实时更新到model里 -->

        数量: <input type="number" ng-model="qty" required >

      </div>

      <div>

        单价: <input type="number" ng-model="cost" required >

      </div>

      <div>

          <!-- 计算 -->

        <b>总价:{{qty*cost}}</b>

      </div>

    </div>

  </body>

</html>

要能加载到angular才行，不然页面就是直接的html

图示，view和model层双向绑定数据

Angular提供了动态(live)的绑定：

当input元素的值变化的时候，表达式的值也会自动重新计算，并且DOM所呈现的内容也会随着这些值的变化而自动更新。

这种模型(model)与视图(view)的  联动   就叫做“双向数据绑定”

转载于:https://www.cnblogs.com/weizhibin1996/p/9279820.html

AngularJS学习1-基础知识的更多相关文章

  1. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  2. Ant学习-001-ant 基础知识及windows环境配置

    一.Ant 概要基础知识 Apache Ant 是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发,用以构建应用,或结合其他开源测试工具例如 git.T ...

  3. 学习javascript基础知识系列第二节 - this用法

    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...

  4. 学习javascript基础知识系列第三节 - ()()用法

    总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...

  5. 关于图计算&图学习的基础知识概览：前置知识点学习（Paddle Graph Learning (PGL)）

    关于图计算&图学习的基础知识概览:前置知识点学习(Paddle Graph Learning (PGL)) 欢迎fork本项目原始链接:关于图计算&图学习的基础知识概览:前置知识点学习 ...

  6. 学习Python3基础知识过程中总结

    print()中end==""的用法 例子:用Python3输出九九乘法表: for i in range(1,10): for j in range(1,i+1): s=i*j ...

  7. three.js学习笔记--基础知识

    基础知识 从去年开始就在计划中的three.js终于开始了 历史介绍 (摘自ijunfan1994的转载,感谢作者) OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于Op ...

  8. SQLServer学习笔记<>.基础知识,一些基本命令,单表查询(null top用法,with ties附加属性,over开窗函数),排名函数

    Sqlserver基础知识 (1)创建数据库 创建数据库有两种方式,手动创建和编写sql脚本创建,在这里我采用脚本的方式创建一个名称为TSQLFundamentals2008的数据库.脚本如下:   ...

  9. Android学习之基础知识十五 — 最佳UI体验（Material Design实战）

    一.前言 长久以来,大多数人都认为Android系统的UI并不美观,至少没有iOS系统的美观.以至于很多IT公司在进行应用界面设计的时候,为了保证双平台的统一性,强制要求Android端的界面风格必须 ...

  10. Android学习之基础知识十四 — Android特色开发之基于位置的服务

    一.基于位置的服务简介 LBS:基于位置的服务.随着移动互联网的兴起,这个技术在最近的几年里十分火爆.其实它本身并不是什么时髦的技术,主要的工作原理就是利用无线电通讯网络或GPS等定位方式来确定出移动 ...

随机推荐

  1. qt creator源码全方面分析(3-9)

    依赖分析图 我们对库和插件的依赖性进行分析,并画图如下,稍微省略了一些插件,画出来太乱了,核心的都在图中了. 原创造福大家,共享改变世界 献出一片爱心,温暖作者心灵

  2. Java第八天，抽象的概念是什么？如何完成抽象类的实现？

    抽象 面向对象编程中,抽象是一个很重要的概念,那么抽象有什么需要注意的地方呢?请熟记以下知识点. 如果父类当中的方法不确定如何进行方法体的实现,则这个方法就是抽象方法. 抽象方法只需要在方法前面加上a ...

  3. .net 垃圾回收

    垃圾回收器帮我们处理了内存中不在使用的对象,提高了机器的性能,让开发人员轻松了很多. 你真的了解垃圾回收吗? 或许你知道垃圾回收,听说过是通过标记回收,可是怎么标记回收呢就不是很清楚了,好吧,如果不清 ...

  4. django中写分页

    1.引用函数import from django.core.paginator import Paginator 2.分页 page_obj = Paginator(Article.objects.a ...

  5. 运行jmeter.bat时 提示 not able to find java executable or version

    安装过好几次,这是第一次遇到运行jmeter.bat时 提示 not able to find java executable or version Please check your Java in ...

  6. bat中的特殊字符，以及需要在bat中当做字符如何处理

    bat中的特殊字符,以及需要在bat中当做字符如何处理 (2014-02-27 21:16:55) 转载▼ 标签: bat 特殊字符 分类: develop bat中的特殊字符,以及需要在bat中当做 ...

  7. 使用snapjs实现svg路径描边动画

    一,snap.svg插件在近几天,突然接到一个需求,内容是要在网页上写一个路径的动画,还需要可以随意控制动画的速度,开始于结束,本来是一个图片可以解决的问题,结果就这样变难了呀,在网上查一会之后,突然 ...

  8. C# windows服务没有RunInstallerAttribute.Yes的公共安装程序

    1.在视图状态 右键添加ServiceInstaller及ServiceProcessInstaller两个控件; 2.将serviceProcessInstaller类的Account属性改为 Lo ...

  9. L0 torch 构建网络初步

    L0 pytorch 构建简单网络 本文是L0, 目的是把pytorch构建感知器的程序,仔细剖析理解. import torch from torch import nn torch.__versi ...

  10. Nightmare BFS

    Ignatius had a nightmare last night. He found himself in a labyrinth with a time bomb on him. The la ...