angularjs基础
2017-01-03 本文已影响0人
mkmolecule
简介
AngularJS诞生于2009年，由Misko Hevery 等人创建（后为Google所收购），是一个为动态WEB应用设计的结构框架。简称ng，为克服HTML在构建应用上的不足而设计。它通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用数据绑定 和 依赖注入，它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现，这也使得它能够完美地和任何服务器端技术结合。有了这一类框架就可以轻松构建 SPA 应用程序
SPA: Single Page Application
单页面应用
AngularJS的特点
- MVC
- 模块化
- 双向数据绑定
- 依赖注入
- 指令系统
AngularJS的优点
- Angular 最大程度的减少了页面上的 DOM 操作；
- 让 JavaScript 中专注业务逻辑的代码；
- 通过简单的指令结合页面结构与逻辑数据；
- 通过自定义指令实现组件化编程；
- 代码结构更合理；
- 维护成本更低；
使用方法
首先需要引入angularjs文件
<script src="angular.js"></script>
-
ng-app
//定义angular程序的作用范围,一般写在html标签上（也可以写在其他地方），一个页面可以出现多个ng-app，但一般来说只用一个
<html ng-app = "app"></html>
-
ng-controller
//ng-controller在ng-app的作用范围中在划分一个小的作用域，一个ng-app中能有多个ng-controller。ng-controller之间可以是兄弟关系（并排），也可以是父子关系（嵌套）；
<body ng-app="app">
//兄弟关系
<div ng-controller="aCtrl"></div>
<div ng-controller="aCtrl"></div>
//父子关系
<div ng-controller="cCtrl">
<div ng-controller="c1Ctrl"></div>
</div>
</body>
-
{{表达式}}
//表达式用两个大括号来定义，把需要的渲染的数据写在大括号中，就可以显示在控制器的中定义好的数据（结合例子1-1，在indexCtrl定义的name，只能在<div ng-controller="indexCtrl">中显示，不能在<div ng-controller="index2Ctrl">中显示）。表达中，可以绑定字符串，数组，对象，数字，布尔值，也可以是一个三目运算表达式，或其他表达式，如bool = ！bool等；
示例1-1：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="angular.js"></script>
<body ng-app="wscats">
<!--ng-app定义angular程序的作用范围-->
<div ng-controller="indexCtrl">
<!--ng-controller在ng-app的作用范围下再划分一个小的作用域-->
<p>{{name}}</p>
<!--表达式用两个大括号来定义，把我们需要绑定数据的名字放在里面我们就可以渲染控制器里面定义好的值-->
<div>{{ABC}}</div>
<!--我们可以再表达式里面用+字符串拼接，数字运算或者三元表达式-->
<!--甚至我们可以把表达式放在属性值身上渲染-->
<p>{{arr[0]+arr[1]}}</p>
<p>{{obj.name}}</p>
<p>{{num+10}}</p>
<p>{{bool}}</p>
<p id="{{name}}" class="{{className}}"></p>
</div>
<div ng-controller="index2Ctrl">
<p class="{{bool?"a":"b"}}">{{bool?"a":"b"}}</p>
<button ng-click="bool=!bool">toggle</button>
</div>
</body>
<script>
//MVC model模型 view视图 controller控制器
//document.getElementById("p").innerHTML = arr[0];
var app = angular.module("wscats",[]);
app.controller("indexCtrl",function($scope){
//绑定字符串
$scope.name = "wscatFHFHGF";
$scope.ABC = "abc";
//绑定数组
$scope.arr = ["a","b","c"];
//绑定对象
$scope.obj = {
name:"ABCDASDAS",
}
//绑定数字
$scope.num = 12233;
//绑定布尔值
$scope.bool = true;
$scope.className = "pClass";
})
app.controller("index2Ctrl",function($scope){
$scope.name = "second name";
$scope.bool = false;
})
</script>
</html>
