实例

来源：互联网发布：mysql直接复制数据文件编辑：程序博客网时间：2024/05/04 15:09

webstorm代码提示

在 head 里面添加：<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
鼠标放到这行 URL 上面后，你会发现这行代码的开头会出现一个灯泡，点击它之后会出现 download 选项，下载完成之后这个库就会自动添加到当前项目

webstorm自定义模板

Settings-> Editor->File and Code Templates

webstorm设置编码

File----Settings-----editer---fileencoding中设置

1. ng-app ng-model 双向绑定

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="">     <p>名字 : <input type="text" ng-model="name"></p>     <h1>Hello {{name}}</h1></div></body></html>

2. ng-init ng-bind 单向绑定

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><div ng-app="" ng-init="firstName='a'">    <p>姓名为<span ng-bind="firstName"></span></p>      
    <p>姓名为  {{ firstName}}  </p>   // 效果同上
</div>

3. ng-controller 控制器

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><div ng-app="myApp" ng-controller="myCtrl">           // app名   控制器名    名: <input type="text" ng-model="firstName"><br>    姓: <input type="text" ng-model="lastName"><br>    <br>    姓名: {{firstName + " " + lastName}}</div><script>    var app = angular.module('myApp', []);   // app名    app.controller('myCtrl', function($scope) {   // 控制器名        $scope.firstName= "John";        $scope.lastName= "Doe";    });</script>

4. ng-repeat

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><div ng-app="" ng-init="arr=['a','b','c']">    <ul>        <li ng-repeat="x in arr">            {{x}}        </li>    </ul></div>

5. 自定义指令 <my></my>

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><div ng-app="myApp">   <my></my>   <!--自定义指令--></div><script>    var app=angular.module("myApp",[]);    app.directive("my", function () {        return{            template:"<h1>自定义指令3241</h1>"           };    })</script>

6.过滤器 {{name | lowercase }}

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><div ng-app="" ng-init="name='AaBb'">    {{name|lowercase}}</div>

7.过滤器 filter orderby

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><div ng-app="" ng-init="names=[    {name:'aAb',country:'Norway'},    {name:'cCc',country:'China'},    {name:'bBB',country:'Japan'}]">    <input type="text" ng-model="test">    <!--双向绑定，把输入的结果过滤出来-->    <ul>        <li ng-repeat="x in names | filter:test | orderBy:'country'">            {{(x.name | lowercase) +' '+ (x.country | uppercase)}}        </li>    </ul></div>

