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= ...
随机推荐
- 10个php笔试题
Q1 第一个问题关于弱类型 $str1 = 'yabadabadoo'; $str2 = 'yaba'; if (strpos($str1,$str2)) { echo "/"&q ...
- React 源码解读参考,理解原理。
Rubix - ReactJS Powered Admin Template 文档: http://rubix-docs.sketchpixy.com/ ===================== ...
- Appium+Robotframework实现Android应用的自动化测试-2:Windows中启动Appium和模拟器
一.启动Appium 安装好了之后,在桌面或者菜单中找到Appium,分别双击或点击打开Appium.exe,如果一切正常,接着会出现一个Appium启动后的界面窗口,如下图所示. 1.1 Andro ...
- svn: Commit failed (details follow): svn: Authorization failed
我的原因是我没有使用账户密码,匿名用户没有写权限,只有只读的权限 修改下svn配置文件中的anon-access=read为anon-access=write 还有一点要注意:选项前面不能留空格,必须 ...
- ABAP ALV单个单元格状态编辑-简单版本
*&---------------------------------------------------------------------* *& Report ZPPR0024 ...
- log4net使用
平时项目里一直都有在使用log4net作为日志记录模块,当时一直都没有去理解log4net的配置文件信息.今天抽出了一点时间来看了看配置文件信息. log4net配置文件信息: <log4net ...
- Mysql 基础 高级查询
在西面内容中 car 和 nation 都表示 表名 1.无论 高级查询还是简单查询 都用 select.. from..语句 from 后面 加表名 可以使一张表也可以是 ...
- Luncence .Net 使用
public partial class Form1 : Form { public Form1() { InitializeComponent(); } //标准分词 private void bu ...
- mysql时间字符串按年/月/天/时分组查询
SELECT DATE_FORMAT( deteline, "%Y-%m-%d %H" ) , COUNT( * ) FROM test GROUP BY DATE_FORMAT( ...
- 【leetcode】Spiral Matrix(middle)
Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...