Angular.js定义以及指令学习

1.angularjs简介
AngularJS 是一款以前后端分离为优势的前端 JavaScript 框架,也有人将其称为MVC(model、view、controller)框架,AngularJS 通过 指令 扩展了 HTML.且通过 表达式 实现页面与js数据的双向绑定,采用路由(route)模式实现单页面跳转,AngularJS有着诸多特性,最为核心的是:MVC、模块化、双向数据绑定、语义化标签、依赖注入等等。
详情请查阅: https://baike.baidu.com/item/AngularJS/7140293?fr=aladdin

angular.js 版本下载: https://github.com/angular/angular.js/releases


2.基本指令的学习

ng-app指的是定义一个angularJS应用程序,位于应用程序的根元素下;

ng-model 指令把元素值(比如输入域的值)绑定到应用程序;

ng-bind 指令把应用程序数据绑定到 HTML 视图;

ng-controller 指令定义了应用程序控制器,一个应用可以有很多控制器;

angularJS中很多自带指定都是以ng开头,比如ng-show用于修改显示样式;ng-form作用于表单;ng-click用于监听事件等。

注意:在JavaScript中,语法不允许变量名使用连字符,所以使用了诸如ngApp,ngClass的驼峰命名,而在html中多以连字符形式书写。

3.AngularJS 路由以及模块配置

基本架构的组成

代码分以下个部分,index.html为视图文件,index.js为应用程序模块文件,angular.js和angular-route.js为angularJS框架文件。


4.配置路由

$routeProvider 用来定义路由表,我们会用到里面的when和otherwise两个方法

$routeParams 用来保存地址栏中的参数,也提供了通配某类地址的能力

$location 用来分析处理url

$ng-view 用来指定加载模板视图的区域,相当于提供了页面模板的挂载点,不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射,路由功能是由 routeProvider服务 和 ng-view 搭配实现。

5.when及otherwise详解

when方法能够接收两个参数,第一个参数是路由路径,这个路径会与$location.path()的值进行匹配,如果没有任何一个when方法匹配到,那么将会执行otherwise方法。第二个参数是配置对象,它的六个属性分别是controller,template,templateUrl,resolve,redirectTo,reloadOnSearch。

一般主要通过两个方法:

when():配置路径和参数;

otherwise:配置其他的路径跳转,可以想成default。

when的第二个参数:

controller:对应路径的控制器函数,或者名称

controllerAs:给控制器起个别名

template:对应路径的页面模板,会出现在ng-view处,比如"<div>xxxx</div>"

templateUrl:对应模板的路径,比如"src/xxx.html"

redirectTo:重定向地址

reloadOnSearch:设置是否在只有地址改变时,才加载对应的模板;search和params改变都不会加载模板

路由有几个常用的事件:

$routeChangeStart:这个事件会在路由跳转前触发

$routeChangeSuccess:这个事件在路由跳转成功后触发

$routeChangeError:这个事件在路由跳转失败后触发

由于时间有限,暂且搁笔,写的不深,还望朋友们提出宝贵意见,一起进步,谢谢!


猜你喜欢

转载自blog.csdn.net/lyl520_zyg1314/article/details/81016440