目录
- 1、AngularJS 应用
- 2、AngularJS 指令
- 3、AngularJS 表达式
- 4、AngularJS 模型
- 5、AngularJS 控制器
- 6、AngularJS 作用域
- 7、AngularJS 过滤器
- 8、AngularJS 服务
- 9、AngularJS 表格
- 10、AngularJS 表单
- 11、AngularJS API
- 12、AngularJS 包含
- 13、AngularJS 样式
- 13、AngularJS 动画
- 14、AngularJS 依赖注入
- 15、AngularJS 路由
1、AngularJS 应用
AngularJS 是一个 JavaScript 框架,它可通过 <script> 标签添加到 HTML 页面,<script> 标签可以放置在 <head> 标签中
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
所以,<head> 标签可以写成以下的形式:
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
AngularJS 通过 指令 扩展 HTML,通过 表达式 绑定数据到 HTML
AngularJS 应用的构成元素如下:
- 模块 (Module):定义 AngularJS 应用
- 视图 (View):从用户角度看,视图是用户所看到的网页内容;从 AngularJS 角度看,视图是 AngularJS 指令和 AngularJS 表达式经过解析后的 DOM 元素
- 指令(Directives):拓展的 HTML 属性,能被 AngularJS 框架识别,根据不同指令完成不同动作
- 表达式(Expressions):用于向页面输出信息
- 模型(Model):用于展示到页面的数据
- 控制器(Controller):用于处理业务逻辑的方法
- 作用域(Scope):可以把作用域理解成一个容器,控制器可以从容器中拿出模型数据,也可以往容器中放入模型数据,然后在视图中通过表达式将数据展示给用户
- 模板(Template):AngularJS 以 HTML 作为模板语言,AngularJS 模板实际上就是 HTML 片段
2、AngularJS 指令
AngularJS 指令(Directives)是扩展的 HTML 属性,带有前缀 ng-
,包含 内置指令 和 自定义指令
(1)内置指令
常见的内置指令列举如下:
ng-app
:定义 AngularJS 应用程序的根元素,在网页加载完毕时会自动初始化应用程序ng-controller
:定义 AngularJS 应用程序的控制器ng-init
:初始化 AngularJS 应用程序数据,但是一般使用控制器或模块代替 ng-init 指令ng-model
:绑定 HTML 元素到应用 AngularJS 应用程序数据ng-repeat
:克隆数组中的每个项 HTML 元素
完整的内置指令请参考:http://www.runoob.com/angularjs/angularjs-reference.html
<body>
<div ng-app="" ng-init="quantity=1; price=5">
<h2>价格计算器</h2>
<p>数量: <input type="number" ng-model="quantity"></p>
<p>价格: <input type="number" ng-model="price"></p>
<p>总价: {{quantity * price}}</p>
</div>
</body>
(2)自定义指令
可以使用 directive
函数添加自定义指令
使用驼峰命名法命名指令,例 testFunction
,但是在使用时需要以 - 分割,例 test-function
<body ng-app="myApp">
<test-function></test-function>
<script>
var app = angular.module("myApp", []);
app.directive("testFunction", function() {
return {
template : "<p>自定义指令!</p>"
};
});
</script>
</body>
<!-- 网页显示内容:
自定义指令!
-->
可以通过以下方式使用指令:
- 元素名:
<test-function></test-function>
- 属性:
<div test-function></div>
- 类名:
<div class="test-function"></div>
- 注释:
<!-- directive: test-function -->
添加 restrict
属性可以设置指令的使用方式,restrict
属性的可选值如下:
- E:作为元素名使用
- A:作为属性使用
- C:作为类名使用
- M:作为注释使用
restrict
属性的默认值为 EA
,即既可以作为元素名使用,也可以作为属性使用
<body ng-app="myApp">
<div test-function></div>
<script>
var app = angular.module("myApp", []);
app.directive("testFunction", function() {
return {
restrict : "A",
template : "<p>自定义指令!</p>"
};
});
</script>
</body>
<!-- 这个例子通过使用 restrict 属性限制指令只能作为属性使用 -->
<!-- 网页显示内容:
自定义指令!
-->
注意:HTML5 允许自定义属性,以 data- 开头,AngularJS 允许自定义属性,以 ng- 开头,故我们可以以 data-ng- 开头来让网页对 HTML5 有效
3、AngularJS 表达式
AngularJS 表达式(Expressions)将数据与页面 双向绑定 起来
所谓的双向绑定,简单来说就是界面的操作能实时反映到数据,数据的变更能实时展现到界面
它写在双大括号内 {{expression}}
,与 JavaScript 表达式类似,可以包含文字、运算符和变量等
AngularJS 表达式与 JavaScript 表达式有以下的不同:
- AngularJS 表达式可以写在 HTML 中
- AngularJS 表达式不支持条件判断,循环及异常
- AngularJS 表达式支持过滤器
<body>
<div ng-app="" ng-init="firstName=‘Steve‘;lastName=‘Jobs‘">
<p>姓名: {{ firstName + " " + lastName }}</p>
</div>
</body>
<!-- 网页显示内容:
姓名: Steve Jobs
-->
4、AngularJS 模型
(1)数据绑定
ng-model
指令可以将输入域的数据与 AngularJS 创建的变量 双向绑定 起来
<body>
<div ng-app="myApp" ng-controller="myController">
输入值: <input ng-model="value">
<p>变量值: {{value}}</p>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myController‘, function($scope) {
$scope.value = "Hello";
});
</script>
</body>
(2)类型验证
ng-show
指令可以验证用户输入是否合法(number、email、required)
只有在 ng-show
属性返回 true
的情况下才显示提示信息
<body>
<form ng-app="" name="myForm">
Email: <input type="email" name="myEmail" ng-model="myText">
<p ng-show="myForm.myEmail.$error.email">输入的邮箱地址不合法</p>
</form>
</body>
(3)应用状态
ng-model
指令可以为应用数据提供状态值(invalid、dirty、touched、error)
- valid:若输入值合法则为 true
- dirty:若输入值改变则为 true
- touched:若有点击则为 true
- error:若输入值不合法则为 true
<body>
<form ng-app="" name="myForm">
Email: <input type="email" name="myEmail" ng-model="myText" required>
<h1>状态</h1>
<p>Valid: {{myForm.myEmail.$valid}}</p>
<p>Dirty: {{myForm.myEmail.$dirty}}</p>
<p>Touched: {{myForm.myEmail.$touched}}</p>
<p>Error: {{myForm.myEmail.$error.email}}</p>
</form>
</body>
(4)提供 CSS 类
ng-model
指令基于表单域的状态为 HTML 元素提供了 CSS 类,常见的表单域状态如下:
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<style>
input.ng-invalid { color: red; }
</style>
</head>
<body>
<form ng-app="" name="myForm">
Email: <input type="email" name="myEmail" ng-model="myText" required>
</form>
</body>
5、AngularJS 控制器
AngularJS 控制器(Controller)控制 AngularJS 应用程序的数据,它是常规的 JavaScript 对象
ng-controller
指令用于定义应用程序控制器,控制器不仅有属性,而且有方法
<body>
<div ng-app="myApp" ng-controller="myController">
名: <input type="text" ng-model="firstName"><br />
姓: <input type="text" ng-model="lastName"><br />
姓名: {{getName()}}
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myController‘, function($scope) {
$scope.firstName = "Steve";
$scope.lastName = "Jobs";
$scope.getName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
</body>
在大型应用程序中,通常把控制器存储在 外部文件 中
此时,只需要把原来 <script> 标签中的内容储存到文件中,然后通过 src 属性引用文件即可
<script src="fileName.js"></script>
6、AngularJS 作用域
AngularJS 作用域(Scope)是应用在 HTML (视图) 和 JavaScript (控制器) 之间的纽带
它用来保存 AngularJS Model 的 对象,有可用的方法和属性
当创建控制器时,可以将 $scope 对象作为参数传入,此时,视图就可以获取这些方法和属性
在视图中,不需要添加 $scope 前缀,只需要添加属性名即可
<body>
<div ng-app="myApp" ng-controller="myController">
<input ng-model="name">
<p>{{greeting}}</p>
<button ng-click=‘sayHello()‘>点我</button>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myController‘, function($scope) {
$scope.name = "Steve";
$scope.sayHello = function() {
$scope.greeting = ‘Hello, ‘ + $scope.name;
};
});
</script>
</body>
所有应用都有一个 根作用域 $rootScope,它可以作用在 ng-app
指令包含的所有 HTML 元素中
它是各个控制器中的作用域的桥梁,使用 rootscope 定义的值,可以在各个控制器中使用
<body>
<div ng-app="myApp" ng-controller="myController">
<h1>{{fruit}}</h1>
<ul>
<li ng-repeat="x in fruits">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myController‘, function($scope, $rootScope) {
$scope.fruits = ["Apple", "Banana", "Cherry"];
$rootScope.fruit = "Fruits";
});
</script>
</body>
7、AngularJS 过滤器
AngularJS 过滤器可以使用一个管道字符(|)添加到表达式和指令中,用于转换数据
常见的过滤器有:
- currency:格式化数字为货币格式
- lowercase:格式化字符串为小写
- uppercase:格式化字符串为大写
- orderBy:根据指定表达式排列数组
- filter:从数组中选择一个子集
(1)在表达式中添加过滤器
<body>
<div ng-app="myApp" ng-controller="myController">
<h2>价格计算器</h2>
<p>数量: <input type="number" ng-model="quantity"></p>
<p>价格: <input type="number" ng-model="price"></p>
<p>总价: {{ (quantity * price) | currency }}</p>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myController‘, function($scope) {
$scope.quantity = 1;
$scope.price = 5;
});
</script>
</body>
(2)在指令中添加过滤器
<body>
<div ng-app="myApp" ng-controller="myController">
<p>循环对象:</p>
<ul>
<li ng-repeat="x in names | orderBy:‘country‘">
{{ x.name + ‘, ‘ + x.country }}
</li>
</ul>
</div>
<script>
app = angular.module(‘myApp‘, []);
app.controller(‘myController‘, function($scope) {
$scope.names = [
{name:‘Rain‘,country:‘ England‘},
{name:‘Steve‘,country:‘England‘},
{name:‘Tami‘,country:‘America‘}
];
});
</script>
</body>
(3)自定义过滤器
下面的例子自定义一个过滤器 reverse,用于反转字符串
<body>
<div ng-app="myApp" ng-controller="myController">
正常: <input ng-model="string"></p>
反转: {{ string | reverse }}
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myController‘, function($scope) {
$scope.string = "abcdefg";
});
app.filter(‘reverse‘, function() {
return function(text) {
return text.split("").reverse().join("");
}
});
</script>
</body>
8、AngularJS 服务
AngularJS 服务(Service)是一个函数或者对象,很多服务都可以使用 DOM 中存在的对象
AngularJS 内建 30 多个服务,同时也允许自定义服务
(1)内建服务
- $http:核心服务,用于读取远程服务器上的数据
// 简单的 GET/POST 请求如下:
$http({
method: ‘GET/POST‘,
url: ‘URL‘
}).then(function successCallback(response) {
// 请求成功时执行的代码
}, function errorCallback(response) {
// 请求失败时执行的代码
});
// 简写如下:
$http.get(‘URL‘, config).then(successCallback, errorCallback);
$http.post(‘URL‘, data, config).then(successCallback, errorCallback);
- $location:返回当前页面的 URL,它作为参数传递给控制器
<body>
<div ng-app="myApp" ng-controller="myController">
<p>{{myUrl}}</p>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myController‘, function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script>
</body>
- $timeout:对应 JavaScript 中的 window.setTimeout 函数,按照指定的时间来调用函数
<body>
<div ng-app="myApp" ng-controller="myController">
<p>{{greeting}}</p>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myController‘, function($scope, $timeout) {
$scope.greeting = "Hello World!";
$timeout(function() {
$scope.greeting = "Hello AngularJS!";
}, 2000);
});
</script>
</body>
- $interval:对应 JavaScript 中的 window.setInterval 函数,按照指定的周期来调用函数
<body>
<div ng-app="myApp" ng-controller="myController">
<p>{{time}}</p>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myController‘, function($scope, $interval) {
$scope.time = new Date().toLocaleTimeString();
$interval(function() {
$scope.time = new Date().toLocaleTimeString();
}, 1000);
});
</script>
</body>
(2)自定义服务
可以使用 .service
添加自定义指令
<body>
<div ng-app="myApp" ng-controller="myController">
<p>10进制下的255 = 16进制下的{{hex}}</p>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.service(‘toHex‘, function() {
this.myFunc = function(x) {
return x.toString(16);
}
});
app.controller(‘myController‘, function($scope, toHex) {
$scope.hex = toHex.myFunc(255);
});
</script>
</body>
当创建自定义服务后,可以在控制器,指令,过滤器或者其它服务中使用
9、AngularJS 表格
可以通过 ng-repeat
指令创建一个表格
<body>
<div ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myController‘, function($scope) {
$scope.names = {
Rain: {Name:‘Rain‘, Country:‘ England‘},
Steve: {Name:‘Steve‘, Country:‘England‘},
Tami: {Name:‘Tami‘, Country:‘America‘}
}
});
</script>
</body>
可以通过 $index 服务让表格显示序号
<table>
<tr ng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
可以通过 $even 和 $odd 服务区分表格奇偶项
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>
10、AngularJS 表单
AngularJS 表单是输入控件的集合,包括 input 元素、select 元素、button 元素、textarea 元素
(1)单选框
使用 input 元素指定 type 属性为 radio 可以创建单选框
ng-model
指令可以双向绑定数据
ng-switch
指令可以根据选择结果显示或隐藏 HTML 区域
<body ng-app="">
<form>
请选择一个选项:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="cars">Cars
<input type="radio" ng-model="myVar" value="tuts">Tutorials
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
</div>
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
</div>
</div>
</body>
(2)复选框
使用 input 元素指定 type 属性为 checkbox 可以创建复选框
ng-model
指令可以双向绑定数据
ng-show
指令 / ng-hide
指令可以根据选择结果隐藏或显示 HTML 元素
<body>
<div ng-app="">
<form>
选中复选框,显示标题:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
</div>
</body>
(3)文本框
使用 input 元素指定 type 属性为 text 可以创建单行文本框
使用 textarea 元素可以创建多行文本框
ng-model
指令可以双向绑定数据
ng-init
指令可以为数据设置初始值
<body>
<div ng-app="" ng-init = "firstName=‘Steve‘; lastName=‘Jobs‘">
<form>
First Name: <input type="text" ng-model="firstName"><br />
Last Name: <input type="text" ng-model="lastName"><br />
</form>
</div>
</body>
(4)按钮
使用 input 元素指定 type 属性为 button 可以创建按钮
使用 button 元素可以创建按钮
ng-model
指令可以双向绑定数据
ng-click
指令可以定义点击按钮后发生的动作
<body>
<div ng-app="myApp" ng-controller="myController">
<button ng-click="set()"> 点我 </button>
<p>{{value}}</p>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myController‘, function($scope) {
$scope.value = "点击按钮前出现的文本";
$scope.set = function() {
$scope.value = "点击按钮后出现的文本";
};
});
</script>
</body>
(5)下拉列表
使用 select 元素可以创建下拉列表
ng-model
指令可以双向绑定数据
ng-option
指令可以创建下拉列表的列表项
<body>
<div ng-app="myApp" ng-controller="myController">
<select ng-model="myWeb" ng-options="x for x in webs"></select>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myController‘, function($scope) {
$scope.webs = ["Google", "Baidu", "Bing"];
});
</script>
</body>
ng-repeat
指令也可以创建下拉列表的列表项
<body>
<div ng-app="myApp" ng-controller="myController">
<select>
<option ng-repeat="x in webs">{{x}}</option>
</select>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myController‘, function($scope) {
$scope.webs = ["Google", "Baidu", "Bing"];
});
</script>
</body>
它们之间的区别在于 ng-options
创建的选项是一个对象, ng-repeat
创建的选项是一个字符串
显然,ng-options
更适用于创建一个下拉列表的选项
11、AngularJS API
AngularJS 全局 API 是用于执行常见任务的 JavaScript 函数集合,使用 Angular 对象进行访问
- lowercase():转换字符串为小写,自 AngularJS 1.7 之后改为 $$lowercase()
- uppercase():转换字符串为大写,自 AngularJS 1.7 之后改为 $$uppercase()
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope) {
$scope.x1 = "hello";
$scope.x2 = angular.$$uppercase($scope.x1);
});
</script>
</body>
<!-- 网页显示内容:
hello
HELLO
-->
- isString():判断给定的对象是否为字符串
- isNumber():判断给定的对象是否为数字
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope) {
$scope.x1 = "hello";
$scope.x2 = angular.isNumber($scope.x1);
});
</script>
</body>
<!-- 网页显示内容:
hello
false
-->
12、AngularJS 包含
在 AngularJS 中,可以在 HTML 中包含 HTML 文件,主要有 服务端包含 和 客户端包含 两种方式
我们通常使用 HTTP 请求从服务端获取数据,然后将数据写入到客户端(AJAX)
可以使用 ng-include
指令包含 HTML 文件或者 AngularJS 代码
<body ng-app="">
<div ng-include="‘fileName.htm‘"></div>
</body>
默认情况下, ng-include
指令不允许跨域包含
13、AngularJS 样式
AngularJS 首选的样式表是 Bootstrap,它可通过 <link> 标签添加到 HTML 页面,<link> 标签可以放置在 <head> 标签中
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
如果站点在国内,建议使用百度静态资源库的 Bootstrap
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
13、AngularJS 动画
AngularJS 提供动画效果,可以配合 CSS 使用,它需要引入库 angular-animate.min.js
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
还需要在应用中使用模型 ngAnimate,可以在设置应用名时,同时添加 ngAnimate 模型
<script>
var app = angular.module(‘myApp‘, [‘ngAnimate‘]);
</script>
实际上,ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,如果事件发生,ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画
AngularJS 添加/移除 class 的指令:
- ng-repeat
- ng-show
- ng-hide
- ng-switch
- ng-if
- ng-view
- ng-class
- ng-include
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular-animate.min.js"></script>
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
background-color: transparent;
height: 0;
width: 0;
top:-200px;
left: 200px;
}
</style>
</head>
<body ng-app="myApp">
<p>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></p>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module(‘myApp‘, [‘ngAnimate‘]);
</script>
</body>
</html>
14、AngularJS 依赖注入
依赖注入(Dependency Injection,DI)是一种软件设计模式
在这种模式下,一个或更多的依赖(或服务)被注入(或通过引用传递)到一个独立的对象(或客户端)中,然后成为客户端状态的一部分
AngularJS 提供 5 个核心组件用来作为依赖注入
- value:是一个对象,用于向控制器传递值
- factory:是一个函数,用于返回值
- service:是一个函数或者对象
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
<p>输入数字: <input type = "number" ng-model = "number" /></p>
<button ng-click = "square()">计算平方</button>
<p>得到结果: {{result}}</p>
</div>
<script>
var app = angular.module("myApp", []);
// 创建 value 对象 "defaultInput",用于传递数据
app.value("defaultInput", 5);
// 创建 factory 函数 "MathService",用于两数乘积
app.factory(‘MathService‘, function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
// 将 factory 函数 "MathService" 注入到 service
// 创建 service 服务 "CalcService",用于计算平方
app.service(‘CalcService‘, function(MathService) {
this.square = function(a) {
return MathService.multiply(a,a);
}
});
// 将 value 对象 "defaultInput" 注入到 controller
// 将 service 服务 "CalcService" 注入到 controller
app.controller(‘myCtrl‘, function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
</script>
</body>
- provider:提供一个方法 get(),用于返回 value/factory/service
app.config(function($provide) {
$provide.provider(‘MathService‘, function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
- constant:用于在配置阶段传递数值,注意这个常量在配置阶段是不可用的
15、AngularJS 路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容,它需要引入库 angular-route.min.js
<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular-route.min.js"></script>
还需要在应用中使用模型 ngRoute,可以在设置应用名时,同时添加 ngRoute 模型
<script>
var app = angular.module(‘myApp‘, [‘ngRoute‘]);
</script>
AngularJS 可以通过 #!
标记,实现多视图 (不同的页面内容) 单页 (同一个请求地址) Web 应用
考虑以下两个 URL:http://example.com/#!/first、http://example.com/#!/second
事实上,无论我们点击哪一个链接时,向服务端请求的地址都是一样的 http://example.com
#!
后面内容在发送请求时会被浏览器忽略,所以我们需要在客户端实现 #!
后面内容的功能实现
AngularJS 路由通过 #!
帮助我们区分不同的逻辑页面,并将不同的页面绑定到对应的控制器上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular-route.min.js"></script>
</head>
<body ng-app=‘myApp‘>
<h1>AngularJS 路由应用</h1>
<ul>
<li><a href="#!/">首页</a></li>
<li><a href="#!/about">关于</a></li>
<li><a href="#!/archives">归档</a></li>
<li><a href="#!/categories">分类</a></li>
<li><a href="#!/tags">标签</a></li>
<li><a href="#!/other">其它</a></li>
</ul>
<div ng-view></div>
<script>
app = angular.module(‘myApp‘,[‘ngRoute‘]);
app.config([‘$routeProvider‘, function($routeProvider){
$routeProvider
.when(‘/‘,{template:‘这是首页页面‘})
.when(‘/about‘,{template:‘这是关于页面‘})
.when(‘/archives‘,{template:‘这是归档页面‘})
.when(‘/categories‘,{template:‘这是分类页面‘})
.when(‘/tags‘,{template:‘这是标签页面‘})
.otherwise({redirectTo:‘/‘});
}]);
</script>
</body>
</html>
ngView
指令可以根据路由的变化改变 HTML 内容
config
函数可以用于配置路由规则
把 $routeProvider
注入配置函数,并使用 when(path,object)
和 otherwise(object)
函数
参数 path 定义 URL 规则;参数 object 定义 路由配置对象
路由配置对象的语法规则如下:
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
- template:如果只需在 ng-view 中插入简单的 HTML 内容,则使用该参数
- templateUrl:如果需要在 ng-view 中插入 HTML 模板文件,则使用该参数
- controller:在当前模板上执行的 controller 函数,生成新的 scope
- controllerAs:指定当前 controller 别名
- redirectTo:指定重定向的地址
- resolve:指定当前 controller 所依赖的其他模块
参考资料:
http://www.angularjs.net.cn/tutorial/
http://www.runoob.com/angularjs/angularjs-tutorial.html
https://www.w3cschool.cn/angularjs/
原文地址:https://www.cnblogs.com/wsmrzx/p/10405398.html