a simple search with AngularJS and PHP

最新推荐文章于 2021-03-27 11:40:47 发布

ztguang

最新推荐文章于 2021-03-27 11:40:47 发布

阅读量367

点赞数

分类专栏： Web技术/服务计算

本文链接：https://blog.csdn.net/ztguang/article/details/51016540

版权

Web技术/服务计算专栏收录该内容

197 篇文章 0 订阅

订阅专栏

http://www.keyboardninja.eu/webdevelopment/a-simple-search-with-angularjs-and-php

Recently I found AngularJS, a so called “Superheroic Javascript MVC framework” by Google?.
I must say I am impressed by its simple, readable and quick way of working.

This framework is smart, very smart. Go have a look when you’re ready on the AngularJS site. Especially the basics tutorial is worth watching for beginners.

I have created a simple search form with a PHP back end and AngularJS to handle the request and response.
It’s divided in three elements:

The form
The AngularJS script
The server-side script

You can copy paste the source code from below or have a look at this DEMO.

The Form (searchform.htm)

点击(此处)折叠或打开

<!DOCTYPE html>
<html ng-app>
<head>
<title>Search form with AngualrJS</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>
<script src="search.js"></script>
</head>
<body>
<div ng-controller="SearchCtrl">
<form class="well form-search">
<label>Search:</label>
<input type="text" ng-model="keywords" class="input-medium search-query" placeholder="Keywords...">
<button type="submit" class="btn" ng-click="search()">Search</button>
<p class="help-block">Try for example: "php" or "angularjs" or "asdfg"</p>
</form>
<pre ng-model="result">
{{result}}
</pre>
</div>
</body>
</html>