Angular基础知识
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 ng-directives 扩展了 HTML。
The ng-app 定义 AngularJS 应用程序.(ng-app指令标记了AngularJS脚本的作用域
The ng-model 将 HTML 控件 （输入、 选择、 文本区域） 的值绑定到应用程序数据。.
The ng-bind 将应用程序数据绑定到 HTML 视图。.
1. AngularJS 表达式
1.1 AngularJS 指令是以 ng 作为前缀的 HTML 属性。AngularJS 使用 表达式 把数据绑定到 HTML。
1.2 ng-init 指令初始化 AngularJS 应用程序变量。(HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，可以使用 data-ng- 来让网页对 HTML5 有效。)
1.3 AngularJS 表达式写在双大括号内：{{ expression }}。
1.4 AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
2. AngularJS 指令
2.1 AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把应用程序数据绑定到 HTML 元素。
2.2 重复 HTML 元素
ng-repeat 指令会重复一个 HTML 元素.
通常情况下，不使用 ng-init。而是使用一个控制器或模块来代替它。
3. AngularJS 控制器
3.1 AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
控制器的 $scope 是控制器所指向的应用程序 HTML 元素。
ex:
<!DOCTYPE html>
<html>
<body> <div ng-app="" ng-controller="personController"> 名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{person.firstName + " " + person.lastName}} </div> <script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
}
</script> <script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script> </body>
</html>
3.2 ng-controller 指令把控制器命名为 object。
函数 personController 是一个标准的 JavaScript 对象的构造函数。
控制器对象有一个属性：$scope.person。
person 对象有两个属性：firstName 和 lastName。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。
4. AngularJS 过滤器
4.1 过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。
4.2 uppercase 过滤器格式化字符串为大写
lowercase 过滤器格式化字符串为小写
currency 过滤器格式化数字为货币格式
orderBy 过滤器根据某个表达式排列数组
5. AngularJS Http
5.1 $http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数。
<!DOCTYPE html>
<html>
<body> <div ng-app="" ng-controller="customersController"> <ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul> </div> <script>
function customersController($scope,$http) {
$http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}
</script> <script src="http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script> </body>
</html>
6.AngularJS HTML DOM
6.1 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性
<div ng-app=""> <p>
<button ng-disabled="mySwitch">点我！</button>
</p> <p>
<input type="checkbox" ng-model="mySwitch">按钮
</p> </div>
ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。
ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）.
6.2 ng-show 指令隐藏或显示一个 HTML 元素。
<div ng-app=""> <p ng-show="true">我是可见的。</p> <p ng-show="false">我是不可见的。</p> </div>
7. AngularJS HTML 事件
ng-click 指令定义了一个 AngularJS 单击事件
7.2 隐藏 HTML 元素
ng-hide 指令用于设置应用的一部分 不可见 。
ng-hide="true" 让 HTML 元素 不可见。
ng-hide="false" 让元素可见。
<div ng-app="" ng-controller="personController"> <button ng-click="toggle()">隐藏/显示</button> <p ng-hide="myVar">
名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{person.firstName + " " + person.lastName}}
</p> </div> <script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>
personController的第一部分与控制器章节类似。
应用有一个默认属性: $scope.myVar = false;
ng-hide 指令设置应用中的元素不可见。
toggle() 函数用于切换 myVar 变量的值（true 和 false）。
ng-hide="true" 让元素 不可见。
8. AngularJS 模块
8.1 模块定义了应用程序,所有的控制器都应该属于一个模块,模块保持全局命名空间中的整洁。
8.2 常建议把所有的脚本都放置在 <body> 元素的最底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
Angular基础知识的更多相关文章
- Angular 4 学习笔记 从入门到实战 打造在线竞拍网站 基础知识 快速入门 个人感悟
最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app. 环境&版本信息声明 运行ng -v @angular/ ...
- angular路由详解一（基础知识）
本人原来是iOS开发,没想到工作后,离iOS开发原来越远,走上了前端的坑.一路走来,也没有向别人一样遇到一个技术上的师傅,无奈只能一个人苦苦摸索.如今又开始填angular的坑了.闲话不扯了.(本人学 ...
- CodeMix入门基础知识
CodeMix在线订购年终抄底促销!火爆开抢>> CodeMix入门 CodeMix是一个Eclipse插件,可以直接从Eclipse访问VS Code和为Code OSS构建的附加扩展的 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- IM开发基础知识补课(四)：正确理解HTTP短连接中的Cookie、Session和Token
本文引用了简书作者“骑小猪看流星”技术文章“Cookie.Session.Token那点事儿”的部分内容,感谢原作者. 1.前言 众所周之,IM是个典型的快速数据流交换系统,当今主流IM系统(尤其移动 ...
- Vue基础知识之vue-resource和axios
Vue基础知识之vue-resource和axios 原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...
- nodejs+gulp+webpack基础知识
nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...
- ros基础知识总结
参考于:ros官网教程 实验楼:ros机器人操作系统自主学习实验 基础知识 1 一个catkin程序包由什么组成? 一个程序包要想称为catkin程序包必须符合以下要求: 该程序包必须包含catkin ...
- .NET面试题系列[1] - .NET框架基础知识(1)
很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...
随机推荐
- LSH、ITQ、SKLSH图像检索实验实现(包含源码下载地址)
原文来自我的独立blog:http://www.yuanyong.org/blog/cv/lsh-itq-sklsh-compliment 这两天寻找idea,想来思去也没想到好点的方法,于是把前段时 ...
- DEDE列表页调用TAG标签
[field:id function=GetTags(@me)/] 标签就可以调用出来了 只不过不带连接的,如果需要连接,请注释include\helpers\archive.helper.php文件 ...
- 3.数据库操作相关术语，Oracle认证，insert into，批量插入，update tablename set，delete和truncate的差别，sql文件导入
1相关术语 语句 含义 操作 DML语句 (Data Manipulation Language) 数据库操作语言 insert update delete select DDL语言 (Date ...
- Mobile Web开发 处理设备的横竖屏
为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间.由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的 ...
- iOS设计模式解析（一）工厂方法
工厂方法:定义创建对象的借口,让子类决定实例化哪一个类.工厂方法是一个类的实例化延迟到了子类 例如 :Shoes厂有两个子类(Newbalance.Nike)构建类图如下: 代码实现: #i ...
- 各种Adapter的用法
同样是一个ListView,可以用不同的Adapter让它显示出来,比如说最常用的ArrayAdapter,SimpleAdapter,SimpleCursorAdapter,以及重写BaseAdap ...
- UNIX环境高级编程--#include "apue.h"
apue.h头文件为作者自己编写而非系统自带,故需要自行添加! 第一:打开网站 http://www.apuebook.com/第二:选择合适的版本(一共有三个版本,根据书的版本选择)下载源码sour ...
- Java log4j的环境搭建
一.Log4j是什么? Log4j是Apache的一个开源代码项目,通过使用Log4j,我们可以控制日志信息输出的目的地.最常见的就是输出到控制台或者日志文件.同时,它强大的一点是可以在C.C++等其 ...
- php设计模式笔记--总结篇
一.引入 设计模式的一般定义不再说,只大概说一下我理解的设计模式,我理解的设计模式的主要目的是利用面向对象(类.接口等)特点,让代码更加易于扩展,易于重用,易于维护.这三个特点也就要求我们不要将太多 ...
- PHP开发调试环境配置
——基于wamp和Eclipse for PHP Developers 引言 为了搭建PHP开发调试环境,我曾经在网上查阅了无数的资料,但没有一种真正能够行的通的.因为PHP开发环境需要很多种软件相互 ...