【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的后续内容
【AngularJS】—— 1 初识AngularJs的更多相关文章
- AngularJs(Part 9)--AngularJS 表单
AngularJS 表单 AngularJS使用了MVX的结构,我们可以是传统的表单更加强大.比如过去我们得自己写一大堆验证,比过过去我们得自己转换用户的输入, 现在这些工作全部可以交给Ang ...
- 【js类库AngularJs】学习angularJs的指令(包括常见表单验证,隐藏等功能)
[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...
- 初识AngularJS 之 HelloWorld和数据绑定
1.Hello World 我用的开发工具是 atom ,大家有需要的话可以找我要安装包嘻嘻 第一步: 写入以下代码: <!DOCTYPE html> <html ng-ap ...
- 我的angularjs源码学习之旅1——初识angularjs
angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...
- 前端 初识angularJS的基本概念
DEMO1演示地址:http://webenh.chinacloudsites.cn/default/demo1 今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angula ...
- 【AngularJS】—— 2 初识AngularJs(续)
前一篇了解了AngularJS的一些简单的使用,这里继续跟着w3c学习一下剩下的内容. 本篇根据w3cschool.cc继续学习AngularJS剩余的内容,包括: 1 事件 2 模块 3 表单 4 ...
- AngularJS学习-初识
angularJS定义和特点 1.google前端开源框架 2.MVVM(model view view-model)设计模式 : Model将和ViewModel互动(通过$scope对象),将监听 ...
- 初识angularJS的基本概念
今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angular的时候,还真的不知道它到底有什么作用,直到我开始学习它,并且运用到它的时候,才知道angular这么强大.作为一个前 ...
- 第一章-初识AngularJS
完全使用javascript编写的客户端技术.同其他历史悠久的Web技术配合使用,使Web应用开发比以往更简单,更快捷. Angularjs主要用于构建单页面Web应该.它通过增加开发人员和常见Web ...
随机推荐
- Nginx Parsing HTTP Package、header/post/files/args Sourcecode Analysis
catalog . Nginx源码结构 . HTTP Request Header解析流程 . HTTP Request Body解析流程 1. Nginx源码结构 . core:Nginx的核心源代 ...
- 在DDwrt下对Firmware操作的一些技巧
[备注]这里是对ddwrt的操作,事实上,对openwrt同样也适用. 基础知识: 1.MTD MTD是Memory Technology Devices的缩写,它主要提供了一个raw Flash设备 ...
- Django TemplateSyntaxError Could not parse the remainder: '()'
返回的数据是列表集合,如 n [5]: a = set() In [6]: a.add((1, 3)) In [7]: a Out[7]: {(1, 3)} 在模板中使用方式如下: {% for ar ...
- Default团队项目立题
PhyLab物理实验网站 接手PhyLab网站,进一步优化网站体验,增加新的功能.
- linux 学习基础7之脚本的练习
练习:传递一个用户名参数给脚本,判断此用户的用户名跟其基本组的组名是否一致,并将结果显示出来.写一个脚本:#!/bin/bashUSER=$1if [ ! $# -eq 1 ];then echo ...
- DNS(二)之bind的视图功能
bind视图工作原理 在我国目前的网络环境下面,多个运营商并存,运营商之间的存在一定的网络互通问题,如果把来自不同的运营商或者地域的所有用户通过简单的A记录分配到一个机房,那么就存在部分网民访问延时大 ...
- linux命令使用记录
netstat: -a show both listening and none-listening sockets.默认是不显示listening sockets -t 仅显示tcp相关 默认是都显 ...
- 运用java集合Collections对List进行max和min操作
我想创建了一个List,里面有一堆的数,一个需求是去掉一个最大值,一个最小值,List有remove的方法,但是找到最大值和最小值的方法不在List里,而是Collections的静态方法.真心觉得还 ...
- MySQL学习笔记——增删改查
有关数据库的DML操作 -insert into -delete.truncate -update -select -条件查询 -查询排序 -聚合函数 -分组查询 DROP.TRUNCATE.DELE ...
- ecshop 快速添加会员
/*------------------------------------------------------ */ //-- 快速添加会员 /*-------------------------- ...