- 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. 磁盘工作原理与IO性能分析

    最近,在研究如何优化产品设备的磁盘IO性能,需要深入研究磁盘及文件系统原理和工作机制,下面简要总结下关于磁盘方面的东西,下篇文章再分享文件系统的. 机械磁盘结构: 无论哪种机械硬盘,都主要由盘片.磁头 ...

  2. mybatis系列笔记(3)---SqlMapConfig.xml解析

    SqlMapConfig.xml SqlMapConfig.xml是Mybatis的全局配置参数,关于他的具体用的有专门的MyBatis - API文档,这里面讲的非常清楚,所以我这里就挑几个讲下: ...

  3. 「征文」在 cordova 中使用极光统计服务

    写在前面:年前的时候,极光社区组织了一场征文活动 ,收到不少好的文章.现在打算和大家一起分享一下这些优秀的作品 :) 作者:Wilhan - 极光 原文:在 cordova 中使用极光统计服务 正文 ...

  4. jquery.datetimepicker.js 当鼠标离开时，不选中当前时间，以达到清空的目的

    validateOnBlur:true    当鼠标离开时,不选中当前时间,以达到清空的目的 使用方法:   // 时间设置         $('#BankProduct_sale_begin'). ...

  5. 记录一次EF优化

    问题描述:1.第一次加载过慢(EntityFramework 6 code-first).2.一段时间间不访问页面同样变慢. 原因分析:1.第一次启动(Code First)会对比程序中的Model与 ...

  6. CentOs下安装PHP环境的步骤

    前言 在CentOs环境下安装php开发环境,需要首先安装一些源文件,然后使用yum命令直接安装即可,在Fedora 20 源中已经有了PHP的源,直接可以使用以下命令安装即可: # yum inst ...

  7. 1491: [NOI2007]社交网络

    1491: [NOI2007]社交网络 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 881  Solved: 518[Submit][Status] ...

  8. 1682: [Usaco2005 Mar]Out of Hay 干草危机

    1682: [Usaco2005 Mar]Out of Hay 干草危机 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 391  Solved: 258[ ...

  9. 1651: [Usaco2006 Feb]Stall Reservations 专用牛棚

    1651: [Usaco2006 Feb]Stall Reservations 专用牛棚 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 566  Sol ...

  10. 字符编码的种类：ASCII、GB2312、GBK、GB18030、Unicode、UTF-8、UTF-16、Base64

    ASCII码ASCII:https://zh.wikipedia.org/wiki/ASCIIASCII(American Standard Code for Information Intercha ...