【AngularJS】—— 1 初识AngularJs
怀着激动与忐忑的心情,开始了学习AngularJS的旅程,很久之前就听说了这个前端框架,但是由于自己一直没有从事相关的工作,因此也没有进行学习。这次正好学习AngularJS,直接复习一下前端的知识。目前这里还是弱点,慢慢深入的学习。
AngularJS是Google的优秀的前端框架,目前已经应用于多个产品。
通过w3cschool.cc的学习,简单的了解了下它的使用方法,但是对于原理还没有理解。
AngularJs相对于其他的框架来说,有一下的特性:
1 MVVM
2 模块化
3 自动化双向数据绑定
4 语义化标签
5 依赖注入
由于很多概念都不了解,这些特性也无法理解。以后会通过学习,慢慢深入研究。
通过简单的学习,大致了解了AngularJS的语法以及使用,包括如下的内容:
1 表达式
支持普通的JS表达式,表达式通过{{}}使用。
<div ng-app="">
<p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>
2 指令
通过特定的标签指定,完成数据的绑定以及定义,抓取
<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入:</p>
<p>姓名:<input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>
</div>
ng-app 定义AngularJS的应用程序
ng-init 初始化应用程序变量
ng-model 获取程序变量
ng-bind 绑定数据变量
3 控制器
通过控制器,控制应用程序。通过构造函数,完成方法以及变量的创建。
其中personController相当于构造方法函数,参数$scope代替指定的元素标签。
<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>
4 过滤器
通过过滤器,完成特定的排序或者过滤,大小写转换等等。
currency 数字转化成货币格式
<div ng-app="" ng-controller="costController">
数量:<input type="number" ng-model="quantity">
价格:<input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>
filter 从数据项中选定一个子集
<div ng-app="" ng-controller="namesController">
<p>输入过滤:</p>
<p><input type="text" ng-model="name"></p>
<ul>
<li ng-repeat="x in names | filter:name | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
orderBy 排序
<div ng-app="" ng-controller="namesController">
<p>循环对象:</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>
lowercase uppercase 大小写转换
<div ng-app="" ng-controller="personController">
<p>姓名为 {{ person.lastName | uppercase }}</p>
</div>
5 http
通过http获取指定的文件内容
<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>
6 表格
通过ng-repeat实现表格展现
<div ng-app="" ng-controller="customersController">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
7 html dom
通过DOM元素的属性,控制节点。例如:ng-disabled ng-show
<div ng-app="">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">按钮
</p>
</div>
以上就是简单的学习内容,明天计划学习下w3cshcool.cc的后续内容
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 7.SwrContext音频重采样使用
- 8.ffmpeg-基础常用知识
- 9.下载ffmpeg、使QT支持同时编译32位和64位
- 10.QT-QAudioOutput类使用
- 11.QT-ffmpeg+QAudioOutput实现音频播放器
- Spring JPA 自定义删改
- LeetCode-28.实现 strStr()
- 【工具篇】程序员不愿意写 PPT 是姿势不对?
- 机器学习还能预测心血管疾病?没错,我用Python写出来了
- Fasttext 总结
- PathClassLoader加载与查找类
- springboot maven项目引入并打包本地JAR
- 移植lua5.2和luasocket库到嵌入式linux,使能强大的lua脚本和网络功能
- Go或者C中调用Lua业务脚本,实现终端应用的热更新机制
- 多线程基础(八):ReentrantLock的使用及与synchronized的区别