Angular Js 的初步认识和使用

一：

1.模块化

定义模块和控制器 ng-app="myapp" controller="myctrl"

指定模型 ng-model=""

获取的属性值: ng-bind="属性名"或者{{属性名}}

2.初始化模块(在Script中进行)

var myapp1 =angular.module("myapp",[]);

3.定义模块的控制器,并依赖注入,
$scope:可以操作模块作用域内的所有视图

myapp1.controller("myctrl",["$scope",function($scope){
$scope."属性名"
// 也可以对$scope操作的视图进行赋值
$scope."属性名"="值";
}])

4.绑定事件

//其他事件联想基本为:ng-动作
ng-click="clear()" 

在定义的模块控制器中进行事件函数的后续操作:
$scope.clearSop=function(){
$scope.name="";
}

5.集合数据的遍历

数据格式范例:对象数组一般的数据类型(进行页面数据交互时因注意json的数据格式)

$scope.products = [
{
id : 1001,
name : '数码相机',
price : 3000
},{
id : 1002,
name : '苹果手机',
price : 7000
}
];

遍历样式:product相当于元素,products相当于集合,index为索引

<tr ng-repeat="product in products">
<td>{{$index+1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>

6.AngularJS中的路由的使用

1.需要单独导入:angular-route.js文件

2.定义angular模块

3.初始化模块

4.路由中的路径格式采用:"#/+url"

5.使用ng-view的模块用来展示路由加载后的变化内容

6.初始化模块:

var myapp1=angular.module("myapp",["noRoute"]);

7.配置模块的路由

myapp.config(["$routeProvider", function($routeProvider){
$routeProvider
 .when('/JavaEE', {
 templateUrl: '5_1.html'
 })
 .when('/IOS', {
 templateUrl: '5_2.html'
 })
 .when('/Android', {
 templateUrl: '5_3.html'
 })
 .otherwise({
 redirectTo: '/JavaEE'
 });
}]);

以上这篇基于AngularJS的简单使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

# AngularJS使用  # angularjs实现简单的购物车功能  # 详解angularjs popup-table 弹出框表格指令  # AngularJs 延时器、计时器实例代码  # 详解angularJS+Ionic移动端图片上传的解决办法  # AngularJS 打开新的标签页实现代码  # Angularjs实现上传图片预览功能  # AngularJS 仿微信图片手势缩放的实例  # 遍历  # 给大家  # 数据格式  # 也可  # 希望能  # 这篇  # 以对  # 绑定  # 小编  # 大家多多  # 器中  # 加载  # var  # angular  # xhtml  # pre  # Script  # brush  # class  # module 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： UC浏览器如何设置启动页 UC浏览器启动页设置方法  JS中页面与页面之间超链接跳转中文乱码问题的解决办法  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  Laravel如何设置自定义的日志文件名_Laravel根据日期或用户ID生成动态日志【技巧】  Laravel如何配置和使用缓存？（Redis代码示例）  零基础网站服务器架设实战：轻量应用与域名解析配置指南  小米17系列还有一款新机？主打6.9英寸大直屏和旗舰级影像  如何在IIS中新建站点并解决端口绑定冲突？  Laravel如何实现数据导出到CSV文件_Laravel原生流式输出大数据量CSV【方案】  昵图网官方站入口 昵图网素材图库官网入口  独立制作一个网站多少钱,建立网站需要花多少钱？  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  Win11怎么修改DNS服务器 Win11设置DNS加速网络【指南】  Laravel Facade的原理是什么_深入理解Laravel门面及其工作机制  原生JS实现图片轮播切换效果  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  如何在万网利用已有域名快速建站？  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的，背景音乐、音效等？  ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  Google浏览器为什么这么卡 Google浏览器提速优化设置步骤【方法】  如何在阿里云虚拟服务器快速搭建网站？  Laravel如何使用Sanctum进行API认证？（SPA实战）  Laravel Sail是什么_基于Docker的Laravel本地开发环境Sail入门  *服务器网站为何频现安全漏洞？  北京网站制作公司哪家好一点,北京租房网站有哪些？  网站制作免费,什么网站能看正片电影？  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  详解jQuery中的事件  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  EditPlus中的正则表达式 实战(2)  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  Laravel怎么防止CSRF攻击_Laravel CSRF保护中间件原理与实践  java ZXing生成二维码及条码实例分享  如何在阿里云服务器自主搭建网站？  如何在建站之星网店版论坛获取技术支持？  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理  高性价比服务器租赁——企业级配置与24小时运维服务  phpredis提高消息队列的实时性方法(推荐)  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  Laravel的Blade指令怎么自定义_创建你自己的Laravel Blade Directives  如何注册花生壳免费域名并搭建个人网站？  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  lovemo网页版地址 lovemo官网手机登录  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  Laravel如何实现全文搜索_Laravel Scout集成Algolia或Meilisearch教程  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  详解MySQL数据库的安装与密码配置  Java解压缩zip - 解压缩多个文件或文件夹实例  Python面向对象测试方法_mock解析【教程】