- 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学习笔记 (一)的更多相关文章

  1. Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  2. Angular.js 学习笔记

    AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...

  3. Angular JS 学习笔记(二)

    1. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定 ...

  4. Angular JS 学习笔记(一)

    1. 菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 2. Angular JS中文网:http://www.apjs.net ...

  5. Angular.js学习笔记(三)

    一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...

  6. Angular.js学习笔记 (二)

    用A链接对象解析url的组成 var url = 'https://www.baidu.com:8080/aaa/1.html?id=10#name'; var aLink = document.cr ...

  7. angular.js学习笔记--概念总结

    好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $root ...

  8. angular.js学习笔记:实现商品价格计算实例

    <!DOCTYPE html> <html lang="en" ng-app> <!-- ng-app:初始化的指令 也可以解析局部--> &l ...

  9. angular.js学习笔记(二)

    1.安装core ,shared模块 ng g m core  ng g m shared 2.在shared中导入core模块   core模块只加载一次所以将公共组件放到core中 3.创建公共组 ...

随机推荐

  1. 读书笔记 effective c++ Item 25 实现一个不抛出异常的swap

    1. swap如此重要 Swap是一个非常有趣的函数,最初作为STL的一部分来介绍,它已然变成了异常安全编程的中流砥柱(Item 29),也是在拷贝中应对自我赋值的一种普通机制(Item 11).Sw ...

  2. 使用jQuery快速高效制作网页特效-----------------------------之jQuery事件与动画

    1.基础事件 分为三个事件 1.1 window事件 所谓window事件,就是当用户执行某些会影响浏览器的操作时,而触发的事件. 1.2 鼠标事件 鼠标事件顾名思义就是当用户在文档上移动或单击鼠标时 ...

  3. Pdf File Writer 中文应用(PDF文件编写器C#类库)

    该文由小居工作室(QQ:2482052910)    翻译并提供解答支持,原文地址:Pdf File Writer 中文应用(PDF文件编写器C#类库):http://www.cnblogs.com/ ...

  4. Tp框架 之对控制器的一些操作等

    在浏览器中输入tp框架入口文件的地址,如图 要注意,localhost/后面跟的是www的下一级,tp文件的上一级,因为我直接把tp文件做成了www目录的下一级,所以我写的地址localhost后面跟 ...

  5. 或许是介绍Android Studio使用Git最详细的文章

    欢迎访问我的个人博客转发请注明出处:http://www.wensibo.top/2017/03/12/GitOnAS/ 前言 本文较长,图片很多很多,流量党慎入 使用Git已经有一段时间了,但是之前 ...

  6. 微信开源PHP商城系统一处blind xxe(无需登录,附POC)

    测试版本wemall 3.3 下载地址 http://git.oschina.net/einsqing/wemall/repository/archive?ref=master 需要开源中国的账号 c ...

  7. win10如何合并硬盘分区

    好多人都会讲电脑硬盘分成几个不同的区,以方便自己的资料的存储和查找,但不少人不知道如何合并已经分出的硬盘分区.以下是我的经验,与大家分享: 1.   首先,右击“此电脑”,在弹出来的右键菜单这种选择“ ...

  8. 1257: [CQOI2007]余数之和sum

    1257: [CQOI2007]余数之和sum Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 2001  Solved: 928[Submit][Sta ...

  9. Tyvj P1813 [JSOI2008]海战训练

    P1813 [JSOI2008]海战训练 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 为了准备高层峰会,元首命令武装部队必须处于高度戒备.警察将监视每一条 ...

  10. iOS程序进入后台,延迟指定时间退出

    程序进入后台,延迟指定时间退出 正常程序退出后,会在几秒内停止工作:要想申请更长的时间,需要用到beginBackgroundTaskWithExpirationHandlerendBackgroun ...