您的位置：首页 > Web前端 > JavaScript

Angular JS

2016-03-29 13:33 302 查看

在了解JavaScript，jQuery的基础上，对Angular JS应该熟悉的比较快。

首先，推荐一个菜鸟课程：http://www.runoob.com/ 对了解Angular JS的原理，以及如何使用就很清楚。

1.Angular JS的原理

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

一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序；

在大型的应用程序中，通常是把控制器存储在外部文件中。

2.Angular JS的命令

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

<div ng-app></div>：指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"；

ng-init 指令初始化应用程序数据，使用 ng-init 不是很常见；

ng-init="points=[1,15,19,2,40]"数组；

ng-model ：指令把元素值（比如输入域的值）绑定到应用程序。

一个例子：

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：

AngularJS 实例

<style>

input.ng-invalid {

background-color: lightblue;

}

</style>

<body>

<form ng-app="" name="myForm">

输入你的名字:

<input name="myAddress" ng-model="text" required>

</form>

3.Angular JS可以做哪些事

3.1更改MVC模型中的css-------

推荐：http://www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html 其中的三种方法我都试过可行。

<div class="{{classname}}>test1</div> 对应：$scope.classname="你定义的css类"
<div ng-class="{true:'classname1',false:'classname2'}[isActive]>test2</div> 对应：$scope.isActive=true或false
<div ng-class="{'classname1':isClassname1,'classname2':isClassname2,'classname3':isClassname3}"></div>对应：$scope.isClassname1=true;或设置其他的css类为true

3.2获取后台数据，更新前台信息

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

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

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

我是这么做的demo：

首先模拟后台数据,比如json：

var txt=‘{”books":[{"name":"java","price":"10"},{"name":"c++","price":"15"}]}';

然后解析后台数据

var obj=eval("("+txt+")");

obj就是一个对象数组，这样取值：obj.books[0].name。

3.3 ng-include 包含HTML

客户端包含：格式：ng-include="'xxx.html'"

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航