8. AngularJS 服务 Service ： $scope,$location,$http等30多个

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><div ng-app="a" ng-controller="ctrl">    {{myUrl}}</div><script>    var app=angular.module('a',[]);    app.controller('ctrl', function ($scope,$location,$http) {    //    $scope.myUrl=$location.absUrl();     // 获取全部路径  详情查AngularJS 服务 Service        $http.get("1.html").then(function (response) {  // 读文件 读json url            $scope.myUrl=response.data;        })    })</script>

9. 自定义服务，注意没有$前缀。可以都写成 $testService 这样像一点！

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><div ng-app="a" ng-controller="ctrl">    {{res}}</div><script>    var app=angular.module('a',[]);    app.service('testService', function () {   // 自定义服务        this.join= function (a,b) {   // 面向对象中的方法            return a*b;        }    });    app.controller('ctrl', function ($scope,testService) {   // 自定义服务没有 $符号        $scope.res=testService.join(10,3);    })</script>

10.ng-option 其他例子看手册

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><div ng-app="test" ng-controller="ctrl">   <select ng-model="res" ng-options="x.name for x in lists">   </select><br/>    {{res.name}}<br/>     <!-- 这里要对应  ng-model的值 res  -->    {{res.url}}</div><script>var app=angular.module("test",[]);    app.controller('ctrl', function ($scope) {        $scope.lists=[            {name:'sda',url:'baidu.com'},              {name:'sdfb',url:'qq.com'}        ]    })</script>

11. angularJS 获取php连接数据库取得的数据

http://localhost:81/a.php 运行结果是从数据库中取出数据，并拼接成json格式的对象字符串。或者是先得到一个数组，再转换为json对象，（不研究）

<?phpheader("Access-Control-Allow-Origin: *");    //允许跨域header("Content-Type: application/json; charset=UTF-8");$conn = new mysqli("localhost", "root", "1234", "test");$result = $conn->query("SELECT sf_id, ds_name FROM dishi");$outp = "";while($rs = $result->fetch_array(MYSQLI_ASSOC)) {    if ($outp != "") {$outp .= ",";}    $outp .= '{"sf_id":"'  . $rs["sf_id"] . '",';    $outp .= '"ds_name":"'. $rs["ds_name"].'"}';}$outp ='{"records":['.$outp.']}';$conn->close();echo($outp);?>

（补充：这种就是取出数据库数据，先封装成数组，再json_encode转成json对象，跟上面的结果是一样的。被访问时，就是一个json对象！）

<?php mysql_connect('localhost', 'root' ,'1234'); mysql_select_db("test"); $sf_id = $_GET["sf_id"]; if(isset($sf_id)){     $q=mysql_query("select * from dishi where sf_id = $sf_id");     while($row=mysql_fetch_array($q)){         $select[] = array("ds_id"=>$row['ds_id'],"ds_name"=>urlencode($row['ds_name']));     } echo urldecode(json_encode($select)); }

angularJS 文件写法跟一般情况一样

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><div ng-app="test" ng-controller="ctrl">    <table>        <tr ng-repeat="x in res">            <td>{{x.sf_id}}</td>            <td>{{x.ds_name}}</td>        </tr>    </table></div><script>var app=angular.module("test",[]);    app.controller('ctrl', function ($scope,$http) {      $http.get("http://localhost:81/a.php")     //  这里换成php路径而已              .success(function (response) {                  $scope.res=response.records;              });    })</script>

12 ng-disable

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><div ng-app="" ng-init="flag=true">   <button ng-disabled="flag">点我</button>    <input type="checkbox" ng-model="flag">按钮     使用checkbox ng-model来改变true false    {{flag}}</div>

13.ng-hide ng-click、传统显示隐藏、利用checkbox 显示隐藏

ng-hide ng-click<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><div ng-app="a" ng-controller="ctrl">    <button ng-click="change()">显示隐藏</button>    <div ng-hide="flag" style="border:1px solid red;width:200px;height: 200px;">red</div></div><script>var app=angular.module("a",[]);    app.controller('ctrl', function ($scope) {        $scope.flag=true;        $scope.change= function () {            $scope.flag=!$scope.flag;     // 点击时值取反！        }    });</script><!--jq隐藏显示--><script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script><button class="bt1">button</button><div class="div2" style="display: block;width:200px;height: 200px;border:1px solid green;"></div><script>    $(function () {        $(".bt1").click(function () {            $(".div2").toggle();        });    });</script>

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><div ng-app="a" ng-controller="ctrl">    <button ng-click="change()">显示隐藏</button>    <input type="checkbox" ng-model="flag">显示      <!-- 直接 checkbox就不需要 $scope.change 了-->    <div ng-show="flag" style="border:1px solid red;width:200px;height: 200px;">red</div></div><script>var app=angular.module("a",[]);    app.controller('ctrl', function ($scope) {        $scope.flag=true;        $scope.change= function () {            $scope.flag=!$scope.flag;     // 点击时值取反！        }    });</script>

14. 表单验证，感觉挺麻烦的

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><div ng-app="a" ng-controller="myTest" >     <!--必须用控制器，不然没效果-->    <form name="form1" novalidate>   <!-- novalidate  取消浏览器默认验证 -->        <input type="email" name="email1" required ng-model="email" >        <span ng-show="form1.email1.$dirty && form1.email1.$invalid">            <span ng-show="form1.email1.$error.required">邮箱是必须的</span>            <span ng-show="form1.email1.$error.email">邮件格式错误</span>        </span>        <input type="submit" ng-disabled="form1.email1.$dirty && form1.email1.$invalid">    </form></div><script>var app=angular.module("a",[]);app.controller('myTest', function ($scope) {    $scope.email='';});</script>

15. angular API

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><div ng-app="a" ng-controller="myTest" >         {{x1}}  {{x2}}  {{x3}}</div><script>var app=angular.module("a",[]);app.controller('myTest', function ($scope) {    $scope.x1='Abc';    $scope.x2=angular.uppercase($scope.x1);   //  angular API    $scope.x3=angular.isString($scope.x1);});</script>

阅读全文

0 0