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