基于AngularJS的简单使用详解


Posted in Javascript onSeptember 10, 2017

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的简单使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
JS获取字符对应的ASCII码实例
Sep 10 #Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 #Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 #Javascript
浅谈Express异步进化史
Sep 09 #Javascript
vue组件学习教程
Sep 09 #Javascript
weex里Vuex state使用storage持久化详解
Sep 09 #Javascript
Vue2几种常见开局方式详解
Sep 09 #Javascript
You might like
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
php 生成随机验证码图片代码
2010/02/08 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
popdiv
2006/07/14 Javascript
用 JavaScript 迁移目录
2006/12/18 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
Python Web版语音合成实例详解
2019/07/16 Python
通过自学python能找到工作吗
2020/06/21 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
物业公司采购员岗位职责
2013/12/31 职场文书
运动会入场口号
2014/06/07 职场文书
远程培训的心得体会
2014/09/01 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
承诺书模板大全
2015/05/04 职场文书
班级班风口号大全
2015/12/25 职场文书