angular.js 教程 -- 实例讲解
angular.js
第一个实例 hello{{name}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body> <div ng-app="myapp">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div> </body>
</html>
网页加载完成，angularJS自动开启
ng-app指令告诉angularJS，<div>元素是angularJS应用程序的“所有者”。
ng-model指令把输入域的值绑定到应用程序变量name。
ng-bind指令把应用程序变脸name绑定到某个段落发innerHTML。
双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}} <!-- angular表达式 字符串-->
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
一，angular 表达式
1.angular对象
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
<p>姓为 <span ng-bind="person.lastName"></span></p>
<!-- 二者显示结果相同。 -->
</div>
2.angular数组
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
二，angular指令
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
angular循环遍历，ng-repeat 指令用在一个对象数组上：
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
创建自定义的指令
除了angularJS内置的指令外，我们还可以创建自定义指令。
你可以使用.directive函数添加自定义指令。
要调用自定义指令，HTML元素上需要添加自定义指令名。
使用驼峰命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function () {
return {
template: "<h1>自定义指令!</h1>",
//replace : true,
//restrict : "EACM"
};
});
</script>
</body>
<runoob-directive></runoob-directive>
<div runoob-directive></div>
<div class="runoob-directive"></div>
<!-- directive: runoob-directive -->
* replace 是一个可选参数，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部：
如：
<my-directive></my-directive>
.directive("myDirective",function(){
return {
template:"<h3>世上无难事，只怕有心人</h3>"
}
})
调用指令之后的结果如下（这是默认replace为false时的情况）：
<my-directive>
<h3>世上无难事，只怕有心人</h3>
</my-directive>
如果replace被设置为了true：
.directive("myDirective",function(){
return {
replace:true,
template:"<h3>世上无难事，只怕有心人</h3>"
}
})
那么指令调用后的结果将是：
<h3>世上无难事，只怕有心人</h3>
* restrict 可以限制你的指令只能通过特定的方式来调用。
restrict 值可以是以下几种:
E作为元素名使用A作为属性使用C作为类名使用M作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
三，angularJS 九种内置过滤器
<!DOCTYPE html>
<html ng-app="App"> <head>
<meta charset="UTF-8">
<title>内置过滤器</title>
</head> <body>
<div ng-controller="controllerTest01">
<ul>
<!-- currency处理函数，price是第一个参数，“￥”是第二个参数。显示的值是currency这个函数执行完成以后的返回值 -->
<li>{{price|currency:"￥"}}</li>
<li>{{nowdate|date:'yyyy/MM/dd hh:mm:ss EEEE'}}</li>
<li>{{arr1|filter:'j'}}</li>
<li>{{arr2|filter:{age:16} }}</li>
<li>{{arr2|json }}</li>
<li>{{arr1|limitTo:2}}</li>
<li>{{str|uppercase|lowercase|limitTo:7}}</li>
<li>{{num|number:2}}</li>
<li>{{num2|number:4}}</li>
<li>{{arr2|orderBy:"age":true}}</li>
</ul>
</div> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script>
var App = angular.module("App", []);
App.controller("controllerTest01", ['$scope', function ($scope) {
// 内置过滤器 9个
// 1. currency (货币处理),如果不传递参数，默认是美元符
// 2. date (日期格式化)
// 3. filter(匹配子串)
// 4. json(格式化json对象) 跟stringify相同 没有参数
// 5. limitTo(限制数组长度或字符串长度)
// 6. lowercase(小写) 没有参数
// 7. uppercase(大写) 没有参数
// 8. number(格式化数字) [参数]
// 9. orderBy(排序) [name,boolean] $scope.price = 99.99;
$scope.nowdate = new Date();
$scope.arr1 = ['html', "css", 'js', "hhhh", "j", "c"];
$scope.arr2 = [
{ name: "jack", age: 20 },
{ name: "mack", age: 16 },
{ name: "sunny", age: 18 }
]
$scope.str = "Hello World";
$scope.num = "10.23456";
$scope.num2 = 123456789
}])
</script>
</body> </html>
自定义过滤器：
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title>自定义过滤器</title>
</head>
<body>
<div ng-controller="controllerTest01">
<h2>{{msg|demo:"abc":"bcd":"efg"}}</h2>
<h3>{{val|firstUppercase:123}}</h3>
</div> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script>
var App = angular.module("App",[]);
// 定义控制器
App.controller("controllerTest01",['$scope',function($scope){
$scope.msg = " world"
$scope.val = "hello world"
}])
//自定义指令
// App.directive('指令名',function(){
// return{}
// }) // 自定义过滤器
App.filter('demo',function(){
return function(val,a,b,c){ //demo就是一个函数
console.log(val) //world
console.log(a,b,c) //abc bcd efg // 显示值又是一个返回值
return "hello" + val;
}
})
// 自定义过滤器，首字母大写
App.filter('firstUppercase',function(){
return function(data,args){
console.log(args) //123
return data[0].toUpperCase() + data.slice(1)
}
})
</script>
</body>
</html>
四，angularJS 服务（Service）
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title>内置服务-$location</title>
</head>
<body>
<div ng-controller="controllerTest01">
<ul>
<li>绝对路径：{{absurl}}</li>
<li>服务：{{host}}</li>
<li>查询字符串(参数)：{{search}}</li>
<li>端口号：{{port}}</li>
<li>协议:{{protocol}}</li>
<li>哈希（锚点）：{{hash}}</li>
</ul>
</div> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script>
var App = angular.module("App",[]);
// $http -- > 对ajax的一种封装
// $log --> 对congsole的封装
// $timeout --> 定时器
// $location --> 对浏览器地址栏的封装 App.controller("controllerTest01",['$scope','$location',function($scope,$location){
console.log($location)
$scope.absurl = $location.absUrl();
$scope.host = $location.host();
$scope.port = $location.port();
$scope.search = $location.search(); //对http有要求
$scope.protocol = $location.protocol();
$scope.hash = $location.hash();
}]) </script>
</body>
</html>
内置服务——定时器
App.controller("controllerTest01",['$scope','$timeout','$interval',function($scope,$timeout,$interval){
$timeout(function(){
$scope.msg = "timeout执行了"
},3000)
var timer = $interval(function(){
$scope.datenow = new Date();
},1000)
$scope.stop = function(){
$interval.cancel(timer)
}
}])
内置服务——filter
<div ng-controller="controller01">
<ul>
<li>{{price}}</li>
<li>{{str}}</li>
<li>{{str1}}</li>
</ul>
</div> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script>
var App = angular.module("App", []);
App.controller("controller01", ['$scope', '$filter', function ($scope, $filter) {
// $filter 可以引入九种内置的过滤器，这个是过滤器的第二种用法
$scope.price = 99.99;
var currency = $filter('currency');
$scope.price = currency($scope.price); $scope.str = "hello angular";
var uppercase = $filter('uppercase');
$scope.str = uppercase($scope.str); $scope.str1 = $filter('limitTo')($scope.str, 5)
}]) </script>
内置服务——http
App.controller("controller01",['$scope','$filter','$http',function($scope,$filter,$http){
// $http 本质是对ajax的封装，放到服务底下运行
// 1.5以上使用then方法，类似于promise中的then
// 1.5以下就直接使用success方法和error方法
// $http({
// method: 'GET',
// url: './02.json',
// params : { //get请求的参数
// uname : 'aaaa',
// age : 30
// }
// }).then(function(data){
// console.log(data); //封装过的，该对象底下的data属性放的是数据
// console.log(data.data);
// },function(err){
// console.log(err)
// });
$http({
method : "POST",
url : "/sendData",
headers : { //post请求最好设置请求头
"content-type" : "application/x-www-form-urlencoded"
},
data : { //post请求的参数
uname : "aaa",
age : 30
}
}).then(function(data){
console.log(data)
console.log(data.data.data); //想要的后台的数据
},function(err){
console.log(err);
})
}])
自定义服务：
要使用自定义服务，需要在定义控制器的时候独立添加，设置依赖关系。
var App = angular.module("App", []);
// 定义一个服务，格式化对象
// {
// name : "jack",
// age : 30
// }
// ?name=jack&age=30
App.factory('format', ["$filter", function ($filter) {
function fm(data) { //val 是一个对象
var str = "?";
for (var key in data) {
str += key + "=" + data[key] + '&';
}
str = str.slice(0, -1);
return str;
}
function aaa() {
console.log('hello')
}
// 返回一个对象出去
return {
format: fm,
aaa: aaa
}
}])
App.controller("controller01", ['$scope', '$filter', '$http', 'format', '$log', function ($scope, $filter, $http, format, $log) {
var data = {
name: "jack",
age: 30
}
format.aaa();
$scope.str = format.format(data)
$log.log(format.format(data));
}])
angular.js 教程 -- 实例讲解的更多相关文章
- Vue.js 教程 -- 实例讲解
一. Vue.js是什么 Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合. 1.1 Vue.js的目的 ...
- [Angular JS教程] HeroService: getHeroes failed: undefined 问题解决方法
最近在学习入门Angular JS,学习资源是https://angular.cn/tutorial, 在学习到 "https://angular.cn/tutorial/toh-pt6模拟 ...
- [转载]CSS教程:实例讲解定位Position
http://www.missyuan.com/thread-395406-1-1.html 1. position:static 所有元素的默认定位都是:position:static,这意味着元素 ...
- Angular.js 以及个人学习网站
Angular.js 教程 http://www.360doc.com/content/14/0414/15/14416931_368816305.shtml web前端学习: 慕课网:http:/ ...
- 10+ 最佳的 Node.js 教程和实例
如果你正在找Node.js的学习资料及指南,那么请继续(阅读),我们的教程将会覆盖即时聊天应用.API服务编写.投票问卷应用.人物投票APP.社交授权. Node.js on Raspberry Pi ...
- 这是一份很详细的 Retrofit 2.0 使用教程（含实例讲解）（转）
前言 在Andrroid开发中,网络请求十分常用 而在Android网络请求库中,Retrofit是当下最热的一个网络请求库 今天,我将献上一份非常详细Retrofit v2.0的使用教程,希望你们会 ...
- 这是一份很详细的 Retrofit 2.0 使用教程（含实例讲解）
前言 在Andrroid开发中,网络请求十分常用 而在Android网络请求库中,Retrofit是当下最热的一个网络请求库 今天,我将献上一份非常详细Retrofit v2.0的使用教程,希望你们会 ...
- Python爬虫教程-16-破解js加密实例（有道在线翻译）
python爬虫教程-16-破解js加密实例(有道在线翻译) 在爬虫爬取网站的时候,经常遇到一些反爬虫技术,比如: 加cookie,身份验证UserAgent 图形验证,还有很难破解的滑动验证 js签 ...
- angular.js分页代码的实例
对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在 ...
随机推荐
- POJ 2538
#include<string> //#include #include<stdio.h> #include<iostream> using namespace s ...
- Centos6.7配置Nginx+Tomcat简单整合
系统环境:Centos 6.7 软件环境:JDK-1.8.0_65.Nginx-1.10.3.Tomcat-8.5.8 文档环境:/opt/app/ 存放软件目录,至于mkdir创建文件就不用再说了 ...
- 课程一(Neural Networks and Deep Learning)，第一周（Introduction to Deep Learning）—— 0、学习目标
1. Understand the major trends driving the rise of deep learning.2. Be able to explain how deep lear ...
- C# 多线程六之Task(任务)三之任务工厂
1.知识回顾,简要概述 前面两篇关于Task的随笔,C# 多线程五之Task(任务)一 和 C# 多线程六之Task(任务)二,介绍了关于Task的一些基本的用法,以及一些使用的要点,如果都看懂了,本 ...
- Install vsftpd on centos
安装vsftpd程序. sudo yum -y install vsftpd 启动ftp服务. sudo service vsftp start 添加ftp用户,并设置密码. sudo useradd ...
- Android使用内容提供者实现增删改查操作
Android使用内容提供者实现增删改查操作 这里需要建立两个项目:SiYouShuJuKu(使用内容提供者暴露相关的操作),DQDYGApplication(使用内容解析者对第一个应用进行相关的解析 ...
- ASP.NET Core 1.0 中使用 Log 日志配置
https://github.com/aspnet/Logging https://docs.asp.net/en/latest/fundamentals/logging.html ASP.NET C ...
- java+hibernate+mysql
实体类News package org.mythsky.hibernatedemo; import javax.persistence.*; @Entity @Table(name="new ...
- 打印页面时a标签不显示URL的方法
以前写博客啊,总想写一篇大作,然后希望能挂到博客园首页,隔一会儿看看阅读量有多少.其实哪有那么多大作,大部分时间都是解决了一个小问题,然后需要记录一下.比如下面这篇. 今天遇到一个需求是,打印网页时, ...
- Ehcache的视频-如何用Ehcache提升你的Java应用性能
Java应用最广的缓存(分布式缓存)Ehcache的Youtube介绍视频 (需-翻-墙)