大佬教程收集整理的这篇文章主要介绍了AngularJS系列——扩展模块-动画、表单验证、路由，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

1. angular-animate

* Angular动画是通过操作**css transition动画**样式实现动画效果的

* 使用

* 引入angular-animate.js

* 引入模块依赖: angular.module('myApp',['ngAnimate'])

* 定义显示状态和隐藏状态class

```

/*显示状态下的样式*/

div {

transition: all linear 0.5s; /*过渡动画*/

}

/*隐藏状态下的样式*/

.ng-hide {

}

```

* 通过ng-show/ng-hide来控制元素的显示与隐藏

```

<divng-hide="mycheck"></div>

```

2. angular-@R_450_8798@ges

* angular进行**表单验证**的扩展库(插件)

* 指定验证规则的指令

* ng-required="true"

* ng-minlength="4"

* ng-maxlength="8"

* ng-pattern="/^[a-zA-Z]/"

* type='email'

* type='url'

* min="10"

* max="100"

* 显示提示信息的指令

* ng-@R_450_8798@ges

* ng-@R_450_8798@ge

* ng-show

* ng-bind

* ng-class

* 注意:

* form和input都必须有name属性

* <input>必须有ng-model

3. angular-route

* 对**单页应用SPA**来讲，路由用来管理用户在使用过程中看到的多个界面

* 使用

* 引入angular-route.js

* 引入模块依赖: angular.module('myApp',['ngRoute'])

* 定义module对象(app.js)

```

window.module = angular.module('myApp',['ngRoute'])

```

* 定义路由template页面

* list.html

```

<ul>

<li ng-repeat="id inids">

<ahref="#/detail/{{iD}}">ID{{iD}}</a>

</li>

</ul>

```

* detail.html

```

<p>Route {{iD}}:detail.html</p>

```

* 定义路由controller

* ListCtrl.js

```

window.module.controller('ListController',['$scope',

function($scopE) {

$scope.ids = [1,2,3,4,5,6]

}])

```

* DetailCtrl.js

```

window.module.controller('DetailController','$routeParams',

function($scope,$routeParams) {

$scope.id = $routeParams.id

}])

```

* 注册路由(appRoute.js)

```

window.module.config(['$routeProvider',function($routeProvider) {

$routeProvider

.when('/list',{

templateUrl:'src/templates/list.html',//从index.html查找

controller: 'ListController'

})

.when('/detail/:id',{

templateUrl:'src/templates/detail.html',

controller: 'DetailController'

})

.otherwise('/list')

}])

```

* 主js启动应用(main.js)

```

window.angular.bootstrap(document,['myApp'])

```

* 主页(test.html)

```

<div>

<h1>Route Demo</h1>

<ng-view></ng-view>

</div>

<script type="text/javascript"src="../../../../js/angular-1.5.5/angular.js"></script>

<script type="text/javascript"src="../../../../js/angular-1.5.5/angular-route.js"></script>

<script type="text/javascript"src="src/app/app.js"></script>

<script type="text/javascript"src="src/controllers/ListCtrl.js"></script>

<script type="text/javascript"src="src/controllers/DetailCtrl.js"></script>

<script type="text/javascript"src="src/route/appRoute.js"></script>

<script type="text/javascript"src="src/main.js"></script>

```

大佬总结

以上是大佬教程为你收集整理的AngularJS系列——扩展模块-动画、表单验证、路由全部内容，希望文章能够帮你解决AngularJS系列——扩展模块-动画、表单验证、路由所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。