AngularJS中的包含详细介绍及实现示例

AngularJS包含

在AngularJS中，你可以在超文本标记语言中包含超文本标记语言文件。

在超文本标记语言中包含超文本标记语言文件

在超文本标记语言中，目前还不支持包含超文本标记语言文件的功能。

服务端包含

大多服务端脚本都支持包含文件功能(SSI:服务器端包括).

使用SSI，你可在超文本标记语言中包含超文本标记语言文件，并发送到客户端浏览器。

服务器端编程语言(专业超文本预处理器的缩写)实例

？PHP需要('导航。PHP’)；

客户端包含

通过Java脚本语言有很多种方式可以在超文本标记语言中包含超文本标记语言文件。

通常我们使用超文本传送协议(超文本传输协议的缩写)请求(AJAX)从服务端获取数据，返回的数据我们可以通过使用innerHTML写入到超文本标记语言元素中。

AngularJS包含

使用AngularJS，你可以使用ng-包括指令来包含超文本标记语言内容：

实例

body div class=' container ' div ng-include=' my users _ list。htm ' '/div ng-include=' my users _ form。htm ' '/div/div步骤如下：

步骤1: 创建超文本标记语言列表

myUsers_List.html

氕用户/h1 table class=' table table-stripped ' th编辑/th名/th姓/th/tr/ad tbodytr ng-repeat=' user in users ' TD按钮class=' BTN ' ng-click=' editUser(用户。id)' span class=' glyphicon glyphicon-pencil '/spanEdIt/button/TD { { user }。fname } }/TD { { user。lname } }/TD/tr/t正文/表格运行结果：

用户

编辑名姓编辑{{ user.fName }} {{ user.lName }}步骤2: 创建超文本标记语言表单

myUsers_Form.html

button class=' BTN BTN-成功' ng-click=' edit user(' new ')' span class=' glyphicon glyphicon-user '/span创建新用户/buttonhrh3 ng-show='edit '创建新用户：/h3h3 ng-hide='编辑'编辑用户：/H3表单类='表单-水平' div类='表单-组'标签类=' col-sm-2控件-标签'名：/标签div class='col-sm-10 '输入类型=' text ' ng-model=' fName ' ng-disabled='！编辑"占位符="名/div/div class=' form-group ' label class=' col-sm-2 control-label '姓：/标签div class='col-sm-10 '输入类型=' text ' ng-model=' lName ' ng-disabled='！编辑"占位符="姓/div/div class=' form-group ' label class=' col-sm-2 control-label '密码：/标签div class='col-sm-10 '输入类型='password' ng-model='passw1 '占位符='密码/div/div class=' form-group ' label class=' col-sm-2 control-label '重复密码：/标签div class='col-sm-10 '输入类型='password' ng-model='passw2 '占位符='重复密码/div/div/formhrbutton类=' BTN BTN-成功' ng-disabled='错误| |不完整span class=' glyphicon glyphicon-save '/span保存/按钮运行结果：

步骤3: 创建控制器

myUsers.js

angular.module('myApp '，[]).控制器(“用户控制”，函数($ scope){ $ scope。fname=$ scope . lname=$ scope . pass w1=$ scope . pass w2=$ scope . users=[{ id :1，fName: '和歌，lName:'Pege' }，{id:2，fName:'Kim '，lName:'Pim' }，{ id:3，fName:'Sal '，lName:'Smith' }，{ id:4，fName:'Jack '，lname 333660 $ scope . edit=true $ scope . error=false$ scope .残缺=false $ scope。edit user=function(id){ if(id==' new '){ $ scope。编辑=真；$ scope . incomplete=true $ scope . fname=$ scope . lname=} else { $ scope . edit=false $ scope。fname=$ scope。用户[id-1].fName$作用域。lname=$ scope。用户[id-1].lName } }$scope .$watch('passw1 '，function(){ $ scope。test()；});$scope .$watch('passw2 '，function(){ $ scope。test()；});$scope .$watch('fName '，function(){ $ scope。test()；});$scope .$watch('lName '，function(){ $ scope。test()；});$ scope。test=function(){ if($ scope。通过w1！==$作用域。传递w2){ $ scope。错误=真；} else { $ scope . error=false } $ scope .残缺=falseif ($scope.edit(！$scope.fName.length ||！$scope.lName.length ||！$scope.passw1.length ||！$ scope。通过w2。长度)){ $ scope。不完整=真；}};})步骤4: 创建主页

myUsers.html

！DOCTYPE html html hearteta charset=' utf-8 ' link rel='样式表href='//apps。bdimg。com/libs/bootstrap/3。3 .4/CSS/bootstrap。量滴CSS ' script src=' http :http://apps。bdimg。com/libs/angular。js/1。4 .6/棱角分明。量滴js '/script/bed dy-app=' myApp ' ng-controller=' userctl ' div类运行结果：

以上就是对AngularJS包含资料的整理，希望能帮助AngularJS编程的朋友。