AngularJS学习1-基础知识
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-基础知识的更多相关文章
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- Ant学习-001-ant 基础知识及windows环境配置
一.Ant 概要基础知识 Apache Ant 是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发,用以构建应用,或结合其他开源测试工具例如 git.T ...
- 学习javascript基础知识系列第二节 - this用法
通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
- 学习javascript基础知识系列第三节 - ()()用法
总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...
- 关于图计算&图学习的基础知识概览：前置知识点学习（Paddle Graph Learning (PGL)）
关于图计算&图学习的基础知识概览:前置知识点学习(Paddle Graph Learning (PGL)) 欢迎fork本项目原始链接:关于图计算&图学习的基础知识概览:前置知识点学习 ...
- 学习Python3基础知识过程中总结
print()中end==""的用法 例子:用Python3输出九九乘法表: for i in range(1,10): for j in range(1,i+1): s=i*j ...
- three.js学习笔记--基础知识
基础知识 从去年开始就在计划中的three.js终于开始了 历史介绍 (摘自ijunfan1994的转载,感谢作者) OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于Op ...
- SQLServer学习笔记<>.基础知识,一些基本命令,单表查询(null top用法,with ties附加属性,over开窗函数),排名函数
Sqlserver基础知识 (1)创建数据库 创建数据库有两种方式,手动创建和编写sql脚本创建,在这里我采用脚本的方式创建一个名称为TSQLFundamentals2008的数据库.脚本如下: ...
- Android学习之基础知识十五 — 最佳UI体验（Material Design实战）
一.前言 长久以来,大多数人都认为Android系统的UI并不美观,至少没有iOS系统的美观.以至于很多IT公司在进行应用界面设计的时候,为了保证双平台的统一性,强制要求Android端的界面风格必须 ...
- Android学习之基础知识十四 — Android特色开发之基于位置的服务
一.基于位置的服务简介 LBS:基于位置的服务.随着移动互联网的兴起,这个技术在最近的几年里十分火爆.其实它本身并不是什么时髦的技术,主要的工作原理就是利用无线电通讯网络或GPS等定位方式来确定出移动 ...
随机推荐
- 使用ping命令探测系统
什么是ping命令 ping命令是测试网络连接.信息发送和接收状况的实用型工具,是系统内置的探测性工具.它的原理是:每台网络上的主机都有唯一确定的IP地址,用户给目标IP发送一个数据报,对方就要返回一 ...
- Centos7.x & RedHat7.x系统忘记 root 密码解决办法
重启系统进入引导页面 先将机器重启 根据提示按下e进入内核编辑页面 找到linux16参数行,并在行尾加上rd.break,之后按下Ctrl+X重启 如上图所示,重启之后将进入救援模式. 这是依次输入 ...
- Vue 实战项目: 硅谷外卖（1）
第 1 章: 准备 1.1. 项目描述 1) 此项目为外卖 WebApp(SPA) 2) 包括商家, 商品, 购物车, 用户等多个子模块 3) 使用 Vue 全家桶+ES6+Webpack 等前端最新 ...
- flask 入门之 logging
如想看详细说明,请到: 1.https://www.cnblogs.com/yyds/p/6901864.html 2.https://docs.python.org/2/library/loggin ...
- P4015 运输问题【zkw费用流】
输入输出样例 输入 #1复制 2 3 220 280 170 120 210 77 39 105 150 186 122 输出 #1复制 48500 69140zuixiaofeiyo 说明/提示 1 ...
- 【python实现卷积神经网络】损失函数的定义（均方误差损失、交叉熵损失）
代码来源:https://github.com/eriklindernoren/ML-From-Scratch 卷积神经网络中卷积层Conv2D(带stride.padding)的具体实现:https ...
- linux 块设备简要介绍
1. 块设备简单分类:SCSI块设备和LVM逻辑卷块设备: 2. 创建块设备需要两个linux内核函数:alloc_disk:add_disk; alloc_disk:用于分配一个gendisk结构体 ...
- compareAndSet() 注意点
compareAndSet()与weakCompareAndSet()是有条件的修改程序的方法,这两个方法都要取用两个参数:在方法启动时预期数据所具有的的值,以及要把数据所设定成的值.它们都只会在变量 ...
- Levenshtein算法-比较两个字符串之间的相似度
package com.sinoup.util;/** * Created by Administrator on 2020-4-18. */ /** * @Title: * @ProjectName ...
- bootstrapTable随机改变列颜色
{ title: '运单编号', field: 'waybillNumber', align: 'center', valign: 'middle', cellStyle: function (val ...