AngularJS是为了克服html在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。
AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:
使用双大括号{{}}语法进行数据绑定;
支持表单和表单的验证;
能将逻辑代码关联到相关的DOM元素上;
能将HTML分组成可重用的组件。
AngularJS的出现就是为了解决页面上频繁的DOM操作。可以构建完整的CRUD(增加Create、查询Retrieve、更新Update、删除Delete)的应用。
构建一个CRUD应用可能用到的全部内容包括:数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。
AngularJS的架构思想:MVVM(model,view,viewmodel)
AngularJS中的数据绑定分为单向绑定和双向绑定,其中ng-model是双向绑定,这种绑定的方式会互相影响,模型的改变影响视图,视图的改变影响模型。
$scope方式实现的绑定是单向绑定。模型影响视图。
AngularJS的引入:
<script src="js/angular.min.js"></script>
简单常用的语法:
ng-app="mainApp" 绑定在最外层根元素上(主模块),比如<html ng-app="...">
ng-controller:确定作用域
ng-model="name" 把名字叫name的属性绑定到viewmodel中
ng-model="name" 把名字叫name的属性绑定到viewmodel中
ng-repeat:循环
{{name}} 把view中的数据显示在视图上
ng-model是双向绑定
$scope是单向绑定
循环:
ng-repeat
{{name}} 把view中的数据显示在视图上
ng-model是双向绑定
$scope是单向绑定
循环:
ng-repeat
AngularJS在script中的应用:
<script>
加载主模块:
var indexApp=angular.module("indexApp",[]);
创建作用域:
indexApp.controller("Index",function($scope,$http) {
定义变量:
$scope.age=20
}
</script>
<script>
加载主模块:
var indexApp=angular.module("indexApp",[]);
创建作用域:
indexApp.controller("Index",function($scope,$http) {
定义变量:
$scope.age=20
}
</script>
html中:
确定作用域:
<body ng-controller="Index">
作用域内:
<p>{{age}}</p>
循环:
<tr ng-repeat="stu in stuAll">
<td>{{stu.s_id}}</td>
<td>{{stu.s_name}}</td>
<td>{{stu.s_age}}</td>
</tr>
确定作用域:
<body ng-controller="Index">
作用域内:
<p>{{age}}</p>
循环:
<tr ng-repeat="stu in stuAll">
<td>{{stu.s_id}}</td>
<td>{{stu.s_name}}</td>
<td>{{stu.s_age}}</td>
</tr>
方法的定义和调用:
$scope.init=function(){};
ng-blur="init()"//直接调用:$scope.init()
angularjs中提交数据的方式有两种,get,post
get请求:
$http.get("/users/init?username=abc").success(function(){ })
post请求:
$http.post("/users/postdata",{username:abc}).success(function(){ })
post请求:
$http.post("/users/postdata",{username:abc}).success(function(){ })
内置的过滤器:
{{5000|currency}} //将前面的数字过滤成钱的形式,默认为$,结果为:$5,000.00
{{5000|currency:"¥"}} //结果为:¥5,000.00
{{date|date:"yyyy-MM-dd HH:mm:SS"}}//过滤成日期并指定日期格式
{{abcArray|filter:6}}//查询数组中有6的项
{{name|orderBy: “...”}}//按照"..."排序
内置方法:
ng-class="{red:true}"//为元素绑定类名
ng-style://设置样式(如:ng-style=“{background:'blue'}”)
ng-show="true/false" ng-show="num>1"//设置元素是否显示,可以跟条件
ng-checked="true/false"//设置单选钮,复选框是否是选中状态
ng-selected="true/false"//设置下拉列表是否是选中状态
ng-click//点击事件
<img ng-src="{{url}}">//ng-src的作用是当网络原因导致图片还没有被加载出来时,不会出现带×的图片
angularjs中的模块化:
angularjs要实现单页面应用,需要用到模块化
模块化需要引进的js文件有:
<script src="js/angularjs_module/angular.min.js"></script>//主文件
<script src="js/angularjs_module/angular-route.min.js"></script>//配置路由的文件
<script src="js/module/reg/reg.js"></script>//模块的JS
模块化中,将路由配置在main.js中
main.js中的配置:
var mainApp=angular.module("mainApp",["ngRoute","regModule","loginModule","studentModule"]);//加载主模块及其他模块
mainApp.config(["$routeProvider",function($routeProvider){
$routeProvider.when("/reg",{templateUrl:"js/module/reg/reg.html",controller:"regController"})//配置路径及控制范围
$routeProvider.otherwise({
redirectTo:"/reg"
})//设置主页面中默认显示的模块
}//每个模块的路径配置
主页面中可替换的区域用:ng-view
$location.path("/login")//设置跳转到的模块