您的位置：首页 > Web前端 > AngularJS

angular基础

2017-10-20 11:34 399 查看

1、引入angular.js

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

2、表达式

使用双引号表达的并且能进行简单的逻辑运算的JavaScript表达式

<div ng-app='' ng-init='name="mapbar_front"'>
{{name}}
</div>

3、指令

ng-app定义一个angular页面的入口

<div ng-app='app'></div>

ng-model是input输入框最常用的双向绑定机制

<input type='text' ng-model='inputValue' />
<p>inputValue:{{inputValue}}</p>

ng-controller定义了一个angular页面的控制器

<div ng-app='app' ng-controller='appCtrl'></div>

ng-repeat定义了数组的渲染方式

<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>

ng-if定义了一个条件渲染的方式

<div ng-if='isShow'></div>

ng-init进行数据的初始化（较少使用）

<div ng-app='app' ng-init='name="json";age=25'></div>

4、过滤器filter的使用

常见的过滤器有：

currency-数字格式化成货币

orderBy-按照一定的方式排序数组（在数组中使用，一般是数组中的某一项）

filter-选择过滤数组中的某一个子集（数组中使用）

uppercase-小写变大写

lowercase-大写变小写

过滤器在表达式用使用

<p>{{name|lowercase}}</p>
<p>{{大写 + ":" + (name|uppercase) }}</p>
//在复杂的表达式中，应该使用（）括起来

过滤器在指令中的使用

<div ng-bind='inputValue|uppercase'></div>

5、一个最简单的angular程序

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>angular示例</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app='app' ng-controller='ctrl'>
{{name}}
<my-directive></my-directive>
</div>
<script type='text/javascript'>
var app = angular.module('app',[]);
app.controller('ctrl',function($scope){
$scope.name='mapbar_front';
});
app.filter('reverse',function(text){
return text.split("").reverse().join("");
});
app.directive("myDirective",function(){
return {
template:"<h1>我是中国人</h1>"
}
});
</script>
</body>
</html>

6、自定义过滤器和自定义指令的区别

自定义过滤器是为了完成特定的功能而存在的纯函数。

自定义指令是能够提供特殊功能的函数。

7、验证用户的输入

<form ng-app="" name="myForm">
<input type='email' name='email' />
<span ng-show='myForm.email.$error.email'>不是一个合法的邮箱输入</span>
</form>

<form ng-app="" name="myForm">
<input type='email' name='email' />
<span ng-show='myForm.email.$valid'>不是一个合法的邮箱输入</span>
</form>

8、scope和rootScope

scope代表当前控制器的作用域rootScope代表所有控制器共享的根作用域

9、angular的服务

//基本的服务有$http、$location、$timeout、$interval以及自定义服务等
var app = angular.module('app',[]);
app.service('myService',[function(){
this.myFunc = function(str){
return str.split('').reverse().join('');
}
}]);
app.controller('ctrl',function($scope,$http,$interval){
$scope.name='liwudi';
$http.get('app.json').then(res => {
$scope.data=res.data;
})
})

10、angular路由

var app = angular.module("app",["ngRoute"]);
app.controller('ctrl',function($scope){
//todo
});
app.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{template:'首页'})
.when('/about',{template:'about页面'})
.otherwise({redirectTo:'/'})
}])

11、angular的一个
cd5a
备忘录示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular路由</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="ctrl">
<h1>我的备忘录</h1>
<input type="text" ng-model="inputValue" /><button ng-click="add()">新增</button>
<ul>
<li ng-repeat="x in todos"><input type="checkbox" ng-model="x.done" /><span>{{x.value}}</span></li>
</ul>
<button ng-click="delete()">删除</button>
</div>

</body>
<script type="text/javascript">
var app = angular.module('app',[]);
app.controller('ctrl',function ($scope) {
$scope.todos = [{done:false,value:'111'}];
$scope.inputValue='';
$scope.add = function () {
$scope.todos.push({done:false,value:$scope.inputValue});
$scope.inputValue='';
}

$scope.delete = function () {
$scope.todos = $scope.todos.filter(item => {
return item.done == false
})
}
});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航