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= ...
随机推荐
- Tomcat异常 Multiple Contexts have a path of "/qqshl".解决方法
Tomcat异常 Multiple Contexts have a path of "/qqshl".解决方法 找到tomcat映射文件Service.xml,将文件中的conte ...
- AngularJS vs. jQuery
很多Web开发新手都会有这样的疑问“我应该使用什么开发框架呢,如何快速学会Web开发呢?”这个问题其实没有一个统一的正确答案,其中讨论最多的就是AngularJS和jQuery的差别.这两者的之间的比 ...
- dubbo main方法启动
public static void main(String[] args) { com.alibaba.dubbo.container.Main.main(args); } 以上就可以简单本地启动了
- oracle，mybatis主键自增长
<insert id="insert" parameterType="resource"> <selectKey resultType=&qu ...
- 如何恢复低版本的FlashPlayer
本人做页游开发时,游戏用户那边经常会遇到一些很奇怪的问题.比如: 1.用户进入游戏,只显示游戏部分界面,chrome浏览器是正常的,就IE死活不行. 2.进入游戏时白屏或者一直加载不上. 3.玩游戏时 ...
- 错误日志中关于innodb的问题收集
1.错误日志报告如下: ..... 120223 23:36:06 InnoDB: Compressed tables use zlib 1.2.3 120223 23:36:06 InnoDB: I ...
- MySQL中的增删改查
将表cm_application中的state字段类型改为字符串型 alter table cm_application modify STATE varchar(50); 将表cm_applic ...
- ACM/ICPC 之 简单DP-记忆化搜索与递推(POJ1088-滑雪)
递推型DP 将每个滑雪点都看作起点,从最低点开始逐个由四周递推出到达此点的最长路径的长度,由该点记下. 理论上,也可以将每一点都看作终点,由最高点开始计数,有兴趣可以试试. //经典DP-由高向低海拔 ...
- json格式
$.post('text.action',{....},function(datas){ var name=datas.data[0].name; }); 如果是多个还可以用循环获取.$.post(' ...
- C#获取IP和主机名
System.Net.IPAddress addr; //获取IP addr = new System.Net.IPAddress ( Dns.GetHostByName ( Dns.GetHostN ...