Angular学习笔记一

最新推荐文章于 2024-09-21 18:46:25 发布

purpleyou

最新推荐文章于 2024-09-21 18:46:25 发布

阅读量132

点赞数

分类专栏： Angular 文章标签：前端

本文链接：https://blog.csdn.net/qq_42734999/article/details/94132452

版权

Angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

angular下载地址:https://github.com/angular/angular.js/releases

ng-app: 定义了一个AngularJS应用程序
ng-model: 把元素值绑定到应用程序
ng-bind: 把应用程序数据绑定到HTML视图上

html部分：

<body ng-app="myapp" ng-controller="myCtl" >
    <div class="container">
        <h1 class="page-header">标题</h1>
        <form action="">
            <div class="form-group">
                <label for="">留言:</label>
                //MVC中的m
                <input type="text" class="form-control" ng-model="well">
            </div>
            //MVC中的v
            <div class="well">内容:{{well}}</div>
        </form>
    </div>
</body>

js部分：

//MVC中的c
app=angular.module('myapp',[]);
app.controller('myCtl',function($scope){
    $scope.well = 'Hello World';
})

一、Angular表达式

ng中的变量、函数等和js中的完全不同。
ng中的都是$scope内的 (使用:$scope.变量名)

<input ng-model="val1">
<input ng-model="val2">
//错误代码
<div class="well">{{parseInt(val1) + parseInt(val2)}}</div>
//正确代码
<div class="well">{{sum()}}</div>


//js部分
app = angular.module('myapp',[]);
app.controller('myCtr',function($scope){
	$scope.sum = function(){
		let res = parseInt($scope.val1) + parseInt($scope.val2);
		return res ? res : 0;
	}
})

二、repeat指令

ng-repeat 指令会重复一个 HTML 元素

//html部分
<body ng-app = "myapp" ng-controller = "myCtl">
    <div class="contianer">
        <h1>Angular-repeat指令</h1>
        <table class="table table-bordered table-hover">
            <tr>
                <th>id</th>
                <th>username</th>
                <th>password</th>
                <th>delete</th>
            </tr>
            <tr ng-repeat = "user in data">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.password}}</td>
                <td><a href="#">删除</a></td>
            </tr>
        </table>
    </div>
</body>

//js部分
app = angular.module('myapp',[]);
app.controller('myCtl',function($scope){
    $scope.data = [
        {id:1,username:'1',password:'123'},
        {id:2,username:'2',password:'123'},
        {id:3,username:'3',password:'123'},
        {id:4,username:'4',password:'123'},
        {id:5,username:'5',password:'123'},
    ]
})

三、过滤器

"链式"使用： 过滤器可以应用在另外一个过滤器的结果之上
{{过滤器1 | 过滤器2 | 过滤器3 | …}}

过滤器可以拥有多个参数
{{表达式 | 过滤器：参数1：参数2：参数3…}}

1. currency : 格式化数字为货币格式。

<body ng-app="">
    <div class="container">
        <form action="">
            <h1 class="page-header">Angular过滤器</h1>
            <div class="form-group">
                <input type="text" class="form-control" ng-model="num">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" ng-model="price">
            </div>
            <div class="well">{{num * price|currency}}</div>
        </form>
    </div>
</body>

2. filter : 从数组项中选择一个子集。

//html部分
<div class="form-group">
    <input type="text" class="form-control" ng-model="find">
</div>
<table class="table table-bordered table-hover">
    <tr ng-repeat="item in arr|filter:find">
        <td>{{item.name}}</td>
    </tr>
</table>

//js部分
app = angular.module('myapp',[]);
app.controller('myCtl',function($scope){
    $scope.arr = [
        {id:1,name:'Tom'},
        {id:2,name:'Mary'},
        {id:3,name:'Jack'},
        {id:4,name:'Lisa'},
    ]
})

3. lowercase : 格式化字符串为小写

<body ng-app="">
	<form action="">
		<div class="form-group">
			<input class="form-control" ng-model="str" />
		</div>
		<div class="well">{{str|lowercase}}</div>
	</form>
</body>

4. orderBy : 根据某个表达式排列数组

5. uppercase : 格式化字符串为大写

6. 自定义过滤器

//html部分
<body ng-app="myapp" ng-controller="myCtl">
	<form action="">
		<div class="form-group">
			<input class="form-control" ng-model="str" />
		</div>
		<div class="well">{{str|myfilter}}</div>
	</form>
</body>

//js部分
app = angular.module('myapp',[]);
app.controller('myCtl',function($scope){
	$scope.str = "Stive";
})
app.filter('myfilter',function(){
	return function(text){
		return text.split("").reverse().join("");
	}
})

四、AngularJS 服务(Service)

( Angular 中，服务是一个函数或对象)

1. $location 服务 : 返回当前页面的URL地址

app = angular.module('myapp',[]);
app.controller('myCtl',function($scope){
	$scope.str = "Stive";
})

2. $timeout服务

 app = angular.module('myapp',[]);
 app.controller('myCtl',function($scope,$timeout){
     $scope.num = 1;
     a = 1;
   $timeout(function(){
     $scope.num += a;
   },1000)
 })

3. $interval服务

//html部分
<body ng-app="myapp" ng-controller="myCtl">
    <div class="container">
        <form action="">
            <h1 class="page-header">Angular过滤器</h1>
            <div class="well">计时器:<span class="label label-success">{{time}}</span> </div>
        </form>
    </div>
</body>

//js部分
app = angular.module('myapp', []);
app.controller('myCtl', function ($scope, $interval) {
    $scope.time = 0;
    a = 1;
    $interval(function () {
        $scope.time += a;
    }, 1000);
})

4. http服务
是 Angular 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据

//html部分
<body ng-app="myapp" ng-controller="myCtl">
    <div class="container">
        <form action="">
            <h1 class="page-header">Angular过滤器</h1>
            <div class="well">计时器:<span class="label label-success">{{time}}</span> </div>
        </form>
    </div>
</body>

//js部分
app = angular.module('myapp', []);
app.controller('myCtl', function ($scope, $http) {
    $http.get("demo.php").success(function(res){
        if(res == 'ok'){
            $scope.time = 1;
        }else{
            $scope.time = 2;
        }
    })
})