AngularJS引导详细介绍及实例代码

自举

AngularJS的首选样式表是推特自举，推特自举是目前最受欢迎的前端框架。

查看引导程序教程。

引导程序

你可以在你的AngularJS应用中加入推特自举，你可以在你的头元素中添加如下代码：

链接rel='样式表href='//maxcdn。bootstrapcdn。com/bootstrap/3。3 .4/CSS/bootstrap。量滴' CSS '

如果站点在国内，建议使用百度静态资源库的自举，代码如下：

链接rel='样式表href='//apps。bdimg。com/libs/bootstrap/3。3 .4/CSS/bootstrap。量滴' CSS '

以下是一个完整的超文本标记语言实例，使用了AngularJS指令和引导程序类。

超文本标记语言代码

！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类编辑/th名/th姓/th/tr/ad t正文tr ng-repeat=' user in users ' TD按钮class=' BTN ' ng-click=' editUser(用户。id)' span class=' glyphicon glyphicon-pencil '/span编辑/button/TD { { user }。fname } }/TD { { user。lname } }/TD/tr/t body/table hrbutton class=' BTN BTN-成功' ng-click=' editUser(' 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修改/button/div脚本src=' http : musers。js '/脚本/正文/html运行结果：

指令解析

AngularJS指令描述html ng-app为超文本标记语言元素定义一个应用（未命名)车身ng-控制器为身体元素定义一个控制器重复循环用户对象数组，每个用户对象放在tr元素中点击按钮当点击按钮元素时调用函数编辑用户(H3)吴秀秀如果编辑=真显示h3元素H3吴隐藏如果编辑=真隐藏h3元素输入尼日利亚模型为应用程序绑定投入元素按钮ng-禁用如果发生错误或者ncomplete=true禁用按钮元素引导程序类解析

元素引导程序类定义差异容器内容容器桌子桌子表格表格表格-条纹带条纹背景的表格按钮btn按钮按钮BTN成功成功按钮跨度字形字形图标跨度字形铅笔铅笔图标跨度字形-用户用户图标跨度字形-保存保存图标表格表格-水平水平表格差异表单组表单组标签控件-标签控制器标签标签栏sm-2跨越2列sm-10分区栏跨越10 列Java脚本语言代码

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。不完整=真；}};});Java脚本语言代码解析

范围属性用途$scope.fName模型变量（用户名)$scope.lName模型变量（用户姓)$scope.passw1模型变量（用户密码1) $scope.passw2模型变量（用户密码2) $scope.users模型变量（用户的数组)$scope。编辑当用户点击创建用户时设置为真的。$scope.error如果通行证一不等于通行证2设置为真$scope。不完整如果每个字段都为空（长度=0)设置为true $scope.editUser设置模型变量$scope.watch监控模型变量$scope.test验证模型变量的错误和完整性以上就是对自举资料的整理，后续继续补充，希望能帮助编程AngularJS的同学。