AngularJS进行应用开发的一个重要的思维模式: 从构造声明式界面入手
ng-app: 这个指定定义并且关联了使用angularJS的HTML页面部分
ng-model: 这个指定定义并绑定AngularJS数据和HTML页面中相关输入元素(input,textarea等等)
ng-bind: 这个指定将AngularJS的数据绑定到页面指定HTML元素上,例如, <p>
<div ng-app="" class="ng-scope">
<input type="text" ng-model="website" class="ng-pristine ng-valid">
<p>
你好,<span ng-bind="website" class="ng-binding"></span>
</p>
</div> <script src="angular.min.js"></script>
相关说明:
ng-app 指定暗示AngularJS程序开始
ng-mode 指定定义了一个“模型”名称,使用这个名称可以在上面ng-app中访问和使用相关数据
ng-bind 指定使用上面定义的“模型”名称展示到页面相关的元素中.
</div>关闭标签暗示了当前AngularJS应用结束
ng-init:定义程序初始化的一些数据
ng-repeat:定义重获取数据集中的内容
<div ng-app="" ng-init="languages=[{name:'java', learningcurve:'high'},{name:'javascript',learningcurve:'medium'}]">
<p>编程语言</p>
<ul>
<li ng-repeat="language in languages">
{{'编程语言:'+ language.name +', 难度:' + language.learningcurve}}
</li>
</ul>
</div>
AngularJS中的控制器
ng-controller:定义控制器来控制模块的相关数据
页面定义:
<div ng-app="" ng-controller="myCtrl">
...
</div>
myCtrl即是需要定义的控制器方法:
//控制器使用Javascript来定义,如下: function myCtrl($scope){
$scope.course = { //定义一个course对象
title:"AngularJS入门",
enroll: 20,
result: function(){
//定义一个方法:这个方法返回组装的字符串
var courseObj;
courseObj = $scope.course;
return courseObj.title + " " + courseObj.enroll + "人报名中";
}
};
}
在页面中使用ng-model绑定输入元素,使用表达式来调用控制器相关方法,如下:
<div ng-app="" ng-controller="myCtrl">
课程:<input type="text" ng-model="course.title"><br>
报名:<input type="text" ng-model="course.enroll"><br>
<hr>
课程报名信息:<span class="text">{{course.result()}}</span>
</div>
AngularJS的过滤器使用
uppercase:转换为大写
lowercase:转换为小写
currency:转换为货币单位
filter:过滤内容
orderby:内容排序
<div ng-app=""
ng-init="books=[{language:'javascript', price:50},
{language:'java', price:30},
{language:'c++', price:70},
{language:'html', price:20}]"> 过滤:<input type="text" ng-model="book"> <ul>
<li ng-repeat="book in books | filter: {language:book} | orderBy: 'price'">
{{ book.language | uppercase }} : {{book.price | currency}}
</li>
</ul> </div>
AngularJS的模块
- 应用模块:用来初始化控制器相关的应用
- 控制器模块:用来定义相关控制器
应用模块
var mainApp = angular.module("mainApp", []);
这里声明了一个mainApp的应用,使用了angular.module方法,并且传递了一个空的数组,这个数组用来包含独立的模块
控制器模块
mainApp.controller("studentController", function($scope) {
$scope.student = {
firstName: "Terry",
lastName: "Lee",
fees:500,
subjects:[
{name:'编程语言基础',marks:90},
{name:'C语言',marks:85},
{name:'HTML/CSS',marks:61},
{name:'Java',marks:85},
{name:'NodeJS',marks:65}
],
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
引用模块
<div ng-app="mainApp" ng-controller="studentController">
..
<script src="mainApp.js"></script>
<script src="studentController.js"></script>
事件
- ng-click
- ng-dbl-click
- ng-mousedown
- ng-mouseup
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-keydown
- ng-keyup
- ng-keypress
- ng-change
示例:表单reset效果,使用ng-click事件处理
<div ng-app="" ng-controller="studentController" class="ng-scope"> <input name="firstname" type="text" ng-model="firstName" value="test" required="" class="ng-pristine ng-valid ng-valid-required"><br>
<input name="lastname" type="text" ng-model="lastName" required="" class="ng-pristine ng-valid ng-valid-required"><br>
<input name="email" type="email" ng-model="email" required="" class="ng-pristine ng-valid-email ng-valid ng-valid-required"><br> <!-- ng-click触发控制器方法 -->
<button ng-click="reset()">点击这里重置表单数据</button> </div>
function studentController($scope) {
//调用reset将表单输入框对应值设置为如下缺省值
$scope.reset = function(){
$scope.firstName = "terry";
$scope.lastName = "lee";
$scope.email = "terrylee@gbtags.com";
}
$scope.reset();
}
Angular的include指令
ng-include:嵌入HTML页面
<div ng-app="" ng-controller="studentController"> <!-- 使用angularjs的include指令导入一个外部html -->
<div ng-include="'/cdn/gblibraryassets/libid101/main.html'"></div> </div>
(一)Angularjs - 入门的更多相关文章
-
AngularJS入门心得4——漫谈指令scope
上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...
-
AngularJS入门心得3——HTML的左右手指令
在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...
-
AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
-
AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
-
AngularJS入门教程:日期格式化
AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...
-
【转载】图灵AngularJS入门教程
摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...
-
《AngularJS入门与进阶》图书简介
一.图书封面 二.图书CIP信息 图书在版编目(CIP)数据 AngularJS入门与进阶 / 江荣波著. – 北京 : 清华大学出版社, 2017 ISBN 978-7-302-46074-9 Ⅰ. ...
-
跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
-
angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】
事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...
随机推荐
-
Entity Framework 6 Recipes 2nd Edition(12-3)译 ->; 数据库连接日志
12-3. 数据库连接日志 问题 你想为每次与数据库的连接和断开记录日志 解决方案 EF为DbContext的连接公开了一个StateChange 事件.我们需要处理这个事件, 为每次与数据库的连接和 ...
-
html 遇到margin居中的问题
今天在写div时发现不居中, div{ margin:0 auto; } 那么给div一个固定的宽度,就会居中了 div{ margin:0 auto; width:500px; }
-
What does the “__block” keyword mean?
It tells the compiler that any variable marked by it must be treated in a special way when it is use ...
-
PHP中使用CURL(三)
对 post 提交的数据进行 http_build_query处理,然后再send出去,能实现更好的兼容性,更小的请求数据包. <?php /** * PHP发送Post数据 * @param ...
-
我的WafBypass之道(upload篇)
0x00 前言 玩waf当然也要讲究循序渐进,姊妹篇就写文件上传好了,感觉也就SQLi和Xss的WafBypass最体现发散性思维的,而文件上传.免杀.权限提升这几点的Bypass更需要的是实战的经验 ...
-
向comboboxEdit中动态添加数据库中保存的用户自定义单位制的名称
if (radioGroup1.SelectedIndex == 2) { bool _Flag = true; sm.SetLciVisible(lciDelete, _Flag); sm.SetL ...
-
eg_5
问题描述:输入两个字符串,从第一字符串中删除第二个字符串中所有的字符. 例如,输入”They are students.”和”aeiou”,则删除之后的第一个字符串变成”Thy r stdnts.” ...
-
转:springboot(二):web综合开发
web开发 spring boot web开发非常的简单,其中包括常用的json输出.filters.property.log等 json 接口开发 在以前的spring 开发的时候需要我们提供jso ...
-
3dContactPointAnnotationTool开发日志(二五)
记录一下当前进度:
-
motan rpc
git : 帮助 文档 基本介绍 Motan是一套基于java开发的RPC框架,除了常规的点对点调用外,Motan还提供服务治理功能,包括服务节点的自动发现.摘除.高可用和负载均衡等.Motan具有 ...