angular基础 | 小蜜蜂

1、引入angular.js

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

2、表达式

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

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

3、指令

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

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

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

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

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

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

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

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

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

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

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

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

4、过滤器filter的使用

常见的过滤器有：

currency-数字格式化成货币

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

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

uppercase-小写变大写

lowercase-大写变小写

过滤器在表达式用使用

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

过滤器在指令中的使用

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

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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

自定义过滤器是为了完成特定的功能而存在的纯函数。
自定义指令是能够提供特殊功能的函数。

7、验证用户的输入

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

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

8、scope和scope和rootScope

scope代表当前控制器的作用域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;
    })
})1
2
3
4
5
6
7
8
9
10
11
12
13

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:'/'})
}])1
2
3
4
5
6
7
8
9
10

11、angular的一个备忘录示例

<!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>

















1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

					<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-8cccb36679.css" rel="stylesheet">
            </div>