Angular.js学习笔记 (一)
- angular中最重要的概念是指令(directive)
- ng-model 是双向数据绑定的指令,效果就是将当前元素的value属性和模型中的[user.name]建立绑定关系
### 模块(Module)
- 我们可以通过angular.module创建一个模块
- angular.module方法传递两个参数才是创建模块,一个参数是获取模块
### 控制器(Controller)
-常用方法:<html lang="en" ng-app="HelloApp"></html>//ng-app属性是使用ng的前提
<div ng-controller="HelloController"></div>//ng-controller属性放在包裹标签上,控制包裹内代码
js代码中:
- var module = angular.module('HelloApp', [])
- module.controller('HelloController', ['$scope','$http', function(a,b) {
console.log(a);//打印的是$cope对象
}]);
- 通过$scope和视图关联
- $scope.$watch('/*要监视是否发生变化的值*/',function(now,old){
console.log(now);//现在输入的值
console.log(old);//输入之前的旧值
})
-这里推荐一个ng的插件:AngularJS Batarang,安装后可以在chrome控制台下发现ng调试工具
### 表达式(expression)
{{}}
AngularJS表达式很像JavaScript表达式, 它们可以包含
文字、运算符和变量 如 {{ 5 + 5 }} 或 {{ firstName + ‘-’ + lastName }},
数字{{ 100 + 100 }},
字符串{{ 'hello' + 'angular'}} ,
对象{{ zhangsan.name }} ,
数组{{ students[10] }}
对比 JavaScript 表达式:
相同点: AngularJS 表达式可以包含字母,操作符,变量。
不同点: AngularJS 表达式可以写在 HTML 中。 AngularJS 表达式不支持条件判断,循环及异常。 AngularJS 表达式支持过滤器。
### 解决ng在加载页面时先出现表达式的bug
<style>
/* ng-cloak指令就是在NG执行完毕过后自动移除 */
[ng-cloak],
.ng-cloak {
display: none;
}
</style>
<body ng-app class="ng-cloak"></body>或者<body ng-app ng-cloak></body>
本文转自:http://www.cnblogs.com/lm970585581/archive/2017/04/06/6672367.html
Angular.js学习笔记 (一)的更多相关文章
- Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- Angular.js 学习笔记
AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...
- Angular JS 学习笔记(二)
1. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定 ...
- Angular JS 学习笔记(一)
1. 菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 2. Angular JS中文网:http://www.apjs.net ...
- Angular.js学习笔记(三)
一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...
- Angular.js学习笔记 (二)
用A链接对象解析url的组成 var url = 'https://www.baidu.com:8080/aaa/1.html?id=10#name'; var aLink = document.cr ...
- angular.js学习笔记--概念总结
好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $root ...
- angular.js学习笔记:实现商品价格计算实例
<!DOCTYPE html> <html lang="en" ng-app> <!-- ng-app:初始化的指令 也可以解析局部--> &l ...
- angular.js学习笔记(二)
1.安装core ,shared模块 ng g m core ng g m shared 2.在shared中导入core模块 core模块只加载一次所以将公共组件放到core中 3.创建公共组 ...
随机推荐
- JQUERY写大图轮播;附jquery的hover()方法、animate()方法、find()方法
思想:黑框设置超出部分隐藏. 红框往左移动,通过判断红框左边框距离黑框左边框的像素值,来实现红框的移动. 绿框在最上层,放每张图片的说明和序号. 一:html部分(大框.图片部分.箭头部分.图片介绍部 ...
- 视频直播SDK-ios版
IOS视频直播接入说明 一.名词解释 分辨率:用于计算机视频处理的图像,以水平和垂直方向上所能显示的像素数来表示分辨率.常见视频分辨率的有1080P即1920x1080,720P即1080x720,6 ...
- MySQL优化-一 、缓存优化
body { font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.6; padding-top: 10 ...
- 代写编程的作业、笔试题、课程设计,包括但不限于C/C++/Python
代写编程作业/笔试题/课程设计,包括但不限于C/C++/Python 先写代码再给钱,不要任何定金!价钱公道,具体见图,诚信第一! (截止2016-11-22已接12单,顺利完成!后文有成功交付的聊天 ...
- C/C++ char数组存储字符串内存地址
问题描述: #include <stdio.h> int main(void) { //program 6.3 Arrays of strings ][]; ;i<;++i){ ;j ...
- sql 删除重复数据,保留重复数据第一条
SELECT row=ROW_NUMBER() OVER(PARTITION BY 重复字段一,重复字段二 ORDER BY GETDATE()) ,* FROM 筛选重复表名 具体实现如 ...
- 迷茫<第一篇:初到北京>
时光如梭,毕业四年了,遥想当年刚毕业的场景就像是昨天发生一样,这四年的人生,就是在不停的漂泊,不断的受挫.感慨良多,一言难以说尽. 2013年11月29号毕业,刚到北京的第二天我就顺利的找到了工作, ...
- 前端资讯周报 3.6 - 3.12: 对学习Javascript最有帮助的三本书,以及HTML标题的迷思
每周一我都会分享上一周我订阅的技术站点中,和解决问题的过程中阅读到的值得分享的文章. 毕竟个人的阅读量有限,也欢迎大家留言或者私信给我你们阅读到的,对你们前端技术有帮助的任何内容,题材不限,语言不限. ...
- Hibernate二级缓存原理
缓存:缓存是什么,解决什么问题? 位于速度相差较大的两种硬件/软件之间的,用于协调两者数据传输速度差异的结构,均可称之为缓存Cache.缓存目的:让数据更接近于应用程序,协调速度不匹配,使访问速度更快 ...
- 用C写一个web服务器(一) 基础功能
.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...