angularjs 菜鸟教程版本1.4.6

最简angularJS

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对象，（不研究）

<?php
header("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>

angularjs 菜鸟教程版本1.4.6的更多相关文章

Http状态码大全（来自菜鸟教程）
HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准. HTTP是一个基于TCP/IP通信 ...
【转载】图灵AngularJS入门教程
摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...
用汇编语言（ARM 32位）编写TCP Bind Shell的菜鸟教程
用汇编语言(ARM 32位)编写TCP Bind Shell的菜鸟教程来源 https://www.4hou.com/info/news/9959.html Change 新闻 2018年1月19日 ...
学习笔记之C# 教程 | 菜鸟教程
C# 教程 | 菜鸟教程 http://www.runoob.com/csharp/csharp-tutorial.html 菜鸟教程在线编辑器 http://www.runoob.com/try/r ...
C++ Web 编程（菜鸟教程）
C++ Web 编程(菜鸟教程) C++ Web 编程什么是 CGI? 公共网关接口(CGI),是一套标准,定义了信息是如何在 Web 服务器和客户端脚本之间进行交换的. CGI 规范目前是由 NC ...
MongoDB基础教程[菜鸟教程整理]
MongoDB基础教程 ======================================================================================== ...
菜鸟教程 Missing parentheses in call to 'print'
个人博客地址:http://www.wenhaofan.com/article/20180618180327 >>> print "hello" SyntaxE ...
MySQL教程 | 菜鸟教程
装数据库失败后的重装步骤!!! --[创建数据库]CREATE DATABASE <数据库名>: --使用mysqladamin 创建数据库-- 使用普通用户,你可能需要特定的权限来创建或 ...
vue学习过程总结（03） - 菜鸟教程归纳
1.模板语法 1.1.文本插值,数据绑定.{{}},如: <p>{{ message }}</p> 1.2.输出HTML代码.v-html,如: <div v-html= ...

随机推荐

11.2---字符串数组排序，删除变位词（CC150）
这道题主义的就是,要利用数组自带的sort函数. 此外,注意,利用hash来判断是否出现了. public static ArrayList<String> sortStrings(Str ...
使用jar命令打war包
1.打开cmd进入web项目发布文件夹 2.,输入jar -cvf qxpt.war * (*表示当前目录下所有子目录) 3,回车等待执行完成就可以了 4.如果web项目发布文件夹有多个文件夹,而打w ...
JavaScript——callback（回调函数
1.回调函数定义回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用为调用它所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直 ...
ffmpeg-20160816-bin.7z
ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒下一个帧 -> -5秒 f ...
gtk+-3.21.4 static build step in windows XP
In recent days the weather is very hot Unable to sleep properly Under the state of daze research gtk ...
ffmpeg-20160527-git-bin
ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒下一个帧 -> -5秒 f ...
Python 路谱
20160214--->20160824 一口气爬过高山 Happy Valentine’s Day https://docs.python.org/2.7/library/index.html ...
nyoj20_吝啬的国度_DFS
吝啬的国度时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市, ...
Divide and conquer:Drying(POJ 3104)
烘干衣服题目大意:主人公有一个烘干机,但是一次只能烘干一件衣服,每分钟失水k个单位的水量,自然烘干每分钟失水1个单位的水量(在烘干机不算自然烘干的那一个单位的水量),问你最少需要多长时间烘干衣服? ...
Delphi 2010 Can't load package C:\Programme\Afalinasoft\Add-in Express 2\d5units\adxwizardd5.bpl.
"Can't load package C:\Programme\Afalinasoft\Add-in Express 2\d5units\adxwizardd5.bpl. Componen ...

angularjs 菜鸟教程 版本1.4.6

angularjs 菜鸟教程 版本1.4.6的更多相关文章

随机推荐

热门专题

angularjs 菜鸟教程版本1.4.6

angularjs 菜鸟教程版本1.4.6的更多相关文章