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等定位方式来确定出移动 ...
随机推荐
- Github基础使用教程 ———功能介绍
Github基础使用手把手教程 --功能介绍 本人Github小白,刚摸索的差不多,记录一下经验,小白写出来的东西各位萌新一定看的懂啦~ 本篇内容主要针对想快速学会使用Github这个强大工具的 ...
- mybatis源码配置文件解析之一：解析properties标签
mybatis作为日常开发的常用ORM框架,在开发中起着很重要的作用,了解其源码对日常的开发有很大的帮助.源码版本为:3-3.4.x,可执行到github进行下载. 从这篇文章开始逐一分析mybati ...
- python 天天生鲜项目
python 天天生鲜项目 django版:https://github.com/Ivy-1996/fresh flask版:https://github.com/Ivy-1996/flask-fre ...
- C++ namespace 命名空间
namespace即"命名空间",也称"名称空间" 那么这个 "名称空间" 是干啥的呢? 我们都知道,C/C++中的作用域可以由一个符号 { ...
- 深入理解== 和 equals 的本质区别
简介 初学者常常被"= =“和‘equals ’所折磨,为什么,因为他们的大概意思相同,都是比较两个对象是否相等,而又不搞不清他们的具体比较两个对象相等的原理是什么,所以经常搞混淆,接下来我 ...
- 30.2 案例：ArrayList本身数据可以重复，写出去重的方法
package day30_HashSet; /* * ArrayList特点(实现List接口) 有序.可以重复.可以使用索引 *使用ArrayList实现数据去重 * */ import java ...
- Ant安装与配置
1. 到apache 官网去下载最新版本的ant,http://ant.apache.org/:下载后直接解压缩到电脑上,不需要安装: 2.环境变量配置: 2.1 ->计算机右键->属性- ...
- PHP安全(文件包含、变量覆盖、代码执行）
文件包含漏洞 本地文件包含 截断技巧: ../../etc/passwd%00(\x00 \0) 利用操作系统对目录最大长度的限制,可以不需要0字节而达到截断的目的.目录字符串,在windows下25 ...
- H - Bear and Three Balls
Limak is a little polar bear. He has n balls, the i-th ball has size ti. Limak wants to give one bal ...
- I. 蚂蚁上树
蚂蚁上树(Sauteed Vermicelli with minced Pork),又名肉末粉条,是四川省及重庆市的特色传统名菜之一.因肉末贴在粉丝上,形似蚂蚁爬在树枝上而得名.这道菜具体的历史,已不 ...