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.创建公共组 ...
随机推荐
- 每天一个Linux命令（08）--cp命令
cp命令用来复制文件或者目录,是Linux系统中最常用的命令之一.一般情况下,shell会设置一个别名,在命令行下复制文件时,如果目标文件已经存在,就会询问是否覆盖,不管你是否使用-i参数.但是如果是 ...
- Redis简单配置和使用
学到Redis中需要整理和配置的东西比较多,资源也是比较分散!这次的主要还是将知识整合一下,开发过程中所需要的资源整合一下,也方便今后涉及到这块地方的知识时,将时间大量浪费在了找这些资源上了! 一.R ...
- Java基本数据类型及其封装器的一些千丝万缕的纠葛
一些概念 想必大家都知道Java的基础数据类型有:char.byte.short.int.long.float.double.boolean 这几种,与C/C++等语言不同的是,Java的基础 ...
- Yii前台后台登录混淆问题
我们在用yii开发项目时候,如果前后台使用modules实现 那么 做登录时候用户名就会出现前后台登录混淆的事情 于是可以在adminModule.php文件中做个设置 public function ...
- Xpath定位总结
先贴上练习xpath的地址:http://www.w3school.com.cn/example/xmle/books.xml 或则也可以使用百度进行练习 1.相对定位与绝对定位 //表示相对定位,对 ...
- 寻找与疾病相关的SNP位点——R语言从SNPedia批量提取搜索数据
是单核苷酸多态性,人的基因是相似的,有些位点上存在差异,这种某个位点的核苷酸差异就做单核苷酸多态性,它影响着生物的性状,影响着对某些疾病的易感性.SNPedia是一个SNP调査百科,它引用各种已经发布 ...
- JavaScript 图片轮播入门
轮播要求:一个在页面居中的矩形框,图片依次从矩形框中经过 当图片完整占满矩形框时 停留一小段时间再向左边移动经过矩形框的图片自动跑到右边最后一个图的后面.核心原理:在一个for循环中利用offsetl ...
- RxJava 笔记
前言 目前 RxJava 是安卓开发圈内最流行的库之一,本来准备研究研究,但看了扔物线写的<给 Android 开发者的 RxJava 详解>后,觉得生无可恋,哦不,是觉得已经写无可写. ...
- ubuntu14.04下chrome浏览器的安装
ubuntu 64位 1.下载chrome安装包: sudo wget https://dl.google.com/linux/direct/google-chrome-stable_current_ ...
- nginx错误记录
症状: 安装phpBB3.1的最后一步完成安装之后,注册用户,浏览器崩溃.localhost的所有页面都打不开同时没有响应. Trace: 虽然打开了nginx.exe,但是进程中未发现服务. 重新电 ...