AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过 ng-directives 扩展了 HTML。

The ng-app 定义 AngularJS 应用程序.(ng-app指令标记了AngularJS脚本的作用域

The ng-model 将 HTML 控件 （输入、 选择、 文本区域） 的值绑定到应用程序数据。.

The ng-bind 将应用程序数据绑定到 HTML 视图。.

1. AngularJS 表达式

1.1  AngularJS 指令是以 ng 作为前缀的 HTML 属性。AngularJS 使用 表达式 把数据绑定到 HTML。

1.2  ng-init 指令初始化 AngularJS 应用程序变量。(HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，可以使用 data-ng- 来让网页对 HTML5 有效。)

1.3  AngularJS 表达式写在双大括号内：{{ expression }}。

1.4 AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

2. AngularJS 指令

2.1 AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把应用程序数据绑定到 HTML 元素。

2.2 重复 HTML 元素

ng-repeat 指令会重复一个 HTML 元素.

通常情况下，不使用 ng-init。而是使用一个控制器或模块来代替它。

3. AngularJS 控制器

3.1 AngularJS 应用程序被控制器控制。

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。

控制器的 $scope 是控制器所指向的应用程序 HTML 元素。

ex:

<!DOCTYPE html>

<html>

<body>

<div ng-app="" ng-controller="personController">

名: <input type="text" ng-model="person.firstName"><br>

姓: <input type="text" ng-model="person.lastName"><br>

<br>

姓名: {{person.firstName + " " + person.lastName}}

</div>

<script>

function personController($scope) {

    $scope.person = {

        firstName: "John",

        lastName: "Doe"

    };

}

</script>

<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>

</body>

</html>

3.2 ng-controller 指令把控制器命名为 object。

函数 personController 是一个标准的 JavaScript 对象的构造函数。

控制器对象有一个属性：$scope.person。

person 对象有两个属性：firstName 和 lastName。

ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

4. AngularJS 过滤器

4.1 过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。

4.2  uppercase 过滤器格式化字符串为大写

      lowercase 过滤器格式化字符串为小写

      currency 过滤器格式化数字为货币格式

     orderBy 过滤器根据某个表达式排列数组

5. AngularJS Http

5.1  $http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

<!DOCTYPE html>

<html>

<body>

<div ng-app="" ng-controller="customersController"> 

<ul>

  <li ng-repeat="x in names">

    {{ x.Name + ', ' + x.Country }}

  </li>

</ul>

</div>

<script>

function customersController($scope,$http) {

  $http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php")

  .success(function(response) {$scope.names = response;});

}

</script>

<script src="http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>

</body>

</html>

6.AngularJS HTML DOM

6.1 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性

<div ng-app="">

<p>

<button ng-disabled="mySwitch">点我！</button>

</p>

<p>

<input type="checkbox" ng-model="mySwitch">按钮

</p>

</div>

ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。

ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）.

6.2 ng-show 指令隐藏或显示一个 HTML 元素。

<div ng-app="">

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

</div>

7. AngularJS HTML 事件

ng-click 指令定义了一个 AngularJS 单击事件

7.2  隐藏 HTML 元素

ng-hide 指令用于设置应用的一部分 不可见 。

ng-hide="true" 让 HTML 元素 不可见。

ng-hide="false" 让元素可见。

<div ng-app="" ng-controller="personController">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-hide="myVar">

名: <input type="text" ng-model="person.firstName"><br>

姓: <input type="text" ng-model="person.lastName"><br>

<br>

姓名: {{person.firstName + " " + person.lastName}}

</p>

</div>

<script>

function personController($scope) {

    $scope.person = {

        firstName: "John",

        lastName: "Doe"

    };

    $scope.myVar = false;

    $scope.toggle = function() {

        $scope.myVar = !$scope.myVar;

    };

}

</script>

personController的第一部分与控制器章节类似。

应用有一个默认属性: $scope.myVar = false;

ng-hide 指令设置应用中的元素不可见。

toggle() 函数用于切换 myVar 变量的值（true 和 false）。

ng-hide="true" 让元素 不可见。

8. AngularJS 模块

8.1 模块定义了应用程序,所有的控制器都应该属于一个模块,模块保持全局命名空间中的整洁。

8.2  常建议把所有的脚本都放置在 <body> 元素的最底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

 

 

Angular基础知识的更多相关文章

  1. Angular 4 学习笔记 从入门到实战 打造在线竞拍网站 基础知识 快速入门 个人感悟

    最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app. 环境&版本信息声明 运行ng -v @angular/ ...

  2. angular路由详解一（基础知识）

    本人原来是iOS开发,没想到工作后,离iOS开发原来越远,走上了前端的坑.一路走来,也没有向别人一样遇到一个技术上的师傅,无奈只能一个人苦苦摸索.如今又开始填angular的坑了.闲话不扯了.(本人学 ...

  3. CodeMix入门基础知识

    CodeMix在线订购年终抄底促销!火爆开抢>> CodeMix入门 CodeMix是一个Eclipse插件,可以直接从Eclipse访问VS Code和为Code OSS构建的附加扩展的 ...

  4. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  5. IM开发基础知识补课(四)：正确理解HTTP短连接中的Cookie、Session和Token

    本文引用了简书作者“骑小猪看流星”技术文章“Cookie.Session.Token那点事儿”的部分内容,感谢原作者. 1.前言 众所周之,IM是个典型的快速数据流交换系统,当今主流IM系统(尤其移动 ...

  6. Vue基础知识之vue-resource和axios

    Vue基础知识之vue-resource和axios  原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...

  7. nodejs+gulp+webpack基础知识

    nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...

  8. ros基础知识总结

    参考于:ros官网教程 实验楼:ros机器人操作系统自主学习实验 基础知识 1 一个catkin程序包由什么组成? 一个程序包要想称为catkin程序包必须符合以下要求: 该程序包必须包含catkin ...

  9. .NET面试题系列[1] - .NET框架基础知识(1)

    很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...

随机推荐

  1. iOS Xcode工程目录的 folder 和 group的区别(蓝色和黄色文件夹的区别)

    1. 来自 http://blog.csdn.net/fanjunxi1990/article/details/9352917 XCode工程目录里面,有时你会发现2个不同颜色的文件夹,一种是蓝色的, ...

  2. hdu 2059 龟兔赛跑（dp）

    龟兔赛跑 Problem Description 据说在很久很久以前,可怜的兔子经历了人生中最大的打击——赛跑输给乌龟后,心中郁闷,发誓要报仇雪恨,于是躲进了杭州下沙某农业园卧薪尝胆潜心修炼,终于练成 ...

  3. Sereja and Coat Rack(水)

    Sereja and Coat Rack Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I6 ...

  4. and then set HOMEBREW_GITHUB_API_TOKEN.

    andyMacBook-Pro:~ andy$ brew search redis hiredis   redis homebrew/nginx/redis2-nginx-module Error: ...

  5. 谈谈 css 的各种居中——读编写高质量代码有感

    css 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中,不同的居中用不同方法. 水平居中 1.行内元素水平居中(文本,图片) 给父层设置 text-align:center; ...

  6. oracle归档日志管理

    归档日志(Archive Log)是非活动的重做日志备份.通过使用归档日志,可以保留所有重做历史记录,当数据库处于ARCHIVELOG模式并进行日志切换式,后台进程ARCH会将重做日志的内容保存到归档 ...

  7. ASP.NET中怎样才能使自己的代码运行的效率更高

    一.网页设计相关: 1,做好页面布局和内容规划,只放置合适的内容,并尽可能使页面设计的最小. 2,使用好的网页编辑器,如DW,FP,不要用VS自带的编辑器,因为它会产生很多无用的沉余代码,而且设计的界 ...

  8. Java内部类总结

    内部类是一种编译器现象,与虚拟机无关.编译器将会把内部类翻译成用美元符号$分隔外部类名与内部类名的常规类文件,而虚拟机对此一无所知.编译器为了引用外部类,生成了一个附加的实例域this$0 为什么要用 ...

  9. mysql explain 命令简解

    参考官方文档地址: http://dev.mysql.com/doc/refman/5.7/en/explain.html 为什么用explain . 如果你的页面返回结果很慢,你就需要使用expla ...

  10. PSAM SAM

    第一个问题: 为什么要用SAM? 究竟谁最开始使用SAM这个词,已经无从考证,能够确认的是:这个世界上先有了PSAM,然后才有了SAM.由于网络状况的原因,或者是应用环境的要求,使用IC卡作为支付介质 ...