Angular JS

在了解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'"

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值