在AngularJs中父子页面如何相互调用方法和接收值

因为AngularJs用的人不多，我发现网上关于这方面的文章不多，所以我分享一下在AngularJs中是如何调用和接收的。

<app-dialog></app-dialog>其中dialog是子页面文件夹的名字，只需要把这个标签放在父页面中需要的地方即可。[sessionId]='sessionId'，sessionId是父页面中的值，需要传到子页面中去的，父页面中的sessionId是需要定义的，而子页面需要这样来接收父页面中的sessionId，

'#dialogfile'相当于给子页面添加了一个id，在父页面中可以直接通过这个id来接收子页面的值和调用子页面的方法(如果是调用子页面的方法的话，方法名后面是需要加括号的)，在父页面中需要这样来定义，

最后是子页面调用父页面的方法。

其中'this'指的就是父页面，而[parent]则是需要在子页面定义的一个名字可以随意更改，

记住调用父页面的方法，方法名后面是需要加括号的，如果有参数的话，直接写在括号里面就好。

Authentication

用户的验证服务是任何一个后台都必备的功能，现在WebAPI验证服务国际化的标准很多,我分析了一下各种开发语言轮子对于这些标准的支持力度，整理了用得比较多的3个标准：

Session

这是常规后台使用的验证方式，后台提供登录/登出的接口，同时保持一个会话在服务端，后续的web请求都是基于该会话的存在，优点是对于后端来说实现比较简单，比较容易实现对于用户权限的控制，缺点是用到了Cookie，对于基于RestfulAPI实现的后台系统来说，原则上是不允许使用到session和cookie的，所以有些固执的轮子例如(php-yii)就明确表示不支持

HTTP Basic Auth

参见维基的解释,每一个web请求头中，都将Username/Password通过base64加密，后端解密验证，优点是简单，基本每个轮子都支持，缺点是没有登录/登出，而且每次请求都会把密码传过去，总感觉安全性有问题(其实没什么问题），所以生产环境一般很少用，测试环境用用挺好。

Oauth 2

这是一个完美的验证方案，参见官方介绍，大概的原理是客户端首先向验证服务器申请一个令牌(token)，然后通过token登录到后台，后台与验证服务器通讯验证token合法性、时效性、权限。目前广泛被应用于开放平台的认证服务中，而阿里云后台是采用AngularJS书写的，他们的验证服务就是采用Oauth2。优点是验证和后台分离、各轮子都支持，缺点是实现复杂

AngularJS

AngularJS(后文将简称ng)是目前比较流行的Web前端框架，它的最大特点就是数据绑定

由于这个特点，用它来做后台的前端框架是最合适的，model将数据从后端取下来，通过数据绑定渲染到view，再通过bootstrap装饰一下template，一个高大上的后台系统就能快速实现。

我们这里使用的是ng1.3，按照官方说明，1.3开始已经不再兼容IE8

Note: AngularJS 1.3 has dropped support for IE8. Read more about it on our blog. AngularJS 1.2 will continue to support IE8, but the core team does not plan to spend time addressing issues specific to IE8 or earlier.

CORS

Cross-Origin Resource Sharing(跨域资源共享),我们用Ajax发送WEB请求，只要是跨域访问就会遇到这个问题，解决方法是后端在HTTP响应头里面加入Access-Control-Allow-Origin等标签，一般轮子都会有开发者提供此功能插件。

顺带谈谈jsonp，在CORS没有诞生之前，发明这个技术来解决跨域问题的程序员真是个天才！客户端书写一个callback函数，ajax请求时将这个callback函数名带个服务器，服务器返回数据时，顺带去执行这个callback，由于是服务器主动去执行这个callback，就绕开了跨域问题。目前jsonp已经逐渐废弃了，一个是因为非官方出品，不是所有浏览器都支持，另一个原因jsonp只能解决GET请求的跨域。

Postman

访问官方网站，postman是一个chrome浏览器的插件，可以很方便的测试RestfulAPI

实现原理

AngularJS+RestfulAPI+BasicAuth+Python/PHP/Node.JS来实现一个最简单的新闻管理后台。

业务要求：提供基本的后台登录/登出、实现新闻的CRUD、分页、搜索。

数据库建模

列名

字段

含义

说明

idintIDPK

titlevarchar(100)标题NN

contenttext内容N

create_timedatetime创建时间NN

制定协议

URI

请求方式

返回

功能

/auth/infoGET{userid:int,username:string}用户验证

/news/POSTNULL新闻-创建

/news/?page=int&search=strGET见下文备注新闻列表-读取

/news/:id/GET{id:int,title:str,content:str,create_time:str}新闻-读取

/news/:id/PUTNULL新闻-更新

/news/:id/DELETENULL新闻-删除

/news/deletes/?ids=int,intDELETENULL多条新闻-删除

备注：新闻列表-读取

请求参数：page显示第几页,search搜索关键字

返回数据：

{

total_count:int, //总记录数

page_count:int, //总页数

next:bool,//是否有下页

previous:bool,//是否有上页

results:[], //结果集

}1234567

后台实现

效果图

源码演示

源码是跨平台的，这里选用的演示环境是Win7

前端

1) 安装IIS

2) 指定虚拟目录admin到client/

3) 访min/即可（注意，如果使用IE浏览器，要IE9以上内核）

后端-Python

1) 安装soft/python-2.7.3.msi

2) 安装soft/Django-1.9.1.tar.gz (解压以后命令行执行 setup.py install)

3) 安装soft/django-rest-framework-master.zip (解压以后命令行执行 setup.py install)

4) 安装soft/django-cors-headers-master.zip (解压以后命令行执行 setup.py install)

5) server-python目录下执行 manage.py runserver

后端-PHP

1) 安装soft/vcredist_x64.exe (php要求的vc11运行环境)

2) 安装soft/php-5.6.16-Win32-VC11-x64.zip (解压即可)

3) 将php目录加入到系统环境变量Path中

4) server-php目录下执行 php -S 127.0.0.1:8000

注意，该PHP压缩包中的php.ini我做过了一些修改：

extension=php_pdo_sqlite.dll #增加sqlite支持

always_populate_raw_post_data = -1 #新版PHP-win对于POST处理的旧函数有过期警告，会导致CORS中断，这里禁用该警告，linux下PHP5.6无此问题

date.timezone = ‘Asia/Shanghai’ #纠正时区

后端-Node.js

1) 安装soft/node-v5.0.0-x64.msi

2) server-nodejs目录下执行如下指令

>set PORT=8000

>npm start

---